/* Neon Hub — страница продукта. Первый экран — общий баннер с картинкой
   (shared/hero.css, как на главной и в Neon X), по нему летают логотипы
   площадок. Блоки ниже — общие для лендингов Neon (shared/sections.css),
   поэтому здесь только то, что относится именно к этой странице. */
:root{--hub-shadow:0 24px 70px rgba(32,93,168,.1)}

/* ================================================================ база */
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{background:var(--paper);font-size:16px;line-height:1.5}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
img{max-width:100%;display:block}
button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.container{width:min(1380px,calc(100% - 80px));margin-inline:auto}
.header .nav a{font-size:13px;padding:10px 12px}
.skip-link{position:fixed;top:10px;left:16px;z-index:1000;padding:12px 18px;background:white;color:var(--blue);transform:translateY(-150%)}
.skip-link:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ======================================================= первый экран */
/* Три кнопки в ряд: «Начать работу» и плашки Windows / macOS. */
.hero.hero--hub .hero__actions .nh-dl{height:var(--hero-btn-h)}

/* Логотипы площадок летают по правой половине снимка — там, где нет
   текста. Маленькие плитки — «дальние», они мельче и медленнее. */
.hero.hero--hub .hero-orbit__item--of{left:51%;top:12%}
.hero.hero--hub .hero-orbit__item--fansly{left:54%;top:64%}
.hero.hero--hub .hero-orbit__item--fanvue{left:89%;top:72%}
.hero.hero--hub .hero-orbit__item--tg{left:70%;top:80%}
.hero.hero--hub .hero-orbit__item--mv{left:64%;top:13%}
.hero.hero--hub .hero-orbit__item--lf{left:60%;top:40%}

@media(max-width:1200px){
  .container{width:calc(100% - 48px)}
  .header .nav a{font-size:12px;padding:9px}
}
@media(max-width:1180px){
  /* Три кнопки в колонку текста уже не влезают — «Начать работу» во всю
     ширину, плашки парой под ней; под второй ряд резервируется место. */
  .hero.hero--hub{--hero-actions-h:calc(var(--hero-btn-h) * 2 + 12px)}
  .hero.hero--hub .hero__actions{flex-wrap:wrap;max-width:460px}
  .hero.hero--hub .hero__actions .btn{flex:1 1 100%}
  .hero.hero--hub .hero__actions .nh-dl{flex:1 1 0;justify-content:center}
  .hero.hero--hub .hero-orbit__item{--s:74px}
  .hero.hero--hub .hero-orbit__item--small{--s:54px}
  .hero.hero--hub .hero-orbit__item--of{left:54%;top:20%}
  .hero.hero--hub .hero-orbit__item--fansly{left:56%;top:64%}
}
@media(max-width:1050px) and (min-width:721px){
  .header__inner{gap:8px}
  .header .nav a{padding:9px 7px;font-size:11px}
  .header__actions .btn--nav{padding:0 10px;font-size:11px}
}
@media(max-width:960px){
  /* Шапка раньше уходит в «гамбургер», пока пилюли навигации не слиплись. */
  .header[data-nav-mode="hub"] .header__inner{height:60px;display:flex;justify-content:space-between;position:relative}
  .header[data-nav-mode="hub"] .menu-toggle{display:block;position:absolute;right:16px;z-index:3}
  .header[data-nav-mode="hub"] .header__panel{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:14px;padding:18px;background:#fafdff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--hub-shadow)}
  .header[data-nav-mode="hub"].open .header__panel{display:flex}
  .header[data-nav-mode="hub"] .header__nav-group{width:100%}
  .header[data-nav-mode="hub"] .nav{flex-direction:column;width:100%;gap:8px}
  .header[data-nav-mode="hub"] .nav a{text-align:center;font-size:14px;padding:12px}
  .header[data-nav-mode="hub"] .header__actions{height:auto;align-self:center}
  .header[data-nav-mode="hub"] .header__actions .btn--nav{font-size:14px;min-height:44px}
}
@media(max-width:900px) and (min-width:721px){
  /* Второй ряд кнопок не влезает в 650px общего баннера на планшете. На
     телефоне высота снова по содержимому — там это правило не нужно. */
  .hero.hero--hub{--hero-h:700px}
}
@media(max-width:900px){
  .hero.hero--hub .hero-orbit__item{--s:64px}
  .hero.hero--hub .hero-orbit__item--small{display:none}
  .hero.hero--hub .hero-orbit__item--of{left:66%;top:13%}
  .hero.hero--hub .hero-orbit__item--fansly{left:64%;top:66%}
  .hero.hero--hub .hero-orbit__item--fanvue{left:92%;top:55%}
  .hero.hero--hub .hero-orbit__item--tg{left:80%;top:84%}
}
@media(max-width:720px){
  .container{width:calc(100% - 32px)}
  .header .nav a{font-size:14px}
  /* На телефоне текст над снимком: кнопки остаются рядами (а не одной
     колонкой, как у соседних страниц) — «Начать работу» и пара плашек.
     Плитки — только в нижней полосе, где под текстом остаётся картинка. */
  .hero.hero--hub .hero__actions{flex-direction:row}
  .hero.hero--hub .hero-orbit__item{--s:54px}
  .hero.hero--hub .hero-orbit__item--of{left:5%;top:auto;bottom:170px}
  .hero.hero--hub .hero-orbit__item--fansly{left:30%;top:auto;bottom:50px}
  .hero.hero--hub .hero-orbit__item--fanvue{left:auto;right:32%;top:auto;bottom:200px}
  .hero.hero--hub .hero-orbit__item--tg{left:auto;right:6%;top:auto;bottom:120px}
}
@media(max-width:380px){
  .hero.hero--hub .hero__actions .nh-dl{padding-inline:10px}
  .hero.hero--hub .hero__actions .nh-dl svg{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}