/* ==========================================================================
   Заглушка до старта акции. Макет: «Заглушка Любимый сайт.pdf», 1920 × 1080.
   Размеры — calc(N * var(--u)), где N взято прямо из макета (1 --u = 1 px макета).
   Текст вынесен из картинки, чтобы работали два языка (RU / KG), фон — img/soon-bg.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{display:block;max-width:none;height:auto}
a{color:inherit;text-decoration:none}
p,h1{margin:0}

:root{
  /* --pvw ставит JS = ширина окна без полосы прокрутки / 100 */
  --u:calc(var(--pvw, 1vw) * 100 / 1920);
  --font:"Myriad Pro","Fira Sans",Arial,sans-serif;
  --orange:#e39427;
  --wine:#650a0b;
}

body{
  font-family:var(--font);
  font-weight:800;
  color:#fff;
  background:#5e080c;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- экран ---------- */
.soon{
  position:relative;
  width:100%;
  height:calc(1080 * var(--u));
  min-height:100vh;
  background:#8f1319 url(/img/soon-bg.webp) center top/100% 100% no-repeat;
  overflow:hidden;
}

/* ---------- язык ---------- */
.soon__lang{position:absolute;right:calc(34 * var(--u));top:calc(30 * var(--u));display:flex;gap:calc(12 * var(--u));z-index:3}
.pill{
  display:flex;align-items:center;justify-content:center;
  min-width:calc(86 * var(--u));height:calc(50 * var(--u));
  padding:0 .5em;
  font-weight:900;font-size:calc(26 * var(--u));
  color:#fff;background:transparent;
  border:calc(2 * var(--u)) solid rgba(255,255,255,.75);
  border-radius:calc(12 * var(--u));
  transition:background .2s,color .2s,transform .2s;
}
.pill:hover{transform:translateY(calc(-2 * var(--u)))}
.pill.is-active{background:#fff;color:var(--wine);border-color:#fff}

/* ---------- логотип и пачка ---------- */
.soon__logo{position:absolute;left:calc(30 * var(--u));top:calc(30 * var(--u));width:calc(384 * var(--u))}
.soon__pack{display:block;position:absolute;left:calc(245.5 * var(--u));top:calc(177 * var(--u));width:calc(418 * var(--u))}
.soon__pack img{display:block;width:100%;height:auto}

/* ---------- текстовый блок ---------- */
.soon__text{
  position:absolute;left:calc(1112 * var(--u));top:calc(143 * var(--u));
  width:calc(880 * var(--u));
  transform:translateX(-50%);
  text-align:center;
}
.soon__title{font-weight:900;font-size:calc(148 * var(--u));line-height:1.15;letter-spacing:-.01em}
.soon__lead{margin-top:calc(8 * var(--u));font-weight:900;font-size:calc(74.7 * var(--u));line-height:calc(89.5 * var(--u))}

/* ---------- мелкий текст внизу ---------- */
.soon__legal{position:absolute;left:0;right:0;bottom:calc(19 * var(--u));text-align:center;color:var(--orange)}
.soon__period{position:relative;font-weight:800;font-size:calc(15.4 * var(--u));padding-bottom:calc(9 * var(--u))}
.soon__period::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:calc(502 * var(--u));height:calc(1 * var(--u));
  background:linear-gradient(90deg,transparent,var(--orange) 12%,var(--orange) 88%,transparent);
}
.soon__small{margin-top:calc(7 * var(--u));font-weight:800;font-size:calc(14.5 * var(--u));line-height:calc(17.2 * var(--u))}

/* ==========================================================================
   Телефон: тот же набор блоков, выстроенный в колонку
   ========================================================================== */
@media (max-width:900px){
  /* макет «Заглушка Любимый сайт мобилка.pdf», 394 × 846 */
  /* масштаб так, чтобы экран целиком влезал и по ширине, и по высоте */
  :root{--u:min(calc(var(--pvw, 1vw) * 100 / 394), calc(var(--pvh, 1vh) * 100 / 870))}

  .soon{
    height:auto;min-height:100vh;
    display:flex;flex-direction:column;align-items:center;
    padding:calc(28 * var(--u)) calc(14 * var(--u)) calc(84 * var(--u));
    background:#8f1319 url(/img/soon-bg-m.webp) center top/100% auto no-repeat;
    background-size:cover;
  }
  .soon__lang{right:calc(12 * var(--u));top:calc(12 * var(--u));gap:calc(8 * var(--u))}
  .pill{min-width:calc(42 * var(--u));height:calc(25 * var(--u));font-size:calc(12.5 * var(--u));border-width:calc(1.2 * var(--u));border-radius:calc(7 * var(--u))}

  .soon__logo{position:static;order:1;width:calc(216 * var(--u));margin:0 auto}
  .soon__text{position:static;order:2;width:calc(394 * var(--u));max-width:100%;transform:none;margin-top:calc(22 * var(--u))}
  .soon__title{font-size:calc(48.6 * var(--u));line-height:1.15}
  .soon__lead{margin-top:0;font-size:calc(24.5 * var(--u));line-height:calc(29.3 * var(--u))}

  .soon__pack{position:static;order:3;width:calc(211.5 * var(--u));margin:calc(9 * var(--u)) auto 0}
  /* в макете пачка заходит под нижнюю плашку, поэтому мелкий текст — поверх неё */
  .soon__legal{position:absolute;left:0;right:0;bottom:calc(10 * var(--u));order:4}
  .soon__period{font-size:calc(7.1 * var(--u));padding-bottom:calc(5 * var(--u))}
  .soon__period::after{width:calc(230 * var(--u))}
  .soon__small{margin-top:calc(5 * var(--u));font-size:calc(6.7 * var(--u));line-height:calc(8 * var(--u))}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}