/* ============================================================================
 * GOLDJAXE · ECOSYSTEM SHELL · единая оболочка экосистемы (header + footer)
 * ============================================================================
 * Назначение: единый хедер-навигатор + футер-триада для ВСЕХ экранов
 * экосистемы (двойник blueprint/public · команда team · ЕРП blueprint/erp),
 * чтобы клиент ощущал одну среду и мог переходить между средами.
 *
 * Эталон: canonical/landings/ai.html (хедер .ai-header + footer triad).
 * Значения 1-в-1 с canonical: 77px · cube 44 · Space Mono 17.5 · gold #EBC554.
 * Namespace `ecs-*` — изолирован от ai-* / team-* / pt-* / erp-* (без коллизий).
 *
 * Оболочка ТЁМНАЯ в обеих темах (header + footer immutable dark, как у .ai).
 * Светлеет только тело инструмента. Шрифты — из tokens/fonts.css (линкуется
 * на каждом экране). Theme-btn работает через общий [data-theme-toggle].
 *
 * Owner: goldjaxe-designer (Brand OS v3 · тип 3 CSS). v1.0.0 · 2026-06-01.
 * ============================================================================ */

/* ─────────────────────────  HEADER  ───────────────────────── */
.ecs-header {
  height: 77px;
  background: rgba(18,18,22,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  z-index: 60;
}
.ecs-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 20px;
}
.ecs-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  text-decoration: none;
  flex-shrink: 0;
}
.ecs-cube {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 11px rgba(235,197,84,0.35));
  transition: filter 350ms ease;
}
.ecs-logo:hover .ecs-cube {
  filter: drop-shadow(0 0 18px rgba(235,197,84,0.55)) drop-shadow(0 0 32px rgba(235,197,84,0.18));
}
.ecs-wordmark {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 17.5px;
  letter-spacing: 0.07em;
  line-height: 1;
}
.ecs-wordmark .gold { color: #EBC554; }
.ecs-wordmark .br   { color: #FFFFFF; }
.ecs-subline {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.13em;
  color: rgba(255,255,255,0.60);
  margin-top: 5px;
  line-height: 1;
  text-transform: uppercase;
}

/* nav — переходы между средами экосистемы */
.ecs-nav {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: auto;
}
.ecs-nav-link {
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: 12.5px;
  white-space: nowrap;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.70);
  text-transform: uppercase;
  padding: 0 13px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  position: relative;
  transition: color 250ms ease;
}
.ecs-nav-link::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 0;
  height: 1px;
  background: #EBC554;
  box-shadow: 0 0 6px #EBC554, 0 0 12px rgba(235,197,84,0.55);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 280ms ease;
}
.ecs-nav-link:hover { color: #EBC554; }
.ecs-nav-link:hover::after { transform: scaleX(1); }
.ecs-nav-link.is-active { color: #EBC554; }
.ecs-nav-link.is-active::after { transform: scaleX(1); }
.ecs-nav-link .ext { color: rgba(255,255,255,0.40); font-size: 11px; }

/* tools — lang + theme (lang опционален: вставляется на i18n-экранах) */
.ecs-tools {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.ecs-lang {
  display: flex;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
}
.ecs-lang-btn {
  width: 42px;
  height: 34px;
  font-family: 'Space Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.10em;
  background: transparent;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  transition: all 200ms ease;
}
.ecs-lang-btn.is-active { background: #EBC554; color: #080808; }
.ecs-lang-btn:not(.is-active):hover { color: #EBC554; background: rgba(235,197,84,0.05); }
.ecs-theme-btn {
  width: 38px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  color: #FFFFFF;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
}
.ecs-theme-btn:hover { color: #EBC554; border-color: rgba(235,197,84,0.40); }

/* ─── Бургер + мобильная панель (≤1080px · навигатор экосистемы на узких — закрывает дыру display:none у .ecs-nav). Эталон-источник: .ai-burger/.ai-mobile-menu в canonical/landings/ai.html v4.135. Кнопку + панель строит инжектор shared/ecosystem-nav.js из того же ITEMS (единый источник состава). ─── */
.ecs-burger {
  width: 38px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  display: none;            /* desktop: скрыт; ≤1080 включается в media ниже */
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
}
.ecs-burger:hover { color: #EBC554; border-color: rgba(235,197,84,0.40); }
.ecs-burger .ecs-burger-x { display: none; }
.ecs-burger.is-open .ecs-burger-bars { display: none; }
.ecs-burger.is-open .ecs-burger-x { display: inline-flex; }
.ecs-mobile-menu {
  position: fixed;
  top: 77px;
  left: 0; right: 0;
  display: none;            /* desktop: вне потока; ≤1080 → block (но скрыта visibility/opacity пока не .is-open) */
  background: rgba(12,12,15,0.98);   /* immutable dark в ОБЕИХ темах, как оболочка */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  transform: translateY(-14px);
  opacity: 0;
  visibility: hidden;
  transition: transform 260ms ease, opacity 260ms ease, visibility 260ms;
  z-index: 70;              /* поверх viewbar(59) и контента, dropdown из-под хедера */
  max-height: calc(100vh - 77px);
  overflow-y: auto;
}
.ecs-mobile-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.ecs-mobile-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 22px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 200ms ease, background 200ms ease, padding-left 200ms ease;
}
.ecs-mobile-link:hover { color: #EBC554; background: rgba(235,197,84,0.05); padding-left: 28px; }
.ecs-mobile-link.is-active { color: #EBC554; }
.ecs-mobile-link .ext { color: rgba(255,255,255,0.40); font-size: 12px; }

/* ─────────────────────────  VIEW-BAR (secondary tabs — режимы инструмента)  ───────────────────────── */
/* Тонкая вторичная полоса под хедером: переключение видов одного инструмента
   (Иерархия / Орбита / … для команды · пульты для двойника/ЕРП). Отделена от
   ecosystem-nav: верх = «где я в холдинге», эта полоса = «как смотрю инструмент». */
.ecs-viewbar {
  height: 47px;
  background: rgba(12,12,15,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 77px;
  z-index: 59;
}
.ecs-viewbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 20px;
}
.ecs-viewbar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  margin-right: 16px;
  white-space: nowrap;
}
.ecs-viewtab {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  padding: 0 13px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
  transition: color 200ms ease;
}
.ecs-viewtab::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 0;
  height: 1px;
  background: #EBC554;
  box-shadow: 0 0 6px #EBC554, 0 0 12px rgba(235,197,84,0.55);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 240ms ease;
}
.ecs-viewtab:hover { color: #EBC554; }
.ecs-viewtab:hover::after { transform: scaleX(1); }
.ecs-viewtab.is-active { color: #EBC554; }
.ecs-viewtab.is-active::after { transform: scaleX(1); }
@media (max-width: 900px) {
  .ecs-viewbar-label { display: none; }
  .ecs-viewbar-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ─────────────────────────  FOOTER-BAR (узкая строка-статус, как статбар двойника)  ───────────────────────── */
/* Тонкий унифицированный футер для контентных экранов команды (variant-c/d/e):
   1 строка ~34px, immutable dark, не режется. Заменяет разнобой «срезанных низов».
   Структура: слева бренд/контекст · справа meta. Namespace ecs-foot-*. */
.ecs-footer-bar {
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  background: rgba(10,10,12,0.96);
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  position: sticky;
  bottom: 0;
  z-index: 58;
}
.ecs-footer-bar > div { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ecs-footer-bar .ecs-foot-accent { color: #EBC554; white-space: nowrap; }
.ecs-footer-bar .ecs-foot-sep { color: rgba(255,255,255,0.18); }
.ecs-footer-bar .ecs-foot-dim { color: rgba(255,255,255,0.30); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecs-footer-bar a,
.ecs-footer-bar a:link,
.ecs-footer-bar a:visited { color: rgba(255,255,255,0.40); text-decoration: none; transition: color 200ms ease; white-space: nowrap; }
.ecs-footer-bar a:hover { color: #EBC554; }
@media (max-width: 720px) {
  .ecs-footer-bar { font-size: 10px; padding: 0 12px; gap: 10px; }
  .ecs-footer-bar .ecs-foot-hide-sm { display: none; }
}

/* ─────────────────────────  FOOTER (marketing dark)  ───────────────────────── */
.ecs-footer {
  border-top: 1px solid #1A1A1A;
  background: #0A0A0A;
}
.ecs-triad { border-bottom: 1px solid #1A1A1A; }
.ecs-triad-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
}
.ecs-tile {
  position: relative;
  display: block;
  padding: 16px 24px;
  background: #181818;
  text-decoration: none;
  transition: transform .5s ease, box-shadow .5s ease, background .5s ease;
  --ecs-tr: 235; --ecs-tg: 197; --ecs-tb: 84;
}
.ecs-tile:hover {
  background: rgba(255,255,255,0.04);
  transform: translateY(-3px);
  box-shadow: 0 0 24px rgba(var(--ecs-tr),var(--ecs-tg),var(--ecs-tb),0.50),
              0 0 48px rgba(var(--ecs-tr),var(--ecs-tg),var(--ecs-tb),0.25),
              inset 0 0 24px rgba(var(--ecs-tr),var(--ecs-tg),var(--ecs-tb),0.08);
}
.ecs-tile-com { --ecs-tr: 196; --ecs-tg: 77;  --ecs-tb: 255; }
.ecs-tile-ai  { --ecs-tr: 235; --ecs-tg: 197; --ecs-tb: 84;  }
.ecs-tile-org { --ecs-tr: 139; --ecs-tg: 0;   --ecs-tb: 0;   }
.ecs-tile-caption {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  margin-bottom: 10px;
  line-height: 1;
}
.ecs-tile-wordmark {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  margin-bottom: 12px;
  line-height: 1;
}
.ecs-tile-wordmark .br { color: rgba(255,255,255,0.35); }
.ecs-tile-desc {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.60);
  margin: 0;
}
/* current-location marker (top amber glow + pulsing dot) */
.ecs-current { background: linear-gradient(180deg, rgba(235,197,84,0.06) 0%, rgba(8,8,8,0) 100%) !important; }
.ecs-current::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #EBC554 20%, #EBC554 80%, transparent);
  box-shadow: 0 0 12px rgba(235,197,84,0.70), 0 0 24px rgba(235,197,84,0.30);
}
.ecs-current-dot {
  position: absolute;
  top: 14px; right: 14px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #EBC554;
  box-shadow: 0 0 8px #EBC554, 0 0 16px rgba(235,197,84,0.50);
  animation: ecs-pulse 2s ease-in-out infinite;
}
@keyframes ecs-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* mid row — brand + social */
.ecs-footer-mid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.ecs-footer-brand { display: flex; flex-direction: column; gap: 8px; }
.ecs-footer-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.ecs-footer-logo .ecs-cube { width: 44px; height: 44px; }
.ecs-foot-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
}
.ecs-social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ecs-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.70);
  transition: all 200ms ease;
}
.ecs-social a:hover { border-color: #EBC554; color: #EBC554; box-shadow: 0 0 10px rgba(235,197,84,0.35); }

/* legal + requisites */
.ecs-footer-legal { border-top: 1px solid #1A1A1A; }
.ecs-legal-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ecs-legal-inner > div { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ecs-legal-inner,
.ecs-legal-inner a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  text-decoration: none;
}
.ecs-legal-inner a { transition: color 200ms ease; }
.ecs-legal-inner a:hover { color: #EBC554; }
.ecs-footer-ip {
  border-top: 1px solid #1A1A1A;
  text-align: center;
  padding: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.30);
}
.ecs-footer-ip .sep { color: #525252; margin: 0 8px; }

/* ─────────────────────────  RESPONSIVE  ───────────────────────── */
@media (max-width: 1080px) {
  .ecs-nav { display: none; }
  .ecs-burger { display: inline-flex; }   /* замена исчезнувшему ecs-nav */
  .ecs-mobile-menu { display: block; }     /* в потоке (visibility/opacity держат закрытой до .is-open) */
  .ecs-inner { gap: 14px; }
}
@media (max-width: 720px) {
  .ecs-triad-grid { grid-template-columns: 1fr; }
  .ecs-footer-mid { flex-direction: column; align-items: flex-start; }
  .ecs-legal-inner { flex-direction: column; align-items: flex-start; }
}