/* Neon Ecosystem — shared header structure/behavior. Colors come from each
   page's own :root tokens (--blue, --ink, --line, --muted, --paper) so one
   file drives layout+interaction for every product while each page keeps
   its own theme. */

.header{position:sticky;top:14px;z-index:80}
.header:before{content:"";position:fixed;left:0;top:0;width:var(--scroll-progress,0%);height:2px;background:linear-gradient(90deg,var(--blue),var(--blue2,var(--blue)));z-index:100}
.header__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;height:68px;padding:7px 10px 7px 16px;border:1px solid rgba(29,100,202,.12);border-radius:21px;background:rgba(249,252,255,.78);box-shadow:0 14px 48px rgba(24,70,130,.1),inset 0 1px 0 #fff;backdrop-filter:blur(22px) saturate(150%)}

.menu-toggle{display:none;border:0;background:none;width:34px;cursor:pointer}
.menu-toggle span{display:block;height:2px;background:var(--ink);margin:7px}

.header__panel{display:contents}
.header__nav-group{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}

/* The frosted-glass pill lives on the logo and the actions cluster only -
   the nav buttons in between sit directly on the page, no shared backdrop. */
.header__actions{display:flex;align-items:center;gap:10px;justify-self:end;height:54px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}

.nav{display:flex;align-items:center;gap:12px;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none}
.nav a{padding:10px 18px;border:1px solid var(--line);border-radius:13px;background:transparent;color:#4a5875;font-size:12px;font-weight:750;white-space:nowrap;box-shadow:inset 0 0 0 rgba(9,104,255,0);transition:box-shadow .3s ease,border-color .3s ease,color .3s ease}
.nav a:hover{border-color:rgba(9,104,255,.45);color:var(--blue);box-shadow:inset 0 0 8px rgba(9,104,255,.16)}
.nav a.active{border-color:var(--blue);color:var(--blue);animation:navGlowPulse 2.6s ease-in-out infinite}

@keyframes navGlowPulse{0%,100%{box-shadow:inset 0 0 8px rgba(9,104,255,.16)}50%{box-shadow:inset 0 0 14px rgba(9,104,255,.32)}}

/* Logo doubles as the product switcher: one element, not a logo + a
   separate "Продукты" pill fighting for space on the left. */
.logo-switcher{position:relative;flex:none;justify-self:start;height:54px;display:flex;align-items:center;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.logo-switcher__trigger{display:flex;align-items:center;gap:7px;min-width:0;border:0;border-radius:12px;padding:0 4px;background:none;cursor:pointer;transition:background .2s ease}
.logo-switcher__trigger:hover,.logo-switcher.is-open .logo-switcher__trigger{background:var(--switcher-hover,rgba(228,239,255,.6))}
.logo__brand-wide{display:block;width:218px;height:52px;overflow:hidden;flex:none}
.logo__brand-wide img{display:block;width:218px;max-width:none;height:auto;transform:translateY(-17px)}
/* Per-product lockups (e.g. Neon X's) aren't cropped from the same
   oversized canvas as the Ecosystem wordmark, so they render at their own
   natural width instead of reusing that fixed-width crop. */
.logo__brand-wide.logo__brand-wide--fit{width:auto}
.logo__brand-wide.logo__brand-wide--fit img{width:auto;height:52px;max-width:none;transform:none}
.logo__icon{width:40px;height:40px;object-fit:contain;flex:none}
.logo__icon--chip{display:flex;padding:7px 10px;border-radius:10px;background:#fff;flex:none}
.logo__icon--chip img{width:auto;height:22px}
.logo__type{display:flex;flex-direction:column;line-height:1.06;min-width:0}
.logo__name{font-size:18px;font-weight:850;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.logo__name em{font-style:normal;color:var(--blue)}
.logo__tag{margin-top:2px;font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);opacity:.62;white-space:nowrap}
.logo-switcher__caret{flex:none;font-style:normal;font-size:11px;color:var(--muted);transition:transform .2s ease}
.logo-switcher.is-open .logo-switcher__caret{transform:rotate(180deg)}

/* Меню продуктов выезжает вниз из логотипа: панель раскрывается сверху
   вниз (clip-path), строки съезжают следом с небольшой задержкой. В меню
   только другие продукты, и каждый показан своим логотипом, без подписей. */
.products-menu{position:absolute;left:-6px;top:calc(100% + 16px);z-index:60;display:grid;gap:6px;min-width:262px;padding:10px;border:1px solid rgba(29,100,202,.12);border-radius:20px;background:rgba(249,252,255,.95);backdrop-filter:blur(22px) saturate(150%);box-shadow:0 24px 50px rgba(17,70,140,.16),inset 0 1px 0 #fff;visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0 round 20px);transform:translateY(-8px);transition:clip-path .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1),opacity .2s ease,visibility .45s}
.logo-switcher.is-open .products-menu{visibility:visible;opacity:1;clip-path:inset(0 0 0 0 round 20px);transform:none}
.products-menu__item{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:62px;padding:8px 14px;border:1px solid rgba(29,100,202,.08);border-radius:14px;background:rgba(255,255,255,.72);opacity:0;transform:translateY(-10px);transition:background .2s ease,border-color .2s ease,opacity .3s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.logo-switcher.is-open .products-menu__item{opacity:1;transform:none}
.logo-switcher.is-open .products-menu__item:nth-child(2){transition-delay:0s,0s,.06s,.06s}
.logo-switcher.is-open .products-menu__item:nth-child(3){transition-delay:0s,0s,.12s,.12s}
.products-menu__item:hover,.products-menu__item:focus-visible{background:#fff;border-color:rgba(9,104,255,.28)}
.products-menu__go{flex:none;font-style:normal;font-weight:800;color:var(--blue);opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease}
.products-menu__item:hover .products-menu__go,.products-menu__item:focus-visible .products-menu__go{opacity:1;transform:none}
/* Логотипы внутри меню — чуть меньше, чем в шапке. Словесный знак
   Neon Ecosystem вырезается из того же холста, что и в шапке. */
.products-menu__item .logo__brand-wide{width:186px;height:44px}
.products-menu__item .logo__brand-wide img{width:186px;transform:translateY(-14.5px)}
.products-menu__item .logo__brand-wide--fit{width:auto}
.products-menu__item .logo__brand-wide--fit img{width:auto;height:44px;transform:none}
.products-menu__item .brand-lockup{height:44px}
.products-menu__item .brand-lockup img{width:36px;height:36px}

/* Логотип «значок + надпись» (Neon Hub) — в той же манере, что вывеска
   Neon X: имя продукта крупно, короткая подпись под ним. */
.brand-lockup{display:flex;align-items:center;gap:10px;height:52px;padding-right:4px}
.brand-lockup img{flex:none;width:40px;height:40px;border-radius:11px;object-fit:cover;box-shadow:0 4px 10px rgba(20,62,125,.15)}
.brand-lockup__type{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.brand-lockup b{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:19px;font-weight:850;letter-spacing:-.02em;color:#101a33;white-space:nowrap}
.brand-lockup em{font-style:normal;color:var(--blue)}
.brand-lockup small{margin-top:3px;font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);opacity:.75;white-space:nowrap}

.header__actions .btn--nav{height:38px;padding:0 16px;font-size:12px}
.header__actions [data-auth-actions]{display:contents}

.header-avatar{display:flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 0;border:0;border-radius:10px;background:none;color:#1a2540;font-size:12.5px;font-weight:750;text-decoration:none;white-space:nowrap;transition:color .2s ease,background .2s ease}
.header-avatar:hover{color:var(--blue);background:rgba(9,104,255,.06)}
.header-avatar__pic{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--blue);color:#fff;font-size:11px;font-weight:800}
.header-avatar__pic img{width:100%;height:100%;object-fit:cover}

/* Language picker: a plain rotating globe, no border/background chip and
   no permanent RU/EN label - hovering (or a tap, for touch) reveals a
   proper "Русский / English" menu instead. */
.lang-switch{position:relative;z-index:4}
.lang-switch__trigger{-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:50%;background:none;padding:0;cursor:pointer}
.lang-switch__globe{display:flex;width:23px;height:23px}
.lang-switch__globe svg{width:100%;height:100%;stroke:var(--blue);stroke-width:1.25;fill:none;animation:langGlobeSpin 10s linear infinite}
.lang-switch:hover .lang-switch__globe svg,.lang-switch.is-open .lang-switch__globe svg{animation-duration:2.6s;stroke:var(--blue2,var(--blue))}
@keyframes langGlobeSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.lang-switch__menu{position:absolute;z-index:5;top:100%;left:50%;width:160px;margin-left:-80px;padding-top:10px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease}
.lang-switch:hover .lang-switch__menu,.lang-switch.is-open .lang-switch__menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.lang-switch__menu-inner{padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--card,#fff);box-shadow:0 20px 45px rgba(17,70,140,.16)}
.lang-switch__item{display:block;width:100%;padding:9px 12px;border:0;border-radius:9px;background:none;color:#48546e;font-size:13px;font-weight:650;text-align:left;cursor:pointer;transition:background .16s ease,color .16s ease}
.lang-switch__item:hover{background:rgba(9,104,255,.08);color:var(--blue)}
html:not([lang="en"]) .lang-switch__item[data-lang-option="ru"],
html[lang="en"] .lang-switch__item[data-lang-option="en"]{color:var(--blue);font-weight:800}
.lang-switch__trigger:focus-visible{outline:2px solid rgba(22,111,245,.45);outline-offset:2px}

@media(max-width:1050px){
  .header__nav-group{gap:6px}
  .nav a{padding:9px 11px}
}

@media(max-width:720px){
  .header{top:8px}
  .header__inner{height:60px;display:flex;align-items:center;justify-content:space-between;position:relative}
  .logo-switcher{height:46px;padding:0 10px 0 6px}
  .logo__brand-wide{width:176px;height:44px}
  .logo__brand-wide img{width:184px;transform:translate(-4px,-14px)}
  .logo__brand-wide.logo__brand-wide--fit{width:auto}
  .logo__brand-wide.logo__brand-wide--fit img{width:auto;height:44px;transform:none}
  .menu-toggle{display:block;position:absolute;right:16px;z-index:3}
  .logo__tag{display:none}
  .products-menu{min-width:0;width:min(262px,calc(100vw - 32px))}
  .brand-lockup{height:44px}
  .brand-lockup img{width:34px;height:34px}
  .brand-lockup b{font-size:17px}
  .header__panel{display:none;position:absolute;top:66px;left:16px;right:16px;flex-direction:column;gap:14px;padding:18px;background:var(--card,rgba(255,255,255,.97));border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(17,70,140,.15);z-index:60}
  .header.open .header__panel{display:flex}
  .header__nav-group{flex-direction:column;align-items:stretch;gap:14px;width:100%}
  .nav{display:flex;flex-direction:column;gap:8px;position:static;top:auto;left:auto;right:auto;padding:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none}
  .nav a{text-align:center}
  /* Inside the mobile panel the actions cluster no longer needs its own
     glass pill - the panel already provides the backdrop. */
  .header__actions{flex-direction:column;align-items:stretch;gap:10px;width:100%;height:auto;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none}
  .header__actions .btn--nav{width:100%;height:44px}
  .header__actions .header-avatar{width:100%;height:44px;justify-content:center}
  .lang-switch{align-self:center}
  .lang-switch__menu{left:auto;right:-8px;margin-left:0}
}

@media(prefers-reduced-motion:reduce){
  .products-menu,.products-menu__item,.logo-switcher__caret{transition:none}
  .lang-switch__globe svg{animation:none}
  .nav a.active{animation:none;box-shadow:inset 0 0 10px rgba(9,104,255,.22)}
}