/* =========================================================
   SITENAV — сквозное меню сайта.
   Живёт ВНУТРИ <header class="nav">, в одном ряду с логотипом:
   на широком экране между логотипом и кнопками пусто, и отдельная
   строка под меню — это выброшенные 46px высоты фикс-шапки.
   На узком экране ряд не вмещает всё сразу, поэтому меню
   переносится под логотип отдельной прокручиваемой полосой.
   ========================================================= */
.sitenav{
  flex:1 1 auto;
  min-width:0;              /* иначе флекс не даст полосе сжаться и уедет вбок */
  display:flex;justify-content:center;
}
.sitenav__in{
  display:flex;align-items:center;
  gap:clamp(14px,2vw,26px);
  max-width:100%;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.sitenav__in::-webkit-scrollbar{display:none}

.sitenav a{
  display:flex;align-items:center;
  flex:none;white-space:nowrap;
  padding:6px 0 5px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
}
.sitenav a:hover{color:var(--cream)}
.sitenav a:focus-visible{outline:2px solid var(--magenta);outline-offset:2px;border-radius:3px}
.sitenav a[aria-current="page"]{color:#fff;border-bottom-color:var(--pink)}

/* ---- узкий экран: меню уходит на свою строку под логотип ---- */
@media (max-width:1000px){
  .nav{flex-wrap:wrap;row-gap:0}
  .sitenav{
    order:3;flex:0 0 100%;width:100%;
    justify-content:flex-start;
    margin:9px 0 0;padding:0;
    border-top:1px solid rgba(234,234,244,.08);
    position:relative;
  }
  .sitenav__in{height:44px;width:100%}
  /* подсказка, что полосу можно тянуть вбок */
  .sitenav::after{
    content:"";position:absolute;right:0;top:1px;bottom:0;width:40px;
    background:linear-gradient(90deg,transparent,var(--ink));
    pointer-events:none;
  }
}

/* =========================================================
   HERO__FACTS — четыре ссылки прямо под таймером.
   Самое видное место страницы: до этой строки человек
   доскроллит всегда, до секции Facts — почти никогда.
   ========================================================= */
.hero__facts{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 10px;
  margin:26px auto 0;max-width:660px;
}
.hero__facts > span{
  width:100%;text-align:center;margin:0 0 4px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(234,234,244,.5);
}
.hero__facts a{
  padding:8px 15px 7px;border-radius:999px;
  border:1px solid rgba(234,234,244,.18);
  background:rgba(15,15,26,.42);
  backdrop-filter:blur(6px);
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:600;letter-spacing:.06em;
  color:var(--cream);
  transition:border-color .22s,background .22s,transform .22s var(--ease-out);
}
.hero__facts a:hover{
  border-color:rgba(240,18,122,.65);
  background:rgba(240,18,122,.16);
  transform:translateY(-2px);
}
.hero__facts a:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}

@media (max-width:640px){
  .hero__facts{margin-top:20px;gap:7px 8px}
  .hero__facts a{padding:7px 12px 6px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .hero__facts a{transition:none}
  .hero__facts a:hover{transform:none}
}