/* ============================================================
   FUTURE UZ — заглушка. Макет Figma 1920×937, нода 2948:2
   Единица --u = 1px макета. Сцена всегда целиком влезает в окно.
   ============================================================ */

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

html, body {
  margin: 0;
  padding: 0;
  background: #F6F6F6;
  overflow-x: hidden;
}

body {
  font-family: 'Onest', -apple-system, 'Segoe UI', Arial, sans-serif;
  color: #181A1D;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* заголовок для программ чтения и поисковиков — визуально скрыт */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   СЦЕНА — десктоп, от 1920px (ниже — поточная раскладка)
   1px макета = min(100vw/1920, 100vh/937)
   Ниже 1920px линейный масштаб делал кегли нечитаемыми
   (16px макета * 0.71 = 11.4px на 1366; на 1600 было бы 13.3px,
   то есть мельче, чем на 1440 в потоке) — там работает поток.
------------------------------------------------------------ */
.scene {
  /* Пол 1 — кегли никогда не мельче макетных: без него любое окно ниже
     937 точек (ноутбук с открытыми панелями) валило текст до 10-12px.
     Потолок 1.333 — выше него бокс декора обгонял бы исходники картинок.
     Сцена выше окна — обычная вертикальная прокрутка, как на tfc.kz. */
  --u: clamp(1px, min(0.05208333vw, 0.10672358vh), 1.333px);
  position: relative;
  width: calc(1920 * var(--u));
  height: calc(937 * var(--u));
  margin: 0 auto;
  overflow: hidden;
  flex: none;
}

/* сцена по центру экрана по вертикали, а не прижата к верху */
@media (min-width: 1920px) {
  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- надпись FUTURE --- Figma: X=80 Y=316 W=1761 H=218.414 */
.tagline {
  position: absolute;
  left: calc(80 * var(--u));
  top: calc(316 * var(--u));
  width: calc(1761 * var(--u));
  height: calc(218.414 * var(--u));
}

/* --- планета --- Figma: X=145 Y=471 306×306.
   Отсчёт от .pyramid (её угол 508;102): 145-508=-363, 471-102=369 */
.planet {
  position: absolute;
  left: calc(-363 * var(--u));
  top: calc(369 * var(--u));
  width: calc(306 * var(--u));
  height: calc(306 * var(--u));
  max-width: none;
}

/* --- пирамида --- Figma: центр по X, 904×732, низ картинки прижат (object-bottom/cover) */
.pyramid {
  position: absolute;
  left: calc(508 * var(--u));      /* 960 - 904/2 */
  top: calc(102 * var(--u));       /* центр 468 - 732/2 */
  width: calc(904 * var(--u));
  height: calc(732 * var(--u));
}
.pyramid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* --- орнамент --- Figma: X=1287 Y=97 310×310.
   Отсчёт от .pyramid (508;102): 1287-508=779, 97-102=-5 */
.ornament {
  position: absolute;
  left: calc(779 * var(--u));
  top: calc(-5 * var(--u));
  width: calc(310 * var(--u));
  height: calc(310 * var(--u));
  max-width: none;
}

/* обёртка шапки — на десктопе прозрачна для позиционирования */
.top { display: contents; }

/* --- логотип --- Figma: X=80 Y=29 166.043×36.088 */
.logo {
  position: absolute;
  left: calc(80 * var(--u));
  top: calc(29 * var(--u));
  width: calc(166.043 * var(--u));
  height: calc(36.0879 * var(--u));
}

/* --- меню --- Figma: Y=30, Onest Medium 16, line-height 35 */
.menu span {
  position: absolute;
  top: calc(30 * var(--u));
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: calc(35 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}
.menu-1 { left: calc(728 * var(--u)); }   /* 33.33% + 88 */
.menu-2 { left: calc(816 * var(--u)); }   /* 41.67% + 16 */
.menu-3 { left: calc(962 * var(--u)); }   /* 50%    + 2  */
.menu-4 { left: calc(1098 * var(--u)); }  /* 58.33% - 22 */

/* --- телефон --- Figma: X=1633 Y=23, фон #C0EF24, padding 15/25, radius 200 */
.phone {
  position: absolute;
  left: calc(1633 * var(--u));
  top: calc(23 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(15 * var(--u)) calc(25 * var(--u));
  background: #C0EF24;
  border-radius: calc(200 * var(--u));
  color: #181A1D;
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

/* --- шоурил --- круг Figma X=80 Y=179 78×78, свечение inset -50 */
/* ссылка не участвует в потоке: её дети позиционированы от .scene */
.showreel {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.showreel-glow img { transition: transform .2s ease; }
.showreel-text { transition: opacity .2s ease; }
.showreel:hover .showreel-glow img { transform: scale(1.06); }
.showreel:hover .showreel-text { opacity: .65; }

/* бокс = сам круг 78×78 (зона клика), свечение вынесено во вложенный
   img с отрицательным вылетом и pointer-events:none — иначе ссылка
   ловила курсор в 50px от кнопки */
.showreel-glow {
  position: absolute;
  left: calc(80 * var(--u));
  top: calc(179 * var(--u));
  width: calc(78 * var(--u));
  height: calc(78 * var(--u));
}
.showreel-glow img {
  position: absolute;
  left: calc(-50 * var(--u));
  top: calc(-50 * var(--u));
  width: calc(178 * var(--u));
  height: calc(178 * var(--u));
  max-width: none;
  pointer-events: none;
}

/* стрелка: бокс 15×15 X=112 Y=210, повёрнута на 90° */
.showreel-arrow {
  position: absolute;
  left: calc(112 * var(--u));
  top: calc(210 * var(--u));
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  transform: rotate(90deg);
}
.showreel-arrow img {
  position: absolute;
  left: calc(1.005 * var(--u));    /* 6.7% от 15 */
  top: 0;
  width: calc(12.9904 * var(--u));
  height: calc(11.25 * var(--u));
}

/* текст шоурила — Figma: X=188 Y=199, Onest Regular 16 */
.showreel-text {
  position: absolute;
  left: calc(188 * var(--u));
  top: calc(199 * var(--u));
  font-weight: 400;
  font-size: calc(16 * var(--u));
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- УЗБЕКИСТАН --- Figma: X=80 Y=777, Onest SemiBold 24, lh 1.4 */
.country {
  position: absolute;
  left: calc(80 * var(--u));
  top: calc(777 * var(--u));
  margin: 0;
  font-weight: 600;
  font-size: calc(24 * var(--u));
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- текст о компании --- Figma: X=1415 Y=777 W=398, Onest 18, lh 1.4 */
.about {
  position: absolute;
  left: calc(1415 * var(--u));
  top: calc(777 * var(--u));
  width: calc(398 * var(--u));
  margin: 0;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.4;
  text-transform: uppercase;
}
.about b { font-weight: 600; }

/* --- статус --- Figma: X=805 Y=886, Onest Medium 16, tracking 1.6 */
.status {
  position: absolute;
  left: calc(805 * var(--u));
  top: calc(886 * var(--u));
  margin: 0;
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: 1.4;
  letter-spacing: calc(1.6 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ — по образцу основного сайта tfc.kz
   Числа взяты из темы TFC, assets/css/main.css, @media max-width:1023px
   (контейнер 620/24, шапка 72, логотип 130, кегли 21/17, декор акцентами).
   Верхняя граница 1919, а не 1023: на 1024-1919 линейный масштаб сцены
   давал кегль 11-13px (16px макета * 0.71 на 1366). Поток держит
   настоящие px. Размеры для этого диапазона — блоком ниже.
   ============================================================ */
@media (max-width: 1919px) {

  /* контейнер как .hero-canvas основного сайта */
  .scene {
    position: relative;
    width: 100%;
    max-width: 620px;
    height: auto;
    margin: 0 auto;
    padding: 28px 24px 56px;
    /* базовое .scene { overflow:hidden } резало декор, вынесенный к краю
       экрана, прямой вертикальной линией — здесь снимаем; от появления
       горизонтальной прокрутки страхует body { overflow-x: hidden } */
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  /* сброс десктопного абсолютного позиционирования */
  .scene > *,
  .top > *,
  .menu span,
  .showreel-text {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
  }

  /* ---- шапка: логотип слева, зелёная пилюля справа (на сайте там бургер,
     а CTA-пилюля живёт в мобильном меню — сюда взят её вид) ---- */
  .top {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
  }

  .logo {
    width: 130px;          /* .header-logo img — 130px */
    height: auto;
    flex: none;
  }

  .phone {
    padding: 12px 18px;    /* .mobile-nav-cta — 14px, ужато под короткий текст */
    border-radius: 100px;
    font-size: 15px;       /* .mobile-nav-cta — 15px */
    font-weight: 500;
    white-space: nowrap;
    flex: none;
  }

  /* ---- меню: кегль и вес мобильного меню сайта, но в строку — 4 пункта ---- */
  .menu {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    width: 100%;
  }
  .menu span {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
  }

  /* ---- шоурил: круг 62px как .hero-btn-play ---- */
  .showreel {
    order: 7;
    margin-top: 4px;
    display: flex;
    align-items: center;
    align-self: flex-start;
  }
  /* бокс = видимый круг 62px (как .hero-btn-play на сайте) — он же зона
     клика; свечение вынесено во вложенный img с вылетом наружу и
     pointer-events:none, иначе ссылка перекрывала подпись внизу */
  .showreel-glow {
    position: relative;
    left: auto;              /* без сброса десктопные left/top при relative
                                смещали круг на 35px вниз, на подпись */
    top: auto;
    display: block;
    width: 62px;
    height: 62px;
    flex: none;
    margin-right: 14px;
  }
  .showreel-glow img {
    position: absolute;
    left: -39.7px;              /* (62 * 178/78 - 62) / 2 */
    top: -39.7px;
    width: 141.5px;
    height: 141.5px;
    max-width: none;
    pointer-events: none;
  }
  .showreel-arrow { display: none; }
  .showreel-glow::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-4px, -50%);
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #181A1D;
  }
  .showreel-text {
    font-size: 14px;
    line-height: 1.25;
  }

  /* ---- FUTURE во всю ширину — как .hero-tagline ---- */
  .tagline {
    order: 3;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
  }

  /* ---- «Узбекистан» — кегль подзаголовка hero (21/1.25) ---- */
  .country {
    order: 4;
    font-size: 21px;
    line-height: 1.25;
    position: relative;
    z-index: 1;
  }

  /* ---- описание — кегль .hero-description (17/1.45) ---- */
  .about {
    order: 5;
    width: 100%;
    font-size: 17px;
    line-height: 1.45;
    position: relative;
    z-index: 1;
  }
  .brk { display: none; }

  /* ---- пирамида — как .hero-decor-pyramid: блок в потоке, 82%/300 ---- */
  .pyramid {
    order: 6;
    position: relative;
    z-index: 1;              /* декор не должен наезжать на главный объект */
    width: 82%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 904 / 732;
    margin: 6px auto 2px;
  }

  /* ---- планета и орнамент — акценты, выглядывают за края, под текстом ---- */
  /* Декор отсчитывается от ПИРАМИДЫ и едет вместе с ней. Раньше тут были
     абсолютные top:470/480 от верха сцены — до текста оставалось 19px, и
     любой сдвиг (запасной шрифт, крупный системный кегль, лишняя строка)
     давал наезд.
     Горизонталь — от края ЭКРАНА, а не контейнера: контейнер уже 620px и на
     планшете декор срезало вертикальной линией посреди пустого поля. */
  .planet,
  .ornament {
    position: absolute;
    height: auto;
    z-index: 0;
    max-width: none;
  }
  .planet {
    left: calc(50% - 50vw - 26px);
    top: 8%;
    width: 88px;
  }
  .ornament {
    left: auto;
    right: calc(50% - 50vw - 18px);
    top: -5%;
    width: 102px;
  }
  /* картинка пирамиды выше декора */
  .pyramid-img { position: relative; z-index: 1; }

  /* ---- статус ---- */
  .status {
    order: 8;
    align-self: center;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 1.4px;
  }
}

/* ------------------------------------------------------------
   НОУТБУКИ 1024-1599 — тот же поток, но крупнее: экран широкий,
   колонка 620px посреди пустоты смотрелась бы сиротливо.
------------------------------------------------------------ */
@media (min-width: 1024px) and (max-width: 1919px) {
  .scene {
    max-width: 1100px;
    padding: 40px 60px 72px;
    gap: 30px;
  }
  .logo { width: 190px; }
  .phone { padding: 15px 25px; font-size: 16px; }

  /* Кегли — РОВНО макетные (16/18/24). Раньше тут стояли 18/20/28, и на
     границе 1919→1920 текст уменьшался при росте окна: 18 в потоке против
     16 в сцене. Теперь на границе он не меняется вовсе. */
  .menu { gap: 8px 40px; }
  .menu span { font-size: 16px; }
  .showreel-text { font-size: 16px; }
  .country { font-size: 24px; }
  .about { font-size: 18px; max-width: 900px; }
  .status { font-size: 16px; letter-spacing: 1.6px; }

  .showreel {
    order: 3;                /* был 7 — на 1024x900 уезжал за первый экран
                                (top 953 при высоте окна 900) */
    margin-top: 0;
  }
  .tagline  { order: 4; }
  .country  { order: 5; }
  .about    { order: 6; }
  .pyramid  { order: 7; width: 62%; max-width: 460px; }
  .status   { order: 8; }

  .showreel-glow { width: 78px; height: 78px; margin-right: 18px; }
  .showreel-glow img { left: -50px; top: -50px; width: 178px; height: 178px; }
  .showreel-glow::after { border-width: 7px 0 7px 12px; }

  .planet   { width: 150px; top: 12%; }
  .ornament { width: 170px; top: -18%; }
}

/* ------------------------------------------------------------
   Узкие телефоны
------------------------------------------------------------ */
@media (max-width: 430px) {
  /* 3+1 давало висячую строку — раскладываем 2x2 */
  .menu {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 8px 24px;
  }
}

@media (max-width: 400px) {
  .menu span { font-size: 15px; }
  .about { font-size: 16px; }
  .country { font-size: 19px; }
  .phone { padding: 11px 15px; font-size: 14px; }
  .logo { width: 118px; }
}

/* На 320 логотип 118 + пилюля 162 + gap 12 не влезали в 272 —
   упирались в правый край. Ужимаем обоих. */
@media (max-width: 360px) {
  .scene { padding-left: 18px; padding-right: 18px; }
  .logo { width: 104px; }
  .phone { padding: 10px 12px; font-size: 12.5px; }
  .top { gap: 8px; }
  .menu span { font-size: 14px; }
  .status { font-size: 12.5px; letter-spacing: 1px; }
}