/* ==========================================================================
   YOKOBABY — промо-лендинг. Главная страница.
   Макет: Key_Visual_test 3_3.psd, 2146 x 1438. Все размеры пересчитаны
   от этой ширины через --u, поэтому блок масштабируется без разрывов.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:root{
  --purple-dark:#431059;      /* шапка */
  --purple-text:#7c2595;      /* текст горячей линии */
  --grey-strip:#ffffff;       /* плашка горячей линии — белая по правке клиента */
  --red:#f80404;              /* кнопка */
  --yellow:#e49b27;           /* акцент в промо-строке */
  --dot:#f7c16c;              /* маркеры списка */
  --pink:#d850bc;             /* активный язык */
  --layout:2146;              /* ширина макета */
}

body{
  font-family:"Geologica","Segoe UI",Arial,sans-serif;
  color:#fff;
  background:#3e164b;
  overflow-x:hidden;
}

/* Масштабная единица: 1 --u == 1 пиксель макета.
   cqw берётся от ширины .page, поэтому полоса прокрутки ничего не ломает. */
.page{
  container-type:inline-size;
  --u:calc(100vw / var(--layout));
}
@supports (width:1cqw){
  .page{--u:calc(100cqw / var(--layout))}
}

/* ==========================  ШАПКА  ====================================== */
.header{
  position:relative;
  z-index:3;
  height:calc(158 * var(--u));
  background:var(--purple-dark);
}
.header__logo{
  position:absolute;
  left:calc(189 * var(--u));
  top:calc(6 * var(--u));
  width:calc(180 * var(--u));
}
.nav{
  position:absolute;
  left:calc(578 * var(--u));
  top:calc(75.21 * var(--u));
}
.nav__list{
  display:flex;
  align-items:baseline;
}
/* расстояния между пунктами взяты из макета — они неравные */
.nav__item:nth-child(2){margin-left:calc(65 * var(--u))}
.nav__item:nth-child(3){margin-left:calc(59 * var(--u))}
.nav__item:nth-child(4){margin-left:calc(58 * var(--u))}
.nav__item:nth-child(5){margin-left:calc(58 * var(--u))}
.nav__item:nth-child(6){margin-left:calc(51 * var(--u))}
.nav__item a{
  display:block;
  font-size:calc(24.59 * var(--u));
  font-weight:200;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:opacity .2s;
}
.nav__item a:hover{opacity:.65}

.lang{
  position:absolute;
  right:calc(270 * var(--u));
  top:calc(57 * var(--u));
  display:flex;
  align-items:center;
  gap:calc(15 * var(--u));
}
.lang__item{
  display:flex;
  align-items:center;
  justify-content:center;
  height:calc(60 * var(--u));
  font-size:calc(24.59 * var(--u));
  font-weight:200;
  line-height:1;
  transition:opacity .2s;
}
.lang__item:hover{opacity:.75}
.lang__item--active{width:calc(60 * var(--u));border-radius:50%;background:var(--pink)}

.burger{display:none}

/* =====================  ПОЛОСА ГОРЯЧЕЙ ЛИНИИ  =========================== */
.hotline{
  position:relative;
  z-index:2;
  height:calc(69 * var(--u));
  background:var(--grey-strip);
}
.hotline__text{
  position:absolute;
  left:0;
  right:0;
  top:0;
  margin:0;
  padding-left:calc(86 * var(--u));   /* центр строки в макете — 1116, не 1073 */
  font-size:calc(34.55 * var(--u));
  font-weight:500;
  line-height:calc(69 * var(--u));
  text-align:center;
  color:var(--purple-text);
}
.hotline__text strong{font-weight:500;text-transform:uppercase}

/* объявление «скоро старт» — под горячей линией, до 15.10.2026 */
.soon{
  position:relative;
  z-index:2;
  padding:calc(18 * var(--u)) calc(60 * var(--u));
  background:linear-gradient(90deg,#ffc21a,#ffe36a 50%,#ffc21a);
  box-shadow:0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(20,2,30,.25);
  text-align:center;
}
.soon__text{
  margin:0;
  font-size:calc(30 * var(--u));
  font-weight:500;
  line-height:1.35;
  color:#4a1266;
}
.soon__text b{font-weight:700}
.soon__text a{color:#7b2f9b; font-weight:700; text-decoration:underline; text-underline-offset:.15em}
.soon[hidden]{display:none}
.hotline__text a{color:inherit}

/* ============================  HERO  ===================================== */
/* низ первого экрана плавно уходит в цвет второго блока — без линии на стыке */
.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:calc(190 * var(--u));
  background:linear-gradient(180deg,rgba(62,22,75,0) 0%,rgba(62,22,75,.75) 55%,#3e164b 100%);
  pointer-events:none;
}
.hero{
  position:relative;
  height:calc(1000 * var(--u));
  background:url("../img/hero-bg.jpg") no-repeat center top;
  background-size:100% 100%;
}
.hero__inner{position:relative;z-index:1;height:100%}

/* Логотип-дуга по центру — из макета «3», координаты 766..1362 / 287..432 */
.hero__logo{
  position:absolute;
  left:calc(766 * var(--u));
  top:calc(60 * var(--u));
  width:calc(596 * var(--u));
  margin:0;
  z-index:1;
}
.hero__logo img{width:100%}

/* Ключи — отдельным слоем поверх логотипа, по центру: 878..1207 / 340..685 */
.hero__keys{
  position:absolute;
  left:calc(878 * var(--u));
  top:calc(113 * var(--u));
  width:calc(329 * var(--u));
  z-index:2;
}

/* Список призов.
   Поднят к уровню крыши дома. Ширина 734 (146..880) — правее висят ключи,
   поэтому кегль подобран так, чтобы «Выиграй квартиру мечты» вставало
   в одну строку. Переносы остальных строк раскладывает браузер. */
.hero__list{
  position:absolute;
  left:calc(90 * var(--u));      /* левее — поля слева и справа ровнее */
  top:calc(240 * var(--u));
  width:calc(734 * var(--u));
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;   /* шрифт заголовков KV */
  font-size:calc(63 * var(--u));   /* подобран: 1-я строка 610 из 734, низ 696 — выше кнопки */
  font-weight:400;                 /* у Dimbo одно начертание — без искусственного утолщения */
  line-height:calc(75.9 * var(--u));
  text-transform:uppercase;
  text-wrap:balance;
  text-shadow:0 calc(3 * var(--u)) calc(22 * var(--u)) rgba(40,8,56,.45);
}
.hero__list-item + .hero__list-item{margin-top:calc(38.6 * var(--u))}
.hero__list-item b{font-weight:400}

/* Жёлтый акцент: «квартиру», «4 новых автомобиля» — как на баннерах KV.
   Тень — через filter, text-shadow поверх градиентного текста его бы замутил. */
.accent{
  background:linear-gradient(180deg,#fff27a 0%,#ffd21f 45%,#ffa10a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(40,8,56,.5));
}

/* Кнопка — под текстом слева */
.btn-register{
  position:absolute;
  left:calc(90 * var(--u));
  top:calc(740 * var(--u));
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(660 * var(--u));
  height:calc(90 * var(--u));
  border-radius:calc(23 * var(--u));
  background:linear-gradient(180deg,#f10303 0%,#f90404 50%,#f10303 100%);
  padding-bottom:calc(6.2 * var(--u));
  font-size:calc(40.28 * var(--u));
  font-weight:600;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
  color:#fff;
  transition:filter .2s,transform .2s;
}
.btn-register:hover{filter:brightness(1.08)}
.btn-register:active{transform:translateY(calc(2 * var(--u)))}

/* Кыргызский примерно вдвое длиннее — кегль подобран так, чтобы
   «Кыялыңдагы батирди утуп ал!» тоже вставало в одну строку */
html[lang="ky"] .hero__list{
  font-size:calc(57.5 * var(--u));
  line-height:calc(69 * var(--u));
}
html[lang="ky"] .hero__list-item + .hero__list-item{margin-top:calc(34.5 * var(--u))}

/* ---------- Фары ----------
   lights-1..4.png собраны из слоя машин (tools/lights.py) — по слою на
   машину. Все четыре одного размера и лежат в одной точке. Горят через
   одну, как в прошлом промо: 1-я и 3-я, потом 2-я и 4-я, по 700 мс. */
.hero__art{
  position:absolute;
  inset:0;
  overflow:hidden;        /* ореол фар у правого края не должен давать прокрутку вбок */
  pointer-events:none;
}
.hero__lights{
  position:absolute;
  left:calc(1139.0 * var(--u));   /* машины: 1192 / 559, поле ореола 60px (compose.py) */
  top:calc(506.0 * var(--u));
  width:calc(1044.1 * var(--u));
  mix-blend-mode:screen;
  opacity:.12;
  animation:1.4s linear infinite;
}
.hero__lights--1,.hero__lights--3{animation-name:lights-odd}
.hero__lights--2,.hero__lights--4{animation-name:lights-even}
/* полцикла — 700 мс, смена за ~55 мс, чтобы не резало глаз */
@keyframes lights-odd {0%,46%{opacity:1}   50%,96%{opacity:.12} 100%{opacity:1}}
@keyframes lights-even{0%,46%{opacity:.12} 50%,96%{opacity:1}   100%{opacity:.12}}

/* ---------- Банты на крышах (img/bow.png, tools/bow_cutout.py) ----------
   Масштаб у каждого свой — машины в макете разного размера.
   Бант первой машины заходит на поднятую руку отца и голову мамы,
   поэтому поверх кладётся кусок семьи, вырезанный ровно по этому месту. */
.hero__bow{position:absolute}
.hero__bow--1{left:calc(1287.8 * var(--u)); top:calc(514.6 * var(--u)); width:calc(139.2 * var(--u))}
.hero__bow--2{left:calc(1457.5 * var(--u)); top:calc(509.6 * var(--u)); width:calc(159.1 * var(--u))}
.hero__bow--3{left:calc(1643.8 * var(--u)); top:calc(504.5 * var(--u)); width:calc(179.9 * var(--u))}
.hero__bow--4{left:calc(1862.2 * var(--u)); top:calc(498.7 * var(--u)); width:calc(203.3 * var(--u))}
.hero__family{
  position:absolute;
  left:calc(840 * var(--u));     /* tools/compose.py: семья */
  top:calc(494 * var(--u));
  width:calc(379 * var(--u));
  clip-path:inset(0 100% 100% 0);   /* только зона бантов, задевающих семью */
}

/* ---------- Кнопка: пульс, лёгкое дыхание и блик ---------- */
.btn-register{
  overflow:hidden;
  isolation:isolate;
  animation:btn-pulse 2.2s ease-out infinite, btn-breathe 2.2s ease-in-out infinite;
}
.btn-register::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-60%;
  width:40%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:skewX(-20deg);
  animation:btn-shine 3.6s ease-in-out infinite;
  z-index:-1;
}
@keyframes btn-pulse{
  0%{box-shadow:0 0 0 0 rgba(248,4,4,.65)}
  70%{box-shadow:0 0 0 calc(26 * var(--u)) rgba(248,4,4,0)}
  100%{box-shadow:0 0 0 0 rgba(248,4,4,0)}
}
@keyframes btn-breathe{
  0%,100%{scale:1}
  50%{scale:1.04}
}
@keyframes btn-shine{
  0%,55%{left:-60%}
  85%,100%{left:130%}
}
.btn-register:hover{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .hero__lights{animation:none;opacity:.85}
  .btn-register,.btn-register::after{animation:none}
}

/* Фокус на главных призах: квартира и автомобили крупнее, 5000 призов мельче.
   Кегли подобраны перебором: первая строка в одну, низ списка выше кнопки. */
.hero__list-item:nth-child(-n+2){font-size:calc(74 * var(--u)); line-height:calc(88.8 * var(--u))}
.hero__list-item:nth-child(3){font-size:calc(49 * var(--u)); line-height:calc(58.8 * var(--u))}
.hero__list-item:nth-child(2){margin-top:calc(33.3 * var(--u))}
.hero__list-item:nth-child(3){margin-top:calc(40.7 * var(--u))}
html[lang="ky"] .hero__list-item:nth-child(-n+2){font-size:calc(62.5 * var(--u)); line-height:calc(75 * var(--u))}
html[lang="ky"] .hero__list-item:nth-child(3){font-size:calc(41.5 * var(--u)); line-height:calc(49.8 * var(--u))}
html[lang="ky"] .hero__list-item:nth-child(2){margin-top:calc(28.1 * var(--u))}
html[lang="ky"] .hero__list-item:nth-child(3){margin-top:calc(34.4 * var(--u))}

/* Промо-строка внизу */
.hero__promo{
  position:absolute;
  left:0;
  top:calc(890 * var(--u));
  width:calc(2081 * var(--u));   /* центр строки — 1040 макета */
  margin:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:calc(22 * var(--u));
  font-size:calc(42.02 * var(--u));
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero__promo b{font-weight:700;color:var(--yellow)}
.hero__promo-label{font-weight:300;color:#fff}

/* Плавающие иконки справа */
/* иконки закреплены в правом нижнем углу окна и едут вместе со страницей */
.side-actions{
  position:fixed;
  right:calc(40 * var(--u));
  bottom:calc(40 * var(--u));
  z-index:40;
  width:calc(71 * var(--u));
}
/* стрелка «наверх» появляется, когда страницу прокрутили вниз */
.side-actions__top{opacity:0; visibility:hidden}
body.is-scrolled .side-actions__top{opacity:1; visibility:visible}
.side-actions__top{
  display:block;
  width:calc(49 * var(--u));
  height:calc(56 * var(--u));
  margin:0 0 calc(34 * var(--u)) calc(8 * var(--u));
  background:url("../img/arrow-up.png") no-repeat center/contain;
  transition:transform .2s, opacity .3s, visibility .3s;
}
.side-actions__top:hover{transform:translateY(calc(-4 * var(--u)))}
.side-actions__link{
  display:block;
  width:calc(71 * var(--u));
  height:calc(71 * var(--u));
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  transition:transform .2s;
}
.side-actions__link:hover{transform:scale(1.08)}
.side-actions__link--tg{background-image:url("../img/social-tg.png")}
.side-actions__link--ig{background-image:url("../img/social-ig.png");margin-top:calc(14 * var(--u))}

/* ==========================  МОДАЛКА РЕГИСТРАЦИИ  ======================== */
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(30,6,42,.75);
  backdrop-filter:blur(4px);
}
.modal.is-open{display:flex}
.modal__dialog{
  position:relative;
  width:100%;
  max-width:620px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  padding:48px 56px 52px;
  border-radius:28px;
  background:linear-gradient(160deg,#5b1a76 0%,#3d0f52 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.modal__close{
  position:absolute;
  right:22px;
  top:22px;
  width:36px;
  height:36px;
  border-radius:50%;
  font-size:26px;
  line-height:1;
  color:#fff;
  opacity:.6;
  transition:opacity .2s;
}
.modal__close:hover{opacity:1}
.modal__title{
  margin:0 0 10px;
  font-size:30px;
  font-weight:700;
  line-height:1.15;
  text-transform:uppercase;
}
.modal__note{
  margin:0 0 28px;
  font-size:15px;
  font-weight:200;
  line-height:1.45;
  opacity:.75;
}

.field{margin-bottom:24px}
.field__label{
  display:block;
  margin-bottom:10px;
  font-size:15px;
  font-weight:300;
  letter-spacing:.02em;
  text-transform:uppercase;
  opacity:.85;
}
.field__input{
  width:100%;
  height:60px;
  padding:0 20px;
  border:2px solid rgba(255,255,255,.25);
  border-radius:14px;
  background:rgba(255,255,255,.08);
  font-family:inherit;
  font-size:20px;
  font-weight:500;
  letter-spacing:.06em;
  color:#fff;
  text-transform:uppercase;
  transition:border-color .2s,background .2s;
}
.field__input::placeholder{color:rgba(255,255,255,.4);letter-spacing:.04em}
.field__input:focus{outline:none;border-color:var(--pink);background:rgba(255,255,255,.14)}

/* -------- телефон: фиксированный префикс +996 и ровно 9 цифр -------- */
.phone{
  display:flex;
  align-items:center;
  gap:10px;
}
.phone__prefix{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  height:60px;
  padding:0 16px;
  border:2px solid rgba(255,255,255,.25);
  border-radius:14px;
  background:rgba(255,255,255,.14);
  font-size:20px;
  font-weight:600;
  line-height:1;
  color:#fff;
  user-select:none;
}
.phone__cells{
  display:flex;
  flex:1 1 auto;
  gap:6px;
}
.phone__cell{
  width:100%;
  min-width:0;
  height:60px;
  padding:0;
  border:2px solid rgba(255,255,255,.25);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  font-family:inherit;
  font-size:22px;
  font-weight:600;
  text-align:center;
  color:#fff;
  transition:border-color .15s,background .15s;
  -moz-appearance:textfield;
}
.phone__cell::-webkit-outer-spin-button,
.phone__cell::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.phone__cell::placeholder{color:rgba(255,255,255,.3);font-weight:400}
.phone__cell:focus::placeholder{color:transparent}
.phone__cell:focus{outline:none;border-color:var(--pink);background:rgba(255,255,255,.18)}
.phone__cell:not(:placeholder-shown){border-color:rgba(255,255,255,.5)}

.field.is-invalid .phone__cell,
.field.is-invalid .field__input{border-color:#ff5a5a}
.field__error{
  display:none;
  margin-top:10px;
  font-size:14px;
  font-weight:300;
  color:#ff8a8a;
}
.field.is-invalid .field__error{display:block}
.field__hint{
  margin-top:8px;
  font-size:13px;
  font-weight:300;
  line-height:1.4;
  opacity:.7;
}

.modal__submit{
  width:100%;
  height:66px;
  margin-top:8px;
  border-radius:16px;
  background:linear-gradient(180deg,#f10303 0%,#f90404 50%,#f10303 100%);
  font-size:20px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#fff;
  transition:filter .2s,transform .15s;
}
.modal__submit:hover{filter:brightness(1.08)}
.modal__submit:active{transform:translateY(2px)}

body.is-modal-open{overflow:hidden}

@media (max-width:600px){
  .modal__dialog{padding:40px 16px 30px;border-radius:22px}
  .modal__title{font-size:23px}
  .phone{gap:6px}
  .phone__prefix{height:50px;padding:0 9px;font-size:16px;border-radius:11px}
  .phone__cells{gap:3px}
  .phone__cell{height:50px;font-size:16px;border-width:1.5px;border-radius:8px}
  .field__input{height:54px;font-size:17px}
  .modal__submit{height:58px;font-size:17px}
}

/* ==========================================================================
   МОБИЛЬНАЯ ВЕРСИЯ (до 767px)
   Макета мобильной версии в исходниках нет — раскладка собрана из тех же
   элементов и ассетов десктопа, требует согласования с дизайнером.
   ========================================================================== */
@media (max-width:767px){

  .page{--u:min(calc(100cqw / 375), 1.3px)}   /* базовая ширина мобильного макета — 375 */

  /* ---- шапка ---- */
  .header{height:calc(60 * var(--u))}
  .header__logo{
    left:calc(16 * var(--u));
    top:calc(5 * var(--u));
    width:calc(68 * var(--u));
  }
  .nav{
    position:fixed;
    left:0;
    top:calc(60 * var(--u));
    width:100%;
    padding:calc(18 * var(--u)) calc(20 * var(--u)) calc(26 * var(--u));
    background:var(--purple-dark);
    transform:translateY(-130%);
    transition:transform .3s ease;
    z-index:5;
  }
  body.is-menu-open .nav{transform:translateY(0)}
  .nav__list{display:block}
  .nav__item{margin:0!important}
  .nav__item + .nav__item{border-top:1px solid rgba(255,255,255,.12)}
  .nav__item a{
    padding:calc(13 * var(--u)) 0;
    font-size:calc(15 * var(--u));
    font-weight:300;
  }

  .lang{
    right:calc(62 * var(--u));
    top:calc(13 * var(--u));
    gap:calc(6 * var(--u));
  }
  .lang__item{height:calc(34 * var(--u));font-size:calc(14 * var(--u))}
  .lang__item--active{width:calc(34 * var(--u))}

  .burger{
    display:block;
    position:absolute;
    right:calc(16 * var(--u));
    top:calc(16 * var(--u));
    width:calc(28 * var(--u));
    height:calc(28 * var(--u));
    padding:calc(5 * var(--u)) 0;
  }
  .burger span{
    display:block;
    height:calc(2.5 * var(--u));
    border-radius:2px;
    background:#fff;
    transition:transform .25s,opacity .2s;
  }
  .burger span + span{margin-top:calc(6 * var(--u))}
  body.is-menu-open .burger span:nth-child(1){transform:translateY(calc(8.5 * var(--u))) rotate(45deg)}
  body.is-menu-open .burger span:nth-child(2){opacity:0}
  body.is-menu-open .burger span:nth-child(3){transform:translateY(calc(-8.5 * var(--u))) rotate(-45deg)}

  /* ---- горячая линия ---- */
  .hotline{height:calc(34 * var(--u))}
  .soon{padding:calc(10 * var(--u)) calc(14 * var(--u))}
  .soon__text{font-size:calc(13 * var(--u))}
  .hotline__text{
    padding:0 calc(10 * var(--u));
    font-size:calc(12.5 * var(--u));
    line-height:calc(34 * var(--u));
  }

  /* ---- hero ---- */
  .hero{
    height:auto;
    padding:calc(30 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
    background:url("../img/hero-bg-mobile.jpg") no-repeat center top;
    background-size:cover;
  }
  .hero__inner{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
  }

  .hero__logo{
    position:static;
    width:calc(230 * var(--u));
    margin:0 auto calc(6 * var(--u));
  }
  .hero__keys{
    position:static;
    display:block;
    width:calc(84 * var(--u));                       /* как на десктопе: ключи висят у правого края лого */
    margin:calc(-36 * var(--u)) auto calc(14 * var(--u)) calc(206 * var(--u));
  }

  .hero__list{
    position:static;
    width:100%;
    margin:calc(4 * var(--u)) 0 calc(26 * var(--u));
    padding:0 calc(6 * var(--u));
    font-size:calc(32.5 * var(--u));   /* Dimbo уже Geologica */
    line-height:1.26;
    text-align:center;
    text-wrap:pretty;   /* balance рвал первую строку, хотя она помещалась */
  }
  .hero__list-item + .hero__list-item{margin-top:calc(15 * var(--u))}
  html[lang="ky"] .hero__list{
    top:auto;
    font-size:calc(27 * var(--u));
    line-height:1.26;
  }
  html[lang="ky"] .hero__list-item + .hero__list-item{margin-top:calc(13 * var(--u))}
  .hero__list-item + .hero__list-item{margin-top:calc(14 * var(--u))}

  .btn-register{
    position:static;
    width:100%;
    height:calc(54 * var(--u));
    margin-bottom:calc(20 * var(--u));
    padding-bottom:0;
    border-radius:calc(14 * var(--u));
    font-size:calc(16 * var(--u));
  }

  /* визуал макета — под текстом; фары лежат поверх в процентах от картинки */
  .hero__art{
    position:relative;
    inset:auto;
    order:5;
    width:calc(100% + 40 * var(--u));
    margin:0 calc(-20 * var(--u));
    aspect-ratio:1718/1009;
    background:url("../img/hero-art.png") no-repeat center bottom;
    background-size:contain;
  }
  .hero__lights{
    left:22.584%;   /* фары: машины в картинке минус поле ореола (compose.py) */
    top:55.104%;
    width:68.743%;
  }
  /* банты и кусок семьи — в процентах от картинки 1426x1043 */
  .hero__bow--1{left:32.382%; top:56.069%; width:9.163%}
  .hero__bow--2{left:43.555%; top:55.515%; width:10.476%}
  .hero__bow--3{left:55.821%; top:54.938%; width:11.846%}
  .hero__bow--4{left:70.203%; top:54.288%; width:13.388%}
  .hero__family{left:2.923%; top:53.731%; width:24.969%}
  .btn-register{position:relative;left:auto;top:auto}   /* relative — для блика; десктопные left/top сбрасываем */

  .hero__promo{
    position:static;
    order:6;
    width:100%;
    padding:calc(16 * var(--u)) calc(56 * var(--u)) calc(30 * var(--u)) 0;
    flex-wrap:wrap;
    gap:calc(6 * var(--u));
    font-size:calc(14 * var(--u));
    line-height:1.3;
    white-space:normal;
  }
  .hero__promo b{width:100%;text-align:center}
  .hero__promo-label{width:100%;text-align:center}

  /* ---- плавающие иконки ---- */
  .side-actions{
    position:fixed;
    left:auto;
    right:calc(10 * var(--u));
    top:auto;
    bottom:calc(14 * var(--u));
    width:calc(40 * var(--u));
    z-index:4;
  }
  .side-actions__top{
    width:calc(26 * var(--u));
    height:calc(30 * var(--u));
    margin:0 auto calc(12 * var(--u));
  }
  .side-actions__link{width:calc(40 * var(--u));height:calc(40 * var(--u))}
  .side-actions__link--ig{margin-top:calc(8 * var(--u))}
}

/* Мобилка: главные пункты уже максимального кегля для одной строки,
   поэтому контраст — за счёт пункта про 5000 призов */
@media (max-width:767px){
  .hero__list-item:nth-child(-n+2){font-size:calc(32.5 * var(--u)); line-height:1.24}
  .hero__list-item:nth-child(3){font-size:calc(21.5 * var(--u)); line-height:1.26}
  .hero__list-item + .hero__list-item{margin-top:calc(15 * var(--u))}
  html[lang="ky"] .hero__list-item:nth-child(-n+2){font-size:calc(27 * var(--u)); line-height:1.26}
  html[lang="ky"] .hero__list-item:nth-child(3){font-size:calc(18 * var(--u)); line-height:1.28}
  html[lang="ky"] .hero__list-item + .hero__list-item{margin-top:calc(13 * var(--u))}
}

/* ==========================  УСЛОВИЯ РОЗЫГРЫША  ========================== */
.rules{
  position:relative;
  padding:calc(25 * var(--u)) 0 calc(150 * var(--u));   /* верхний отступ вдвое меньше — ближе к первому экрану */
  background:
    radial-gradient(ellipse 45% 26% at 18% 60%, rgba(255,140,225,0.2), transparent 70%),
    radial-gradient(ellipse 40% 24% at 84% 45%, rgba(255,140,225,0.18), transparent 70%),
    linear-gradient(180deg,#3e164b 0%,#5f2380 40%,#7b2f9b 100%);
  overflow:hidden;
}
.rules__inner{width:calc(1860 * var(--u)); margin:0 auto}

/* лента-заголовок, как на баннерах KV */
.ribbon{
  width:calc(1560 * var(--u));
  margin:0 auto;
  filter:drop-shadow(0 calc(16 * var(--u)) calc(30 * var(--u)) rgba(25,4,36,.5));
}
.ribbon__body{
  padding:calc(36 * var(--u)) calc(140 * var(--u)) calc(42 * var(--u));
  background:linear-gradient(90deg,#8a2ab0 0%,#c94dcb 50%,#8a2ab0 100%);
  clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);
  text-align:center;
}
.ribbon__title{
  margin:0;
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-weight:400;
  font-size:calc(88 * var(--u));
  line-height:1;
  text-transform:uppercase;
  color:#fff;
}
.ribbon__text{
  margin:calc(14 * var(--u)) 0 0;
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(48 * var(--u));
  line-height:1.15;
  text-transform:uppercase;
  color:#fff;
}

/* три шага */
.steps{
  list-style:none;
  margin:calc(140 * var(--u)) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));   /* содержимое не распирает колонку */
  gap:calc(70 * var(--u));
}
.step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:calc(104 * var(--u)) calc(50 * var(--u)) calc(64 * var(--u));
  border:calc(2 * var(--u)) solid rgba(255,255,255,.52);
  border-radius:calc(46 * var(--u));
  background:
    radial-gradient(ellipse 60% 46% at 50% 40%, rgba(255,240,255,.58), rgba(255,205,245,.2) 45%, transparent 72%),
    linear-gradient(165deg,rgba(255,255,255,.40),rgba(255,255,255,.22));
  box-shadow:0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(20,2,30,.35), inset 0 calc(2 * var(--u)) 0 rgba(255,255,255,.18);
  text-align:center;
}
.step__num{
  position:absolute;
  left:50%;
  top:calc(-66 * var(--u));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(132 * var(--u));
  height:calc(132 * var(--u));
  border-radius:50%;
  background:linear-gradient(180deg,#fff27a 0%,#ffd21f 45%,#ffa10a 100%);
  box-shadow:0 0 0 calc(10 * var(--u)) rgba(255,210,31,.22), 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(20,2,30,.45);
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(86 * var(--u));
  line-height:1;
  color:#5a1a74;
}
.step__pic{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:calc(390 * var(--u));
}
.step__pic > img{
  max-width:100%;
  max-height:100%;
  filter:drop-shadow(0 calc(18 * var(--u)) calc(26 * var(--u)) rgba(20,2,30,.5));
}
.step__text{
  margin:calc(46 * var(--u)) 0 0;
  font-size:calc(36 * var(--u));
  font-weight:500;
  line-height:1.3;
  color:#fff;
}
.step__text b{font-weight:700;color:#ffd21f}

/* шаг 2: скретч-карта — защитный слой «стирается» */
.scratch{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:calc(440 * var(--u));
  padding:calc(32 * var(--u)) calc(34 * var(--u)) calc(36 * var(--u));
  border-radius:calc(28 * var(--u));
  background:linear-gradient(140deg,#ffffff 0%,#f7eefc 55%,#ead6f6 100%);
  box-shadow:0 calc(26 * var(--u)) calc(50 * var(--u)) rgba(20,2,30,.5);
  transform:rotate(-5deg);
  color:#6a1f87;
}
.scratch__logo{width:calc(220 * var(--u))}
.scratch__label{
  margin-top:calc(18 * var(--u));
  font-size:calc(22 * var(--u));
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.scratch__code{
  position:relative;
  margin-top:calc(12 * var(--u));
  padding:calc(10 * var(--u)) calc(22 * var(--u));
  border:calc(3 * var(--u)) dashed #d6b3e8;
  border-radius:calc(14 * var(--u));
  background:#fff;
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(56 * var(--u));
  line-height:1;
  letter-spacing:.06em;
  color:#7c2595;
  white-space:nowrap;
}
.scratch__foil{
  position:absolute;
  inset:0;
  border-radius:calc(10 * var(--u));
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.4) 0 calc(5 * var(--u)),transparent calc(5 * var(--u)) calc(13 * var(--u))),
    linear-gradient(135deg,#b9b9c2 0%,#efeff3 35%,#a4a4ae 62%,#e2e2e8 100%);
  animation:foil-scratch 5s ease-in-out infinite;
}
@keyframes foil-scratch{
  0%,15%{clip-path:inset(0 0 0 0)}
  55%,85%{clip-path:inset(0 0 0 72%)}
  100%{clip-path:inset(0 0 0 0)}
}

/* шаг 3: телефон с нашей формой */
.mock-phone{
  width:calc(220 * var(--u));
  height:calc(390 * var(--u));
  padding:calc(10 * var(--u));
  border-radius:calc(42 * var(--u));
  background:#1b0a24;
  box-shadow:0 calc(26 * var(--u)) calc(50 * var(--u)) rgba(20,2,30,.5), inset 0 0 0 calc(2 * var(--u)) rgba(255,255,255,.12);
  transform:rotate(5deg);
}
.mock-phone__screen{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(18 * var(--u));
  height:100%;
  padding:calc(18 * var(--u));
  border-radius:calc(32 * var(--u));
  background:linear-gradient(170deg,#b24bcf 0%,#5a1f73 100%);
}
.mock-phone__logo{width:calc(150 * var(--u))}
.mock-phone__row{display:flex;gap:calc(3 * var(--u))}
.mock-phone__row i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(12 * var(--u));
  height:calc(22 * var(--u));
  border-radius:calc(4 * var(--u));
  background:rgba(255,255,255,.9);
  font-style:normal;
  font-size:calc(11 * var(--u));
  font-weight:700;
  color:#7c2595;
}
.mock-phone__row i:first-child{width:calc(38 * var(--u))}
.mock-phone__code{
  width:100%;
  padding:calc(7 * var(--u)) 0;
  border-radius:calc(8 * var(--u));
  background:#fff;
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(22 * var(--u));
  letter-spacing:.06em;
  text-align:center;
  color:#7c2595;
}
.mock-phone__btn{
  width:100%;
  padding:calc(10 * var(--u)) 0;
  border-radius:calc(10 * var(--u));
  background:linear-gradient(180deg,#f10303 0%,#f90404 50%,#f10303 100%);
  font-size:calc(14 * var(--u));
  font-weight:600;
  letter-spacing:.03em;
  text-align:center;
  text-transform:uppercase;
  color:#fff;
  animation:btn-breathe 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce){
  .scratch__foil{animation:none;clip-path:inset(0 0 0 72%)}
  .mock-phone__btn{animation:none}
}

/* мобилка: карточки в столбик, размеры от ширины 375 */
@media (max-width:767px){
  .rules{padding:calc(24 * var(--u)) calc(20 * var(--u)) calc(64 * var(--u))}
  .rules__inner{width:auto}
  .ribbon{width:auto;filter:drop-shadow(0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(25,4,36,.5))}
  .ribbon__body{padding:calc(16 * var(--u)) calc(34 * var(--u)) calc(18 * var(--u))}
  .ribbon__title{font-size:calc(32 * var(--u))}
  .ribbon__text{margin-top:calc(6 * var(--u));font-size:calc(17 * var(--u))}
  .steps{grid-template-columns:minmax(0,1fr);gap:calc(60 * var(--u));margin-top:calc(66 * var(--u))}
  .step{padding:calc(54 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u));border-width:1px;border-radius:calc(24 * var(--u))}
  .step__num{
    top:calc(-32 * var(--u));
    width:calc(64 * var(--u));
    height:calc(64 * var(--u));
    font-size:calc(42 * var(--u));
    box-shadow:0 0 0 calc(6 * var(--u)) rgba(255,210,31,.22), 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(20,2,30,.45);
  }
  .step__pic{height:calc(180 * var(--u))}
  .step__text{margin-top:calc(22 * var(--u));font-size:calc(16 * var(--u))}
  .scratch{width:calc(250 * var(--u));padding:calc(18 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));border-radius:calc(16 * var(--u))}
  .scratch__logo{width:calc(128 * var(--u))}
  .scratch__label{margin-top:calc(10 * var(--u));font-size:calc(11 * var(--u))}
  .scratch__code{margin-top:calc(6 * var(--u));padding:calc(6 * var(--u)) calc(14 * var(--u));border-width:calc(2 * var(--u));border-radius:calc(8 * var(--u));font-size:calc(32 * var(--u))}
  .scratch__foil{border-radius:calc(6 * var(--u))}
  .mock-phone{width:calc(104 * var(--u));height:calc(180 * var(--u));padding:calc(5 * var(--u));border-radius:calc(20 * var(--u))}
  .mock-phone__screen{gap:calc(8 * var(--u));padding:calc(9 * var(--u));border-radius:calc(15 * var(--u))}
  .mock-phone__logo{width:calc(72 * var(--u))}
  .mock-phone__row{gap:calc(1.5 * var(--u))}
  .mock-phone__row i{width:calc(5.5 * var(--u));height:calc(10 * var(--u));border-radius:calc(2 * var(--u));font-size:calc(5 * var(--u))}
  .mock-phone__row i:first-child{width:calc(18 * var(--u))}
  .mock-phone__code{padding:calc(3 * var(--u)) 0;border-radius:calc(4 * var(--u));font-size:calc(11 * var(--u))}
  .mock-phone__btn{padding:calc(5 * var(--u)) 0;border-radius:calc(5 * var(--u));font-size:calc(6.5 * var(--u))}
}

/* ==========================  ОБЩЕЕ ДЛЯ БЛОКОВ  ============================ */
/* начинаются и заканчиваются тем же #3e164b — стыки между блоками без линий */
.block{
  position:relative;
  padding:calc(120 * var(--u)) 0 calc(140 * var(--u));
  background:
    radial-gradient(ellipse 50% 30% at 50% 50%, rgba(255,140,225,0.16), transparent 70%),
    linear-gradient(180deg,#8a35a6 0%,#9a3eb2 50%,#8a35a6 100%);
  overflow:hidden;
}
.block__inner{width:calc(1860 * var(--u)); margin:0 auto}
.block__cta{display:flex; justify-content:center; margin-top:calc(90 * var(--u))}

/* красная кнопка в потоке страницы — тот же вид и анимация, что на первом экране */
.btn-cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(660 * var(--u));
  height:calc(90 * var(--u));
  border-radius:calc(23 * var(--u));
  background:linear-gradient(180deg,#f10303 0%,#f90404 50%,#f10303 100%);
  font-size:calc(40.28 * var(--u));
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
  color:#fff;
  animation:btn-pulse 2.2s ease-out infinite, btn-breathe 2.2s ease-in-out infinite;
}
.btn-cta::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-60%;
  width:40%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:skewX(-20deg);
  animation:btn-shine 3.6s ease-in-out infinite;
  z-index:-1;
}
.btn-cta:hover{animation-play-state:paused; filter:brightness(1.08)}

/* ==========================  ПРИЗЫ  ====================================== */
.prizes__subtitle{
  margin:calc(110 * var(--u)) 0 0;
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(64 * var(--u));
  line-height:1.1;
  text-align:center;
  text-transform:uppercase;
  color:#fff;
}
.prizes__subtitle--main{margin-top:calc(130 * var(--u)); font-size:calc(80 * var(--u))}
.prizes__note{
  margin:calc(14 * var(--u)) 0 0;
  font-size:calc(30 * var(--u));
  font-weight:500;
  text-align:center;
  color:rgba(255,255,255,.85);
}

/* сетка призов: 4 колонки, широкие карточки на 2 колонки — ряды заполняются ровно */
.prize-grid{
  list-style:none;
  margin:calc(60 * var(--u)) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(40 * var(--u));
}
.prize{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:calc(36 * var(--u)) calc(26 * var(--u)) calc(34 * var(--u));
  border:calc(2 * var(--u)) solid rgba(255,255,255,.5);
  border-radius:calc(36 * var(--u));
  background:
    radial-gradient(ellipse 60% 46% at 50% 40%, rgba(255,240,255,.58), rgba(255,205,245,.2) 45%, transparent 72%),
    linear-gradient(165deg,rgba(255,255,255,.36),rgba(255,255,255,.20));
  box-shadow:0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(20,2,30,.3);
  text-align:center;
  transition:transform .25s ease;
}
.prize:hover{transform:translateY(calc(-8 * var(--u)))}
.prize__pic{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:calc(230 * var(--u));
}
.prize__pic img{
  max-width:100%;
  max-height:100%;
  filter:drop-shadow(0 calc(14 * var(--u)) calc(20 * var(--u)) rgba(20,2,30,.45));
}
.prize__count{
  margin:calc(20 * var(--u)) 0 0;
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(72 * var(--u));
  line-height:1;
  background:linear-gradient(180deg,#fff27a 0%,#ffd21f 45%,#ffa10a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(60,10,80,.55));
}
.prize__title{
  margin:calc(8 * var(--u)) 0 0;
  font-size:calc(28 * var(--u));
  font-weight:600;
  line-height:1.25;
  color:#fff;
  text-wrap:balance;
}
.prize__sub{
  margin:calc(6 * var(--u)) 0 0;
  font-size:calc(24 * var(--u));
  font-weight:500;
  color:rgba(255,255,255,.8);
}

/* широкая карточка: картинка слева, количество и подпись справа */
.prize--wide{
  grid-column:span 2;
  flex-direction:row;
  gap:calc(30 * var(--u));
  padding:calc(30 * var(--u)) calc(50 * var(--u));
  text-align:left;
}
.prize--wide .prize__pic{flex:0 0 50%; height:calc(300 * var(--u))}
.prize--wide .prize__body{flex:1 1 auto; min-width:0}
.prize--wide .prize__count{margin:0; font-size:calc(120 * var(--u))}
.prize--wide .prize__title{margin-top:calc(12 * var(--u)); font-size:calc(38 * var(--u))}
.prize--wide .prize__sub{font-size:calc(28 * var(--u))}

/* годовой запас — три пачки веером */
.prize__pic--stack img{height:88%; width:auto; margin:0 calc(-26 * var(--u))}
.prize__pic--stack img:nth-child(1){transform:rotate(-8deg); height:80%}
.prize__pic--stack img:nth-child(2){position:relative; z-index:1}
.prize__pic--stack img:nth-child(3){transform:rotate(8deg); height:80%}

/* подарочный сертификат — рисуется вёрсткой; размеры внутри от ширины карточки (cqw) */
.cert{
  container-type:inline-size;
  position:relative;
  overflow:hidden;
  width:82%;
  aspect-ratio:1.58;
  border-radius:calc(24 * var(--u));
  transform:rotate(-7deg);
  box-shadow:0 calc(16 * var(--u)) calc(30 * var(--u)) rgba(20,2,30,.45), inset 0 calc(2 * var(--u)) 0 rgba(255,255,255,.6);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0;
  text-align:left;
  font-family:"Geologica","Segoe UI",Arial,sans-serif;
}
.cert::before{                    /* уголок-ленточка */
  content:"";
  position:absolute;
  right:-12%;
  top:-20%;
  width:40%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,.28);
}
.cert::after{                     /* блик */
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-40%;
  width:30%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);
  animation:btn-shine 4.2s ease-in-out infinite;
}
.cert--gold{background:linear-gradient(135deg,#fff27a 0%,#ffd21f 45%,#ffa10a 100%); color:#5a1a74}
.cert--lilac{background:linear-gradient(135deg,#ffffff 0%,#f0dcff 50%,#d6b0f5 100%); color:#5a1a74}
.cert__label,.cert__sum,.cert__shop{position:relative; z-index:1; padding:0 9cqw}
.cert__label{font-size:6.2cqw; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.8}
.cert__sum{margin-top:1cqw; font-family:"Dimbo","Geologica",Arial,sans-serif; font-size:21cqw; line-height:1}
.cert__sum small{font-size:.5em}
.cert__shop{margin-top:2cqw; font-size:8.5cqw; font-weight:800; line-height:1.05}
/* «супермаркет» / «магазин» — чтобы было понятно, что за Бимар и Aldey Aldey */
.cert__kind{display:block; font-size:.62em; font-weight:600; font-style:normal; opacity:.75; letter-spacing:.02em}

/* iPhone: покачивается задней панелью, разворачивается экраном и пишет «hello» */
.iphone{
  height:100%;
  aspect-ratio:237 / 506;   /* пропорции корпуса на фото */
  perspective:calc(1400 * var(--u));
  filter:drop-shadow(0 calc(16 * var(--u)) calc(22 * var(--u)) rgba(20,2,30,.5));
}
.iphone__turn{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  animation:iphone-turn 9s cubic-bezier(.55,0,.25,1) infinite;
}
.iphone__face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.prize__pic .iphone__back{max-width:none; max-height:none; filter:none}
.iphone__front{transform:rotateY(180deg)}
.iphone__hello{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.6));
  animation:iphone-hello 9s ease-in-out infinite;
}
.iphone__glow{animation:iphone-glow 9s ease-out infinite}
@keyframes iphone-turn{
  0%   {transform:rotateY(-22deg) rotateZ(-4deg)}
  18%  {transform:rotateY(22deg) rotateZ(-4deg)}
  30%  {transform:rotateY(180deg) rotateZ(0deg)}
  82%  {transform:rotateY(180deg) rotateZ(0deg)}
  100% {transform:rotateY(338deg) rotateZ(-4deg)}
}
@keyframes iphone-hello{
  0%, 33% {stroke-dashoffset:1; opacity:0}
  34%     {stroke-dashoffset:.98; opacity:1}
  55%     {stroke-dashoffset:0; opacity:1}
  80%     {stroke-dashoffset:0; opacity:1}
  84%     {stroke-dashoffset:0; opacity:0}
  85%, 100% {stroke-dashoffset:1; opacity:0}
}
@keyframes iphone-glow{
  0%, 29% {opacity:0}
  31%     {opacity:.35}
  40%, 100% {opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .iphone__turn{animation:none; transform:rotateY(180deg)}
  .iphone__hello{animation:none; stroke-dashoffset:0}
  .iphone__glow{animation:none}
}

/* главные призы — друг под другом: картинка + описание с датами розыгрышей */
.prizes__main{
  display:flex;
  flex-direction:column;
  gap:calc(90 * var(--u));
  margin-top:calc(80 * var(--u));
}
.prize-main{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:center;
  gap:calc(70 * var(--u));
  padding:calc(70 * var(--u)) calc(80 * var(--u));
  border:calc(2 * var(--u)) solid rgba(255,210,31,.45);
  border-radius:calc(50 * var(--u));
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255,214,90,.24), transparent 70%),
    radial-gradient(ellipse 60% 46% at 50% 40%, rgba(255,240,255,.58), rgba(255,205,245,.2) 45%, transparent 72%),
    linear-gradient(165deg,rgba(255,255,255,.42),rgba(255,255,255,.24));
  box-shadow:0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(20,2,30,.4), 0 0 calc(60 * var(--u)) rgba(255,190,40,.16), inset 0 calc(2 * var(--u)) 0 rgba(255,255,255,.2);
  text-align:center;              /* бейдж, заголовок и плашки розыгрышей — по центру колонки */
}
.prize-main--flip .prize-main__pic{order:2}
.prize-main__badge{
  display:inline-block;
  padding:calc(12 * var(--u)) calc(34 * var(--u));
  border-radius:calc(40 * var(--u));
  background:linear-gradient(180deg,#fff27a 0%,#ffd21f 45%,#ffa10a 100%);
  box-shadow:0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(20,2,30,.4);
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(34 * var(--u));
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  color:#5a1a74;
}
.prize-main__pic{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:calc(440 * var(--u));
}
.prize-main__pic > img{
  max-width:100%;
  max-height:100%;
  filter:drop-shadow(0 calc(20 * var(--u)) calc(30 * var(--u)) rgba(20,2,30,.55));
}
.prize-main__title{
  margin:calc(30 * var(--u)) 0 0;
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-weight:400;
  font-size:calc(70 * var(--u));
  line-height:1.05;
  text-transform:uppercase;
  color:#fff;
}
.prize-main__text{
  margin:calc(20 * var(--u)) 0 0;
  font-size:calc(32 * var(--u));
  font-weight:500;
  line-height:1.4;
  color:#fff;
  text-wrap:pretty;
}
.draws{
  list-style:none;
  margin:calc(36 * var(--u)) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(18 * var(--u));
}
.draw{
  display:flex;
  flex-direction:column;
  gap:calc(6 * var(--u));
  padding:calc(18 * var(--u)) calc(28 * var(--u));
  border:calc(2 * var(--u)) solid rgba(255,210,31,.55);
  border-radius:calc(24 * var(--u));
  background:rgba(74,18,102,.5);
}
/* машины: колонка шире, высота — по самой картинке (фиксированная высота
   оставляла пустоту под капотами), сверху запас под банты.
   Только десктоп: на мобилке блок одноколоночный и правила свои. */
@media (min-width:768px){
  /* максимум акцента на авто: дальше расширять нельзя — описание уходит
     на четвёртую строку. column-gap отдельно, чтобы не трогать отступ
     до строки с датами (он идёт от row-gap). */
  .prize-main:not(.prize-main--flip){
    grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);
    column-gap:calc(40 * var(--u));
  }
  .prize-main:not(.prize-main--flip) .prize-main__pic{
    height:auto;
    align-self:stretch;           /* колонка тянется на высоту строки */
    align-items:flex-end;         /* машины прижаты к низу — в одну линию с текстом */
    padding-top:6.5%;             /* банты выступают над картинкой на 6.4% её ширины */
  }
}

/* даты розыгрышей вынесены из колонки описания в отдельную строку на всю
   ширину блока — чтобы под машинами не оставалось пустоты */
.prize-main > .draws{
  grid-column:1 / -1;
  grid-template-columns:repeat(4, minmax(0,1fr));
  margin-top:0;
}
.draw--final{grid-column:1 / -1; border-color:#ffd21f; box-shadow:0 0 calc(30 * var(--u)) rgba(255,210,31,.35)}
.draw__label{font-size:calc(24 * var(--u)); font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.85)}
.draw__date{font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif; font-size:calc(52 * var(--u)); line-height:1; color:#ffd21f}
.draw--final .draw__date{font-size:calc(72 * var(--u))}


/* ==========================  АНИМАЦИИ ПРИЗОВ  ============================
   .stage — сцена размером с картинку-область (контейнер: единицы cq* внутри неё
   считаются от сцены, поэтому эффекты масштабируются вместе с карточкой).
   .art — рамка ровно по фото (--ar — пропорции файла), эффекты — в % от фото. */
.stage{
  container-type:size;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}
.art{
  position:relative;
  width:min(100cqw, calc(100cqh * var(--ar)));
  aspect-ratio:var(--ar);
}
.prize__pic .art > img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  filter:drop-shadow(0 4cqh 6cqh rgba(20,2,30,.45));
}
.art > i, .art > span, .art > div{position:absolute; pointer-events:none}

/* блик, пробегающий по самому предмету (маска — это же фото) */
.shine{
  inset:0;
  -webkit-mask:var(--img) center / 100% 100% no-repeat;
  mask:var(--img) center / 100% 100% no-repeat;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.6) 50%, transparent 58%) no-repeat;
  background-size:300% 100%;
  animation:fx-shine 5.5s ease-in-out infinite;
  animation-delay:var(--shine-d, 0s);
}
@keyframes fx-shine{
  0%, 55% {background-position:120% 0}
  85%, 100% {background-position:-20% 0}
}

/* искорки */
.spark{
  left:var(--x);
  top:var(--y);
  width:9cqh;
  aspect-ratio:1;
  margin:-4.5cqh 0 0 -4.5cqh;
  background:radial-gradient(circle, #fff 0 18%, rgba(255,240,180,.9) 30%, transparent 62%);
  clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity:0;
  animation:fx-spark 3.2s ease-in-out infinite;
  animation-delay:var(--d);
}
@keyframes fx-spark{
  0%, 100% {opacity:0; scale:.2; rotate:0deg}
  15% {opacity:1; scale:1}
  35% {opacity:0; scale:.3; rotate:90deg}
}

/* клубы пара */
.puff{
  left:var(--x);
  top:var(--y);
  width:26cqh;
  aspect-ratio:1;
  margin:-13cqh 0 0 -13cqh;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 38%, transparent 68%);
  opacity:0;
  animation:fx-puff var(--t, 3s) ease-out infinite;
  animation-delay:var(--d);
}
@keyframes fx-puff{
  0%   {opacity:0; translate:0 0; scale:.3}
  20%  {opacity:.9}
  100% {opacity:0; translate:var(--tx) var(--ty); scale:1.7}
}

/* деньги: веер «дышит» и покачивается */
.fx-float{animation:fx-float 4s ease-in-out infinite}
.fx-float--late{animation-delay:-2s; --shine-d:2.2s}
@keyframes fx-float{
  0%, 100% {translate:0 3%; rotate:-2deg}
  50%      {translate:0 -4%; rotate:2deg}
}

/* холодильник: морозное свечение */
.fx-cold::before{
  content:"";
  position:absolute;
  inset:-8% -30%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(185,235,255,.9), transparent 62%);
  animation:fx-cold 3.6s ease-in-out infinite;
}
.fx-cold{isolation:isolate}
.puff--cold{width:18cqh; margin:-9cqh 0 0 -9cqh; background:radial-gradient(circle, rgba(215,245,255,.9) 0%, rgba(190,235,255,.35) 38%, transparent 68%)}
.fx-cold .spark{background:radial-gradient(circle, #fff 0 18%, rgba(190,235,255,.95) 30%, transparent 62%)}
@keyframes fx-cold{
  0%, 100% {opacity:.35; scale:.92}
  50%      {opacity:1; scale:1.05}
}

/* пылесос: ведёт по полу, за ним мокрый блеск */
.fx-mop{transform-origin:50% 100%; animation:fx-mop 3s ease-in-out infinite}
@keyframes fx-mop{
  0%, 100% {rotate:-7deg; translate:-18% 0}
  50%      {rotate:6deg; translate:18% 0}
}
.floor-shine{
  left:-120%;
  right:-120%;
  bottom:-3%;
  height:8%;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(200,240,255,.8), transparent 70%);
  animation:fx-floor 3s ease-in-out infinite;
}
@keyframes fx-floor{
  0%, 100% {translate:-10% 0; opacity:.4}
  50%      {translate:10% 0; opacity:.9}
}

/* подгузники: пачки подпрыгивают по очереди */
.fx-hop img{animation:fx-hop 2.4s cubic-bezier(.3,0,.3,1) infinite}
.fx-hop img:nth-child(2){animation-delay:.25s}
.fx-hop img:nth-child(3){animation-delay:.5s}
@keyframes fx-hop{
  0%, 40%, 100% {translate:0 0}
  18%           {translate:0 -10%}
  28%           {translate:0 1.5%}
}

/* коляска-велосипед: катится вперёд-назад, чуть подпрыгивая */
.fx-roll{animation:fx-roll 3.4s ease-in-out infinite}
@keyframes fx-roll{
  0%, 100% {translate:-10% 0; rotate:-1.5deg}
  25%      {translate:0 -2%}
  50%      {translate:10% 0; rotate:1.5deg}
  75%      {translate:0 -2%}
}

/* пароочиститель: индикатор мигает */
.led{
  left:var(--x);
  top:var(--y);
  width:12cqh;
  aspect-ratio:1;
  margin:-6cqh 0 0 -6cqh;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,190,80,1) 0 20%, rgba(255,120,20,.6) 40%, transparent 70%);
  mix-blend-mode:screen;
  animation:fx-led 1.3s ease-in-out infinite;
}
@keyframes fx-led{
  0%, 100% {opacity:.25}
  50%      {opacity:1}
}

/* чайник: кипит — голубая подсветка и пузырьки в колбе */
.kettle-glow{
  left:4%;
  right:28%;
  top:30%;
  bottom:26%;
  border-radius:40%;
  background:radial-gradient(ellipse at 50% 90%, rgba(80,200,255,.75), transparent 70%);
  mix-blend-mode:screen;
  animation:fx-cold 2.2s ease-in-out infinite;
}
.bubbles{
  left:9%;
  width:58%;
  top:32%;
  height:40%;
  overflow:hidden;
}
.bubbles i{
  position:absolute;
  left:var(--x);
  bottom:-10%;
  width:calc(5cqh * var(--s));
  aspect-ratio:1;
  border-radius:50%;
  border:.5cqh solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.15);
  animation:fx-bubble 1.9s ease-in infinite;
  animation-delay:var(--d);
}
@keyframes fx-bubble{
  0%   {translate:0 0; opacity:0}
  15%  {opacity:1}
  100% {translate:6cqh -44cqh; opacity:0}
}

/* сертификаты: покачиваются в 3D */
.prize__pic--3d{perspective:calc(900 * var(--u))}
.prize__pic--3d .cert{animation:fx-tilt 4.5s ease-in-out infinite}
.prize:last-child .cert{animation-delay:-2.2s}
@keyframes fx-tilt{
  0%, 100% {rotate:y -16deg; translate:0 2%}
  50%      {rotate:y 16deg; translate:0 -4%}
}

/* телевизор: заставка режима ожидания. Плоскость 480x270 натягивается на экран
   с перспективой (matrix3d считает js/main.js), до этого скрыта */
.tv-screen{inset:0; opacity:0; transition:opacity .4s}
.tv-screen.is-fit{opacity:1}
.tv-screen__plane{
  position:absolute;
  left:0;
  top:0;
  width:480px;
  height:270px;
  overflow:hidden;
  transform-origin:0 0;
  background:#07030d;
}
.tv-blob{
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  mix-blend-mode:screen;
  opacity:.75;
}
.tv-blob--1{left:-80px; top:-120px; background:radial-gradient(circle, #8a2cff, transparent 65%); animation:fx-blob1 11s ease-in-out infinite alternate}
.tv-blob--2{right:-90px; top:-40px; background:radial-gradient(circle, #ff3fa4, transparent 65%); animation:fx-blob2 13s ease-in-out infinite alternate}
.tv-blob--3{left:120px; bottom:-170px; background:radial-gradient(circle, #ffb000, transparent 65%); animation:fx-blob3 9s ease-in-out infinite alternate}
@keyframes fx-blob1{to{translate:200px 120px}}
@keyframes fx-blob2{to{translate:-220px 90px}}
@keyframes fx-blob3{to{translate:-90px -140px}}
/* логотип летает от края к краю, как заставка DVD */
.tv-dvd-x{position:absolute; left:0; top:0; animation:fx-dvd-x 6.1s linear infinite alternate}
.tv-dvd-y{display:block; animation:fx-dvd-y 3.9s linear infinite alternate}
.prize__pic .tv-dvd-y img{display:block; max-width:none; max-height:none; width:150px; height:auto; filter:drop-shadow(0 0 12px rgba(255,210,31,.55))}
@keyframes fx-dvd-x{from{translate:12px 0} to{translate:318px 0}}
@keyframes fx-dvd-y{from{translate:0 12px} to{translate:0 208px}}
.tv-glare{
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,.14) 0 30%, transparent 30.5%);
}

/* анимации идут только когда блок призов на экране (класс ставит js) */
.prize-grid.is-paused *, .prize-grid.is-paused *::before, .prize-grid.is-paused *::after{animation-play-state:paused !important}

@media (prefers-reduced-motion:reduce){
  .prize-grid .art, .prize-grid .art *, .prize-grid .art::before,
  .fx-hop img, .prize__pic--3d .cert{animation:none !important}
  .spark, .puff{display:none}
}

/* карточка машин: картинка + слои фар и банты поверх, всё в процентах от картинки
   машин (1061 x 270 в пикселях слоя), поэтому садится точно на любой ширине */
.prize-cars{
  position:relative;
  width:100%;
  filter:drop-shadow(0 calc(20 * var(--u)) calc(30 * var(--u)) rgba(20,2,30,.55));
}
.prize-cars__img{display:block; width:100%; height:auto}
.prize-cars__lights{
  position:absolute;
  left:-5.655%;          /* поле ореола 60 px слоя: 60 / 1061 */
  top:-22.222%;          /* 60 / 270 */
  width:111.310%;        /* 1181 / 1061 */
  max-width:none;
  mix-blend-mode:screen;
  opacity:.12;
  animation:1.4s linear infinite;
  pointer-events:none;
}
.prize-cars__lights--1,.prize-cars__lights--3{animation-name:lights-odd}
.prize-cars__lights--2,.prize-cars__lights--4{animation-name:lights-even}
.prize-cars__bow{position:absolute; max-width:none}
/* prize-cars bows:start */
.prize-cars__bow--1{left:10.209%; top:-18.618%; width:14.837%}
.prize-cars__bow--2{left:28.301%; top:-20.685%; width:16.963%}
.prize-cars__bow--3{left:48.163%; top:-22.843%; width:19.182%}
.prize-cars__bow--4{left:71.450%; top:-25.270%; width:21.678%}
/* prize-cars bows:end */

/* ==========================  ПОБЕДИТЕЛИ  ================================= */
.winners__card{
  width:calc(1500 * var(--u));
  margin:calc(100 * var(--u)) auto 0;
  padding:calc(20 * var(--u)) calc(40 * var(--u));
  border:calc(2 * var(--u)) solid rgba(255,255,255,.5);
  border-radius:calc(40 * var(--u));
  background:
    linear-gradient(165deg,rgba(255,255,255,.36),rgba(255,255,255,.20));
  box-shadow:0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(20,2,30,.35);
}
.winners__table{
  width:100%;
  border-collapse:collapse;
  font-size:calc(32 * var(--u));
  color:#fff;
}
.winners__table th{
  padding:calc(26 * var(--u)) calc(20 * var(--u));
  border-bottom:calc(2 * var(--u)) solid rgba(255,255,255,.52);
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-weight:400;
  font-size:calc(38 * var(--u));
  text-align:left;
  text-transform:uppercase;
  color:#ffd21f;
}
.winners__table td{
  padding:calc(22 * var(--u)) calc(20 * var(--u));
  border-bottom:calc(1 * var(--u)) solid rgba(255,255,255,.1);
}
.winners__table tr:last-child td{border-bottom:0}
.winners__empty td{
  padding:calc(60 * var(--u)) calc(20 * var(--u));
  text-align:center;
  color:rgba(255,255,255,.75);
}

/* ==========================  ПРОДУКТЫ  =================================== */
.lines{
  list-style:none;
  margin:calc(110 * var(--u)) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(60 * var(--u));
}
.line{
  --glow:rgba(214,180,255,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:calc(60 * var(--u)) calc(40 * var(--u)) calc(56 * var(--u));
  border:calc(2 * var(--u)) solid rgba(255,255,255,.52);
  border-radius:calc(46 * var(--u));
  background:
    radial-gradient(ellipse 60% 46% at 50% 40%, rgba(255,240,255,.58), rgba(255,205,245,.2) 45%, transparent 72%),
    radial-gradient(ellipse 80% 55% at 50% 40%, var(--glow), transparent 70%),
    linear-gradient(165deg,rgba(255,255,255,.40),rgba(255,255,255,.22));
  box-shadow:0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(20,2,30,.35), inset 0 calc(2 * var(--u)) 0 rgba(255,255,255,.18);
  text-align:center;
}
.line--special{--glow:rgba(140,220,120,.26)}
.line--ultra{--glow:rgba(130,215,255,.28)}
.line__pic{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:calc(14 * var(--u));
  width:100%;
  height:calc(430 * var(--u));
}
.line__pic img{
  width:auto;
  max-width:48%;
  height:92%;
  object-fit:contain;
  filter:drop-shadow(0 calc(18 * var(--u)) calc(24 * var(--u)) rgba(20,2,30,.5));
  transform:rotate(-4deg);
}
.line__pic img + img{height:84%; transform:rotate(4deg)}
.line__title{
  margin:calc(40 * var(--u)) 0 0;
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-weight:400;
  font-size:calc(58 * var(--u));
  line-height:1.05;
  text-transform:uppercase;
  color:#fff;
}
.line__text{
  margin:calc(12 * var(--u)) 0 0;
  font-size:calc(30 * var(--u));
  font-weight:500;
  color:rgba(255,255,255,.85);
}

/* ==========================  FAQ  ======================================== */
.faq__list{
  display:flex;
  flex-direction:column;
  gap:calc(24 * var(--u));
  width:calc(1500 * var(--u));
  margin:calc(100 * var(--u)) auto 0;
}
.faq__item{
  overflow:hidden;
  border:calc(2 * var(--u)) solid rgba(255,255,255,.5);
  border-radius:calc(30 * var(--u));
  background:
    linear-gradient(165deg,rgba(255,255,255,.36),rgba(255,255,255,.20));
  box-shadow:0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(20,2,30,.3);
}
.faq__item[open]{border-color:rgba(255,210,31,.45)}
.faq__item summary{
  position:relative;
  padding:calc(34 * var(--u)) calc(120 * var(--u)) calc(34 * var(--u)) calc(50 * var(--u));
  list-style:none;
  cursor:pointer;
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(42 * var(--u));
  line-height:1.15;
  text-transform:uppercase;
  color:#fff;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";
  position:absolute;
  right:calc(44 * var(--u));
  top:50%;
  width:calc(56 * var(--u));
  height:calc(56 * var(--u));
  margin-top:calc(-28 * var(--u));
  border-radius:50%;
  background:linear-gradient(180deg,#fff27a 0%,#ffd21f 45%,#ffa10a 100%);
  font-family:"Geologica","Segoe UI",Arial,sans-serif;
  font-weight:700;
  font-size:calc(40 * var(--u));
  line-height:calc(56 * var(--u));
  text-align:center;
  color:#5a1a74;
  transition:transform .25s ease;
}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__answer{
  padding:0 calc(50 * var(--u)) calc(40 * var(--u));
  font-size:calc(32 * var(--u));
  line-height:1.5;
  color:rgba(255,255,255,.88);
}
.faq__answer b, .faq__answer a{font-weight:700; color:#ffd21f}

/* ==========================  ПОДВАЛ  ===================================== */
.footer{
  position:relative;
  padding:calc(90 * var(--u)) 0 calc(50 * var(--u));
  background:linear-gradient(180deg,#8a35a6 0%,#2a0c34 100%);
  color:#fff;
}
.footer__inner{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;
  gap:calc(80 * var(--u));
  align-items:start;
  width:calc(1860 * var(--u));
  margin:0 auto;
}
.footer__logo{width:calc(200 * var(--u))}
.footer__title{
  margin:0 0 calc(16 * var(--u));
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(36 * var(--u));
  text-transform:uppercase;
  color:#ffd21f;
}
.footer__rules{
  display:inline-block;
  font-size:calc(30 * var(--u));
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:.2em;
}
.footer__phone{
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(56 * var(--u));
  line-height:1;
}
.footer__note{
  margin:calc(12 * var(--u)) 0 0;
  font-size:calc(26 * var(--u));
  color:rgba(255,255,255,.7);
}
.footer__note b{color:#fff}
.footer__social{display:flex; gap:calc(20 * var(--u))}
.footer__social-link{
  display:block;
  width:calc(71 * var(--u));
  height:calc(71 * var(--u));
  background:no-repeat center/contain;
  transition:transform .2s;
}
.footer__social-link:hover{transform:scale(1.08)}
.footer__social-link--tg{background-image:url("../img/social-tg.png")}
.footer__social-link--ig{background-image:url("../img/social-ig.png")}
.footer__copy{
  width:calc(1860 * var(--u));
  margin:calc(60 * var(--u)) auto 0;
  padding-top:calc(30 * var(--u));
  border-top:calc(1 * var(--u)) solid rgba(255,255,255,.1);
  font-size:calc(24 * var(--u));
  color:rgba(255,255,255,.55);
}

/* ==========  ФОН БЛОКОВ: одна растяжка сверху вниз, без швов  ========== */
.prizes{
  background:
    radial-gradient(ellipse 45% 18% at 15% 30%, rgba(255,140,225,0.22), transparent 70%),
    radial-gradient(ellipse 45% 18% at 85% 62%, rgba(255,140,225,0.2), transparent 70%),
    linear-gradient(180deg,#7b2f9b 0%,#a646bd 45%,#8a35a6 100%);
}
.winners{
  background:
    radial-gradient(ellipse 55% 32% at 50% 50%, rgba(255,140,225,0.16), transparent 70%),
    linear-gradient(180deg,#8a35a6 0%,#9a3eb2 100%);
}
.products{
  background:
    radial-gradient(ellipse 45% 26% at 80% 40%, rgba(255,140,225,0.22), transparent 70%),
    radial-gradient(ellipse 45% 24% at 20% 62%, rgba(255,140,225,0.18), transparent 70%),
    linear-gradient(180deg,#8a35a6 0%,#b04fc0 50%,#8a35a6 100%);
}
.faq{
  background:
    radial-gradient(ellipse 55% 26% at 50% 45%, rgba(255,140,225,0.14), transparent 70%),
    linear-gradient(180deg,#8a35a6 0%,#7a2f9a 50%,#6c2888 100%);
}

/* ленты-заголовки — тёмные, как на баннерах KV: тёмная лента на ярком фоне */
.ribbon__body{background:linear-gradient(90deg,#4a1266 0%,#7a2596 50%,#4a1266 100%)}

@media (prefers-reduced-motion:reduce){
  .btn-cta,.btn-cta::after{animation:none}
  .prize-cars__lights{animation:none;opacity:.85}
  .prize{transition:none}
}

/* ==========================  МОБИЛКА: новые блоки  ======================== */
@media (max-width:767px){
  .block{padding:calc(56 * var(--u)) calc(20 * var(--u)) calc(64 * var(--u))}
  .block__inner{width:auto}
  .block__cta{margin-top:calc(40 * var(--u))}
  .btn-cta{width:100%; height:calc(54 * var(--u)); border-radius:calc(14 * var(--u)); font-size:calc(16 * var(--u))}

  .prizes__subtitle{margin-top:calc(44 * var(--u)); font-size:calc(24 * var(--u))}
  .prizes__subtitle--main{margin-top:calc(56 * var(--u)); font-size:calc(30 * var(--u))}
  .prizes__note{margin-top:calc(6 * var(--u)); font-size:calc(13 * var(--u))}
  .prize-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(12 * var(--u)); margin-top:calc(24 * var(--u))}
  .prize{padding:calc(14 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u)); border-radius:calc(18 * var(--u)); border-width:1px}
  .prize__pic{height:calc(100 * var(--u))}
  .prize__count{margin-top:calc(8 * var(--u)); font-size:calc(34 * var(--u))}
  .prize__title{margin-top:calc(4 * var(--u)); font-size:calc(13 * var(--u))}
  .prize__sub{font-size:calc(12 * var(--u))}
  .prize--wide{gap:calc(12 * var(--u)); padding:calc(12 * var(--u)) calc(16 * var(--u))}
  .prize--wide .prize__pic{flex-basis:46%; height:calc(120 * var(--u))}
  .prize--wide .prize__count{font-size:calc(52 * var(--u))}
  .prize--wide .prize__title{margin-top:calc(4 * var(--u)); font-size:calc(15 * var(--u))}
  .prize--wide .prize__sub{font-size:calc(12 * var(--u))}
  .prize__pic--stack img{margin:0 calc(-10 * var(--u))}

  .prizes__main{gap:calc(28 * var(--u)); margin-top:calc(24 * var(--u))}
  .prize-main{grid-template-columns:minmax(0,1fr); gap:calc(10 * var(--u)); padding:calc(24 * var(--u)) calc(18 * var(--u)) calc(22 * var(--u)); border-radius:calc(26 * var(--u)); border-width:1px; text-align:center}
  .prize-main--flip .prize-main__pic{order:0}
  .prize-main__badge{padding:calc(7 * var(--u)) calc(16 * var(--u)); font-size:calc(15 * var(--u))}
  .prize-main__pic{height:calc(170 * var(--u))}
  .prize-main__title{margin-top:calc(14 * var(--u)); font-size:calc(28 * var(--u))}
  .prize-main__text{margin-top:calc(8 * var(--u)); font-size:calc(14 * var(--u))}
  .draws{margin-top:calc(16 * var(--u)); gap:calc(8 * var(--u))}
  .prize-main > .draws{grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:0}
  .draw{gap:calc(3 * var(--u)); padding:calc(8 * var(--u)) calc(10 * var(--u)); border-radius:calc(12 * var(--u)); border-width:1px}
  .draw__label{font-size:calc(11 * var(--u))}
  .draw__date{font-size:calc(22 * var(--u))}
  .draw--final .draw__date{font-size:calc(30 * var(--u))}

  .winners__card{width:auto; margin-top:calc(40 * var(--u)); padding:calc(8 * var(--u)) calc(14 * var(--u)); border-radius:calc(20 * var(--u)); border-width:1px}
  .winners__table thead{display:none}
  .winners__table, .winners__table tbody, .winners__table tr, .winners__table td{display:block; width:100%}
  .winners__table tr{padding:calc(12 * var(--u)) 0; border-bottom:1px solid rgba(255,255,255,.12)}
  .winners__table tr:last-child{border-bottom:0}
  .winners__table td{display:flex; justify-content:space-between; gap:calc(10 * var(--u)); padding:calc(4 * var(--u)) 0; border:0; font-size:calc(14 * var(--u))}
  .winners__table td::before{content:attr(data-label); font-weight:600; color:#ffd21f}
  .winners__empty td{display:block; padding:calc(24 * var(--u)) calc(6 * var(--u)); font-size:calc(14 * var(--u))}
  .winners__empty td::before{content:none}

  .lines{grid-template-columns:minmax(0,1fr); gap:calc(24 * var(--u)); margin-top:calc(56 * var(--u))}
  .line{padding:calc(28 * var(--u)) calc(20 * var(--u)) calc(26 * var(--u)); border-radius:calc(24 * var(--u)); border-width:1px}
  .line__pic{height:calc(190 * var(--u)); gap:calc(8 * var(--u))}
  .line__title{margin-top:calc(18 * var(--u)); font-size:calc(26 * var(--u))}
  .line__text{margin-top:calc(6 * var(--u)); font-size:calc(15 * var(--u))}

  .faq__list{width:auto; margin-top:calc(40 * var(--u)); gap:calc(12 * var(--u))}
  .faq__item{border-radius:calc(18 * var(--u)); border-width:1px}
  .faq__item summary{padding:calc(16 * var(--u)) calc(56 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u)); font-size:calc(18 * var(--u))}
  .faq__item summary::after{right:calc(14 * var(--u)); width:calc(30 * var(--u)); height:calc(30 * var(--u)); margin-top:calc(-15 * var(--u)); font-size:calc(22 * var(--u)); line-height:calc(30 * var(--u))}
  .faq__answer{padding:0 calc(18 * var(--u)) calc(18 * var(--u)); font-size:calc(15 * var(--u))}

  .footer{padding:calc(40 * var(--u)) calc(20 * var(--u)) calc(90 * var(--u))}
  .footer__inner{width:auto; grid-template-columns:minmax(0,1fr); gap:calc(26 * var(--u)); justify-items:center; text-align:center}
  .footer__logo{width:calc(120 * var(--u))}
  .footer__title{margin-bottom:calc(8 * var(--u)); font-size:calc(18 * var(--u))}
  .footer__rules{font-size:calc(15 * var(--u))}
  .footer__phone{font-size:calc(28 * var(--u))}
  .footer__note{margin-top:calc(6 * var(--u)); font-size:calc(13 * var(--u))}
  .footer__social-link{width:calc(44 * var(--u)); height:calc(44 * var(--u))}
  .footer__copy{width:auto; margin-top:calc(28 * var(--u)); padding-top:calc(16 * var(--u)); font-size:calc(12 * var(--u)); text-align:center}
}

/* карточки светлые — подписям лёгкая тень, чтобы белый текст читался чётко */
:is(.prize__title,.prize__sub,.prize-main__text,.step__text,.line__title,.line__text,.prize-main__title,.faq__item summary,.faq__answer,.winners__table){
  text-shadow:0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(60,10,80,.45);
}

/* ==========  ПЛАВАЮЩИЕ ИКОНКИ: у футера скрыты (класс ставит js)  ========== */
.side-actions{transition:opacity .3s, visibility .3s}
body.is-footer .side-actions,
body.is-footer .side-actions__top{opacity:0; visibility:hidden}

/* ==========================  СЧЁТЧИК ДО РОЗЫГРЫША  ======================= */
/* плашки — тот же вид, что у дат розыгрышей в главных призах (.draw) */
.countdown{padding:calc(90 * var(--u)) 0 calc(100 * var(--u))}
.countdown__title{
  margin:0;
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(64 * var(--u));
  line-height:1.1;
  text-align:center;
  text-transform:uppercase;
  color:#fff;
}
.countdown__grid{
  list-style:none;
  margin:calc(46 * var(--u)) auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, calc(230 * var(--u)));
  justify-content:center;
  gap:calc(26 * var(--u));
}
.cd{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(6 * var(--u));
  padding:calc(22 * var(--u)) calc(10 * var(--u)) calc(20 * var(--u));
  border:calc(2 * var(--u)) solid rgba(255,210,31,.55);
  border-radius:calc(24 * var(--u));
  background:rgba(74,18,102,.5);
  box-shadow:0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(20,2,30,.3);
}
.cd__num{
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(96 * var(--u));
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:#ffd21f;
}
.cd__label{
  font-size:calc(26 * var(--u));
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:rgba(255,255,255,.85);
}
.countdown__note{
  margin:calc(30 * var(--u)) 0 0;
  font-size:calc(32 * var(--u));
  font-weight:500;
  text-align:center;
  color:rgba(255,255,255,.85);
}
.countdown__note b{color:#ffd21f; font-weight:600}
/* акция закончилась — плашки прячем, остаётся только строка */
.countdown.is-over .countdown__grid{display:none}

@media (max-width:767px){
  .countdown{padding:calc(36 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u))}
  .countdown__title{font-size:calc(24 * var(--u))}
  .countdown__grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
    margin-top:calc(18 * var(--u));
    gap:calc(8 * var(--u));
  }
  .cd{gap:calc(2 * var(--u)); padding:calc(10 * var(--u)) calc(4 * var(--u)) calc(9 * var(--u)); border-radius:calc(12 * var(--u)); border-width:1px}
  .cd__num{font-size:calc(38 * var(--u))}
  .cd__label{font-size:calc(11 * var(--u))}
  .countdown__note{margin-top:calc(14 * var(--u)); font-size:calc(13 * var(--u))}
}

/* ==========  СЕРТИФИКАТ НА КВАРТИРУ (главный приз финала)  ================ */
.flat-cert{
  position:relative;
  width:min(100%, calc(520 * var(--u) * 1.19));   /* пропорции картинки из макета */
  aspect-ratio:1200 / 1013;
}
/* карточка стоит на месте; под ней в картинке пустое место — там висят ключи */
.flat-cert__img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 calc(24 * var(--u)) calc(40 * var(--u)) rgba(20,2,30,.45));
}
/* карточка сертификата по языку: на Kg — кыргызская картинка */
.flat-cert__img--kg{display:none}
html[lang="ky"] .flat-cert__img--ru{display:none}
html[lang="ky"] .flat-cert__img--kg{display:block}
.flat-cert__card{
container-type:inline-size;
  position:absolute;
  inset:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 8%;                 /* % — от ширины сертификата; cqw внутри — от поля с текстом */
  border-radius:calc(28 * var(--u));
  background:
    repeating-radial-gradient(circle at 100% 0, rgba(255,255,255,.14) 0 calc(4 * var(--u)), transparent calc(4 * var(--u)) calc(14 * var(--u))),
    linear-gradient(135deg,#fff27a 0%,#ffd21f 42%,#ffa10a 100%);
  box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(20,2,30,.5), inset 0 0 0 calc(5 * var(--u)) rgba(255,255,255,.35);
  color:#5a1a74;
  text-align:left;
}
.flat-cert__logo{width:52cqw; height:auto; filter:drop-shadow(0 .6cqw 1cqw rgba(90,26,116,.35))}
.flat-cert__label{
  margin-top:5cqw;
  font-family:"Geologica","Segoe UI",Arial,sans-serif;
  font-size:5.6cqw;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.flat-cert__sum{
  margin-top:1cqw;
  font-family:"Dimbo","Geologica",Arial,sans-serif;
  font-size:16cqw;
  line-height:1;
  white-space:nowrap;
}
.flat-cert__sum small{font-size:.5em}
.flat-cert__shine{
  position:absolute;
  top:0;
  bottom:0;
  left:-40%;
  width:28%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg);
  animation:btn-shine 4.5s ease-in-out infinite;
}
/* ключи висят на углу и покачиваются */
.flat-cert__card{z-index:1}
.prize-main--flip .prize-main__pic{height:calc(560 * var(--u))}   /* сертификат + висящие ключи */
/* ключи висят на кольце, продетом в отверстие карточки (cert-card-*.png:
   отверстие — 73% по ширине, верхний край 51.5%, низ карточки 61.7%;
   верх кольца в cert-keys.png — 37.6% / 4%).
   Два слоя одной картинки: целиком за карточкой и поверх неё —
   только правая часть кольца до края карточки. Качаются синхронно. */
.flat-cert__keys{
  position:absolute;
  z-index:0;
  left:57.9%;                       /* 73% − 37.6% ширины ключей */
  top:49.6%;                        /* верх отверстия − 4% высоты ключей */
  width:40%;
  height:auto;
  transform-origin:37.6% 4%;        /* верх кольца — точка подвеса */
  filter:drop-shadow(0 calc(18 * var(--u)) calc(24 * var(--u)) rgba(20,2,30,.5));
  animation:fx-keys 3.2s ease-in-out infinite;
}
/* передний слой: правая часть кольца от верха до края карточки (26% высоты ключей) */
.flat-cert__keys--front{
  z-index:2;
  clip-path:polygon(37.6% 0, 100% 0, 100% 26%, 37.6% 26%);
  filter:none;                      /* тень уже даёт задний слой */
}
@keyframes fx-keys{
  0%, 100% {rotate:-5deg}
  50%      {rotate:5deg}
}
/* металлический люверс на карточке — «через него» продето кольцо */
.flat-cert__eyelet{
  position:absolute;
  left:72%;
  top:91%;
  width:6.5%;
  aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(circle, #5a2a08 0 38%, #fff1b8 44%, #d99a1e 62%, #8a5a0c 78%, transparent 82%);
  box-shadow:0 1px 2px rgba(90,26,116,.4);
}
/* «пфух»: сияние за карточкой + блёстки вокруг (позиции — в % от сертификата) */
.flat-cert__glow{
  position:absolute;
  left:50%;
  top:50%;
  z-index:0;
  width:148%;
  aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,242,180,.40) 0%, rgba(255,205,60,.18) 36%, transparent 68%);
  animation:fx-flat-glow 4.6s ease-in-out infinite;
}
@keyframes fx-flat-glow{
  0%, 100% {opacity:.45; scale:.92}
  50%      {opacity:1;  scale:1.06}
}
.flat-spark{
  position:absolute;
  left:var(--x);
  top:var(--y);
  z-index:2;
  width:calc(var(--s, 1) * 7%);
  aspect-ratio:1;
  translate:-50% -50%;
  pointer-events:none;
  background:radial-gradient(circle, #fff 0 20%, rgba(255,241,184,.95) 34%, transparent 66%);
  clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter:drop-shadow(0 0 .45em rgba(255,214,90,.85));
  opacity:0;
  animation:fx-flat-spark 3.4s ease-in-out infinite;
  animation-delay:var(--d, 0s);
}
@keyframes fx-flat-spark{
  0%, 100% {opacity:0; scale:.2;  rotate:0deg}
  12%      {opacity:1; scale:1}
  30%      {opacity:0; scale:.35; rotate:110deg}
}

@media (max-width:767px){
  .flat-cert{width:min(86%, calc(150 * var(--u) * 1.19))}
  .prize-main--flip .prize-main__pic{height:calc(215 * var(--u))}
}
@media (prefers-reduced-motion:reduce){
  .flat-cert, .flat-cert__keys, .flat-cert__shine,
  .flat-cert__glow, .flat-spark{animation:none}
  .flat-spark{opacity:0}
}

/* ==========  МОДАЛКИ «ПОБЕДИТЕЛИ» И «ВОПРОСЫ»  ============================ */
.modal__dialog--wide{max-width:940px}
.modal__dialog--wide .modal__title{margin-bottom:8px}
.modal__dialog--wide .modal__note{margin-bottom:22px}
.modal__dialog--wide .winners__card{width:auto; margin:0; padding:6px 22px; border-radius:20px; border-width:1px}
.modal__dialog--wide .winners__table{font-size:16px}
.modal__dialog--wide .winners__table th{padding:14px 10px; font-size:19px; border-bottom-width:1px}
.modal__dialog--wide .winners__table td{padding:12px 10px}
.modal__dialog--wide .winners__empty td{padding:36px 10px}
.modal__dialog--wide .faq__list{width:auto; margin:20px 0 0; gap:12px}
.modal__dialog--wide .faq__item{border-radius:18px; border-width:1px}
.modal__dialog--wide .faq__item summary{padding:18px 70px 18px 24px; font-size:21px}
.modal__dialog--wide .faq__item summary::after{right:20px; width:32px; height:32px; margin-top:-16px; font-size:24px; line-height:32px}
.modal__dialog--wide .faq__answer{padding:0 24px 20px; font-size:16px}

@media (max-width:600px){
  .modal__dialog--wide .winners__card{padding:4px 14px}
  .modal__dialog--wide .winners__table td{padding:4px 0; font-size:14px}
  .modal__dialog--wide .faq__item summary{padding:14px 52px 14px 16px; font-size:17px}
  .modal__dialog--wide .faq__item summary::after{right:12px; width:28px; height:28px; margin-top:-14px; font-size:21px; line-height:28px}
  .modal__dialog--wide .faq__answer{padding:0 16px 16px; font-size:14px}
}

/* ==========  ФУТЕР: дисклеймер  ========================================== */
.footer__copy{line-height:1.6}
.prize-main__text .accent{font-weight:700}

/* ==========  КЫРГЫЗСКАЯ ВЕРСИЯ: тексты длиннее — чуть плотнее  ============= */
@media (min-width:768px){
  html[lang="ky"] .nav__item a{font-size:calc(23 * var(--u))}
  html[lang="ky"] .nav__item:nth-child(n+2){margin-left:calc(40 * var(--u))}
  html[lang="ky"] .hero__promo{font-size:calc(37 * var(--u))}
}
@media (max-width:767px){
  html[lang="ky"] .hotline__text{font-size:calc(11 * var(--u)); letter-spacing:-.01em; white-space:nowrap}
}

/* кнопка под призами — ровно посередине между карточкой сертификата и лентой
   «Продукты»; снизу отступ даёт уже верхний padding блока продуктов, поэтому
   у призов он нулевой, а margin сверху подобран ему в пару */
.prizes{padding-bottom:0}
.prizes .block__cta{margin-top:calc(120 * var(--u))}
@media (max-width:767px){
  .prizes{padding-bottom:0}
  .prizes .block__cta{margin-top:calc(56 * var(--u))}
}

/* ==========  ВХОД, РЕГИСТРАЦИЯ, КАБИНЕТ  ================================= */
.is-hidden{display:none !important}

/* аккаунт — пункты того же меню: «Войти» для гостя, «Кабинет» и «Выйти» для своих */
.nav__item--account{margin-left:calc(46 * var(--u))}   /* у пунктов меню отступы заданы поштучно */
.nav__item--account + .nav__item--account{margin-left:calc(26 * var(--u))}
.nav__item--account a{color:#ffd21f}
body:not(.is-auth) .nav__item--auth{display:none}
body.is-auth .nav__item--guest{display:none}

/* форма: подсказки, ссылки, общая ошибка */
.modal__dialog--form{max-width:560px}
.modal__links{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  margin-top:18px;
  font-size:14px;
}
.modal__links a{color:#ffd21f; text-decoration:underline; text-underline-offset:.2em}
.form__error{
  margin:0 0 14px;
  min-height:18px;
  font-size:14px;
  line-height:1.35;
  color:#ff9a9a;
}
.form__ok{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.4;
  color:#8ef0a8;
}
.field__select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 15px) 50%;
  background-size:7px 7px, 7px 7px;
  background-repeat:no-repeat;
  padding-right:44px;
  cursor:pointer;
}
.field__select option{color:#2a0c34; background:#fff}

/* галочка согласия */
.check{display:flex; gap:12px; align-items:flex-start; cursor:pointer}
.check__box{
  flex:0 0 auto;
  width:22px;
  height:22px;
  margin-top:2px;
  accent-color:#ffd21f;
}
.check__text{font-size:14px; line-height:1.45; opacity:.9}

/* кнопка в форме стоит чаще одного раза — отступ сверху */
.auth-step .modal__submit{margin-top:6px}
.auth-form .modal__submit + .auth-step{margin-top:18px}

@media (min-width:768px){
  /* с пунктами аккаунта меню длиннее — на кыргызском ужимаем сильнее */
  html[lang="ky"] .nav__item a{font-size:calc(21.5 * var(--u))}
  html[lang="ky"] .nav__item:nth-child(n+2){margin-left:calc(30 * var(--u))}
}

@media (max-width:767px){
  .modal__links{font-size:13px}
  .check__text{font-size:13px}
}

/* ==========  ЛИЧНЫЙ КАБИНЕТ  ============================================= */
.cabinet{
  min-height:70vh;
  background:
    radial-gradient(ellipse 45% 26% at 20% 30%, rgba(255,140,225,0.2), transparent 70%),
    linear-gradient(180deg,#7b2f9b 0%,#9a3eb2 55%,#8a35a6 100%);
}
.cab{
  display:grid;
  grid-template-columns:calc(560 * var(--u)) minmax(0,1fr);
  gap:calc(60 * var(--u));
  margin-top:calc(90 * var(--u));
}
.cab__user,
.cab__codes{
  padding:calc(56 * var(--u)) calc(50 * var(--u));
  border:calc(2 * var(--u)) solid rgba(255,255,255,.5);
  border-radius:calc(46 * var(--u));
  background:
    radial-gradient(ellipse 60% 46% at 50% 40%, rgba(255,240,255,.58), rgba(255,205,245,.2) 45%, transparent 72%),
    linear-gradient(165deg,rgba(255,255,255,.36),rgba(255,255,255,.20));
  box-shadow:0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(20,2,30,.35);
}
.cab__user{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  align-self:start;
}
.cab__logo{width:calc(190 * var(--u))}
.cab__name{
  margin:calc(26 * var(--u)) 0 0;
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(52 * var(--u));
  line-height:1.1;
  text-transform:uppercase;
  color:#fff;
}
.cab__phone{
  margin:calc(10 * var(--u)) 0 0;
  font-size:calc(34 * var(--u));
  font-weight:500;
  color:#ffd21f;
}
.cab__add{margin-top:calc(40 * var(--u)); width:100%}
.cab__logout{
  margin-top:calc(26 * var(--u));
  font-size:calc(28 * var(--u));
  font-weight:500;
  color:rgba(255,255,255,.8);
  text-decoration:underline;
  text-underline-offset:.2em;
}
.cab__logout:hover{color:#fff}
.cab__title{
  margin:0 0 calc(24 * var(--u));
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(54 * var(--u));
  line-height:1;
  text-transform:uppercase;
  color:#fff;
}
.cab__table td{font-variant-numeric:tabular-nums}
.cab__pages{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:calc(12 * var(--u));
  margin:calc(30 * var(--u)) 0 0;
  padding:0;
}
.cab__pages button{
  min-width:calc(56 * var(--u));
  height:calc(56 * var(--u));
  padding:0 calc(14 * var(--u));
  border:calc(2 * var(--u)) solid rgba(255,255,255,.5);
  border-radius:calc(16 * var(--u));
  background:rgba(74,18,102,.5);
  font-size:calc(28 * var(--u));
  font-weight:600;
  color:#fff;
  transition:background .2s, border-color .2s;
}
.cab__pages button:hover{background:rgba(74,18,102,.8)}
.cab__pages button.is-active{border-color:#ffd21f; color:#ffd21f}

/* банк для денежного приза — в карточке участника */
.cab__bank{
  width:100%;
  margin-top:calc(36 * var(--u));
  padding-top:calc(30 * var(--u));
  border-top:calc(2 * var(--u)) solid rgba(255,255,255,.3);
  text-align:left;
}
.cab__bank-label{
  display:block;
  margin-bottom:calc(12 * var(--u));
  font-size:calc(22 * var(--u));
  font-weight:300;
  letter-spacing:.02em;
  text-transform:uppercase;
  opacity:.85;
}
.cab__bank-note{
  margin:calc(10 * var(--u)) 0 0;
  font-size:calc(20 * var(--u));
  font-weight:300;
  line-height:1.4;
  opacity:.75;
}
.cab__bank-note.is-ok{color:#9cf5b4; opacity:1}
.cab__bank-note.is-warn{color:#ffd21f; opacity:1}
.cab__bank.is-missing .cab__bank-select{border-color:#ffd21f}

/* выигрыши — карточки над таблицей кодов */
.cab__wins{margin-bottom:calc(50 * var(--u))}
.wins{list-style:none; margin:0; padding:0; display:grid; gap:calc(20 * var(--u))}
.win{
  display:grid;
  grid-template-columns:calc(170 * var(--u)) minmax(0,1fr);
  align-items:center;
  gap:calc(30 * var(--u));
  padding:calc(26 * var(--u)) calc(34 * var(--u));
  border:calc(2 * var(--u)) solid rgba(255,210,31,.75);
  border-radius:calc(30 * var(--u));
  background:
    radial-gradient(ellipse 50% 70% at 12% 50%, rgba(255,226,120,.35), transparent 70%),
    rgba(74,18,102,.45);
}
.win__pic{display:flex; align-items:center; justify-content:center; height:calc(120 * var(--u))}
.win__pic img{max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 calc(8 * var(--u)) calc(14 * var(--u)) rgba(20,2,30,.4))}
.win__title{
  margin:0;
  font-family:"Dimbo","Geologica","Segoe UI",Arial,sans-serif;
  font-size:calc(46 * var(--u));
  line-height:1.05;
  text-transform:uppercase;
  color:#ffd21f;
}
.win__meta{margin:calc(8 * var(--u)) 0 0; font-size:calc(22 * var(--u)); font-weight:300; opacity:.85}
.win__status{
  display:inline-flex;
  align-items:center;
  gap:calc(10 * var(--u));
  margin-top:calc(14 * var(--u));
  padding:calc(8 * var(--u)) calc(18 * var(--u));
  border-radius:calc(30 * var(--u));
  font-size:calc(22 * var(--u));
  font-weight:500;
  line-height:1.3;
  background:rgba(255,255,255,.16);
}
.win__status::before{content:""; flex:none; width:calc(12 * var(--u)); height:calc(12 * var(--u)); border-radius:50%; background:currentColor}
.win__status--wait{color:#ffe37a}
.win__status--sent{color:#9fd8ff}
.win__status--done{color:#9cf5b4}
.win__status--bad{color:#ff9d9d}
.win__status--gift{color:#fff}

/* в кабинете первый экран не нужен — подвал прижимаем вниз */
.page-cabinet .page{display:flex; flex-direction:column; min-height:100vh}
.page-cabinet .cabinet{flex:1 0 auto}

@media (max-width:767px){
  .cab{grid-template-columns:minmax(0,1fr); gap:calc(16 * var(--u)); margin-top:calc(30 * var(--u))}
  .cab__user,
  .cab__codes{padding:calc(22 * var(--u)) calc(16 * var(--u)); border-radius:calc(22 * var(--u)); border-width:1px}
  .cab__logo{width:calc(110 * var(--u))}
  .cab__name{margin-top:calc(14 * var(--u)); font-size:calc(26 * var(--u))}
  .cab__phone{font-size:calc(18 * var(--u))}
  .cab__add{margin-top:calc(18 * var(--u))}
  .cab__logout{margin-top:calc(14 * var(--u)); font-size:calc(15 * var(--u))}
  .cab__title{margin-bottom:calc(12 * var(--u)); font-size:calc(24 * var(--u))}
  .cab__pages{gap:calc(6 * var(--u)); margin-top:calc(16 * var(--u))}
  .cab__bank{margin-top:calc(18 * var(--u)); padding-top:calc(16 * var(--u)); border-top-width:1px}
  .cab__bank-label{font-size:calc(13 * var(--u)); margin-bottom:calc(8 * var(--u))}
  .cab__bank-note{font-size:calc(13 * var(--u))}
  .cab__wins{margin-bottom:calc(24 * var(--u))}
  .wins{gap:calc(12 * var(--u))}
  .win{grid-template-columns:calc(80 * var(--u)) minmax(0,1fr); gap:calc(14 * var(--u)); padding:calc(14 * var(--u)); border-radius:calc(18 * var(--u)); border-width:1px}
  .win__pic{height:calc(64 * var(--u))}
  .win__title{font-size:calc(24 * var(--u))}
  .win__meta{font-size:calc(13 * var(--u))}
  .win__status{margin-top:calc(8 * var(--u)); padding:calc(5 * var(--u)) calc(10 * var(--u)); font-size:calc(13 * var(--u)); gap:calc(6 * var(--u))}
  .win__status::before{width:calc(8 * var(--u)); height:calc(8 * var(--u))}
  .cab__pages button{min-width:calc(34 * var(--u)); height:calc(34 * var(--u)); border-radius:calc(10 * var(--u)); border-width:1px; font-size:calc(15 * var(--u))}
}

/* холодильник крупнее соседей: картинка вытянутая, в общей высоте теряется */
.prize--tall .prize__pic{height:calc(330 * var(--u))}   /* холодильник и телевизор — один ряд, одна высота */
@media (max-width:767px){
  .prize--tall .prize__pic{height:calc(150 * var(--u))}
}

/* ==========  КАРУСЕЛЬ ПРОДУКТОВ  ========================================= */
.slider{position:relative; display:block}
.slider__view{overflow:hidden; width:100%; height:100%}
.slider__track{
  display:flex;
  height:100%;
  margin:0;
  padding:0;
  list-style:none;
  transition:transform .45s cubic-bezier(.25,.8,.3,1);
}
.slider__slide{
  flex:0 0 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 calc(40 * var(--u));
}
.line .slider__slide img{
  width:auto;
  max-width:100%;
  max-height:100%;
  height:auto;
  object-fit:contain;
  transform:none;
  filter:drop-shadow(0 calc(18 * var(--u)) calc(24 * var(--u)) rgba(20,2,30,.5));
}
/* стрелки — как на старом промо: тонкие шевроны по краям */
.slider__arrow{
  position:absolute;
  top:50%;
  width:calc(56 * var(--u));
  height:calc(56 * var(--u));
  margin-top:calc(-28 * var(--u));
  border:0;
  background:none;
  cursor:pointer;
  opacity:.75;
  transition:opacity .2s, transform .2s;
  z-index:2;
}
.slider__arrow::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:calc(22 * var(--u));
  height:calc(22 * var(--u));
  margin:calc(-11 * var(--u)) 0 0 calc(-11 * var(--u));
  border-left:calc(4 * var(--u)) solid #fff;
  border-bottom:calc(4 * var(--u)) solid #fff;
  border-radius:calc(2 * var(--u));
}
.slider__arrow--prev{left:calc(-6 * var(--u))}
.slider__arrow--next{right:calc(-6 * var(--u))}
.slider__arrow--prev::before{transform:rotate(45deg)}
.slider__arrow--next::before{transform:rotate(-135deg)}
.slider__arrow:hover{opacity:1; transform:scale(1.1)}
.slider__arrow:disabled{opacity:.25; cursor:default; transform:none}
/* точки */
.slider__dots{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(-26 * var(--u));
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:calc(10 * var(--u));
  margin:0;
  padding:0;
  list-style:none;
}
.slider__dots button{
  width:calc(12 * var(--u));
  height:calc(12 * var(--u));
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.slider__dots button:hover{background:rgba(255,255,255,.8)}
.slider__dots button.is-active{background:#ffd21f; transform:scale(1.2)}

/* место под точки под каруселью */
.line .slider{height:calc(430 * var(--u))}
.line__title{margin-top:calc(62 * var(--u))}

@media (max-width:767px){
  .line .slider{height:calc(190 * var(--u))}
  .slider__slide{padding:0 calc(26 * var(--u))}
  .slider__arrow{width:calc(34 * var(--u)); height:calc(34 * var(--u)); margin-top:calc(-17 * var(--u))}
  .slider__arrow::before{width:calc(13 * var(--u)); height:calc(13 * var(--u)); margin:calc(-6.5 * var(--u)) 0 0 calc(-6.5 * var(--u)); border-width:2px}
  .slider__arrow--prev{left:calc(-10 * var(--u))}
  .slider__arrow--next{right:calc(-10 * var(--u))}
  .slider__dots{bottom:calc(-16 * var(--u)); gap:calc(6 * var(--u))}
  .slider__dots button{width:calc(7 * var(--u)); height:calc(7 * var(--u))}
  .line__title{margin-top:calc(32 * var(--u))}
}

@media (prefers-reduced-motion:reduce){
  .slider__track{transition:none}
}