/* ═══════════════════════════════════════════════════════════════
   ГОРОНО · Brand Collar + Footer · статическая копия с балалайки
   Утверждено 17.04.2026 — navy + gold, Fraunces + Inter.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --brand-navy: #0B1D3A;
  --brand-accent: #C4993C;
  --brand-f-display: 'Fraunces', 'Times New Roman', serif;
  --brand-f-body: 'Inter', system-ui, -apple-system, sans-serif;
  --brand-f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ─── Collar ─────────────────────────────────────────────── */
.brand-collar {
  background: var(--brand-navy);
  border-bottom: 2px solid var(--brand-accent);
  box-shadow: 0 4px 12px rgba(11,29,58,.08);
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  font-family: var(--brand-f-body);
}
/* отступ под якорь, чтобы sticky-collar не закрывал заголовок секции */
:where(section[id], h2[id], h1[id], div[id], aside[id]) {
  scroll-margin-top: 90px;
}
.brand-collar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(196,153,60,0) 0%,
    var(--brand-accent) 30%,
    var(--brand-accent) 70%,
    rgba(196,153,60,0) 100%);
}
.brand-collar__inner {
  max-width: clamp(1100px, 92vw, 1520px); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  /* Защита от overflow flex-children: позволяем сжиматься, считаем box по border. */
  min-width: 0;
  box-sizing: border-box;
}
@media (max-width: 1100px) { .brand-collar__inner { max-width: 100%; } }
.brand-collar__brand {
  display: flex; align-items: center; gap: 14px; flex-shrink: 1;
  min-width: 0;
  text-decoration: none;
}
.brand-collar__text { display: flex; flex-direction: column; gap: 2px; }
.brand-collar__name {
  font-family: var(--brand-f-display);
  font-weight: 600; font-size: 22px;
  color: #F5E9C8; letter-spacing: 2.2px;
}
.brand-collar__tag {
  font-family: var(--brand-f-display);
  font-size: 14px; color: rgba(245,233,200,0.78);
  letter-spacing: .3px; font-style: italic;
  font-weight: 400;
}
.brand-collar__nav {
  display: flex; align-items: center; gap: 6px;
  flex: 1; justify-content: center;
}
.brand-collar__nav a {
  padding: 8px 16px;
  color: rgba(245,233,200,0.85);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 100px;
  transition: all .15s;
  white-space: nowrap;
}
.brand-collar__nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.brand-collar__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; }
.brand-collar__right .brand-lk {
  padding: 8px 18px;
  /* Светлый cream-white фон + navy текст + тонкий gold-border —
     по запросу пользователя «не золотые зубы», бренд-акцент сохраняется как контур. */
  background: var(--brand-bg, #F8F7F4);
  color: var(--brand-navy);
  border: 1px solid var(--brand-accent);
  font-weight: 600; font-size: 13px;
  border-radius: 100px;
  text-decoration: none;
  letter-spacing: .02em;
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.brand-collar__right .brand-lk:hover { background: #FFFFFF; border-color: #D4A84D; transform: translateY(-1px); }
@media (max-width: 960px) { .brand-collar__nav { display: none; } }
@media (max-width: 720px) {
  .brand-collar { padding: 12px 14px 13px; }
  .brand-collar__name { font-size: 15px; }
}

/* ─── Logo breathing ─────────────────────────────────────
   Возвращена 2026-05-09 по запросу Вадима — это «мерцание» логотипа,
   часть бренда. Она НЕ вызывала мерцание страниц при прокрутке. */
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-logo img { width: 100%; height: 100%; display: block; }
.brand-logo--breathing { animation: brandLogoBreathe 4.5s ease-in-out infinite; }
.brand-logo--static,
.brand-logo--breathing {
  filter:
    drop-shadow(0 0 14px rgba(196,153,60,0.35))
    drop-shadow(0 0 2px rgba(255,214,120,0.6))
    drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
@keyframes brandLogoBreathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 12px rgba(196,153,60,0.30))
      drop-shadow(0 0 2px rgba(255,214,120,0.55))
      drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  }
  50% {
    filter:
      drop-shadow(0 0 20px rgba(196,153,60,0.55))
      drop-shadow(0 0 4px rgba(255,214,120,0.85))
      drop-shadow(0 2px 8px rgba(0,0,0,0.45));
  }
}

/* ─── Footer ───────────────────────────────────────────── */
.brand-footer {
  background: var(--brand-navy);
  color: rgba(255,255,255,.55);
  padding: clamp(28px, 3.5vw, 44px) 24px 24px;
  font-family: var(--brand-f-body);
}
.brand-footer__inner { max-width: clamp(1100px, 92vw, 1520px); margin: 0 auto; }
@media (max-width: 1100px) { .brand-footer__inner { max-width: 100%; } }
.brand-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
}
@media (max-width: 720px) { .brand-footer__grid { grid-template-columns: 1fr; gap: 24px; } }

.brand-footer__logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; margin-bottom: 12px;
}
.brand-footer__logo-mark {
  width: 36px; height: 36px;
  filter: drop-shadow(0 0 10px rgba(196,153,60,.4));
  flex-shrink: 0;
}
.brand-footer__logo-mark img { width: 100%; height: 100%; }
.brand-footer__logo-text {
  font-family: var(--brand-f-display);
  font-weight: 600; font-size: 18px;
  color: #fff; letter-spacing: 2px;
  display: block; line-height: 1.1;
}
.brand-footer__copy {
  font-family: var(--brand-f-mono);
  font-size: 10px;
  color: rgba(255,255,255,.25);
  letter-spacing: .4px;
  display: block;
  margin-top: 2px;
}
.brand-footer__brand p {
  font-size: 13px; color: rgba(255,255,255,.4);
  line-height: 1.6; max-width: 340px; margin: 10px 0 0;
}
.brand-footer__col-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.35);
  margin: 0 0 14px; line-height: 1.2;
}
.brand-footer__links { display: flex; flex-direction: column; gap: 9px; }
.brand-footer__links a {
  font-size: 13px; color: rgba(255,255,255,.55);
  display: flex; align-items: center; gap: 8px;
  transition: color .2s; text-decoration: none;
}
.brand-footer__links a:hover { color: #fff; }
.brand-footer__links a svg { width: 14px; height: 14px; opacity: .5; flex-shrink: 0; }

/* ─── Phone в шапке (адаптация для гуслей) ─── */
.brand-phone {
  font-family: var(--brand-f-mono);
  font-size: 13px;
  color: rgba(245,233,200,0.85);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: .02em;
  transition: color .15s;
}
.brand-phone:hover { color: var(--brand-accent); }
@media (max-width: 1100px) { .brand-phone { display: none; } }

/* ─── Footer 4-column compact override ─── */
.brand-footer__grid--4col {
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
.brand-footer__slogan {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  line-height: 1.5;
  max-width: 320px;
  margin: 10px 0 0;
}
@media (max-width: 960px) {
  .brand-footer__grid--4col { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .brand-footer__grid--4col { grid-template-columns: 1fr; }
}

/* ─── ЛК — square-rounded стандарт балалайки (8px) вместо pill ─── */
.brand-collar__right .brand-lk {
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  letter-spacing: .015em;
}
.brand-phone {
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* ─── Hero CTA pair: симметричные кнопки одной ширины ─── */
.hero-cta-pair {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 720px;
}
.hero-cta-pair__btn {
  flex: 1 1 320px;
  min-height: 64px;
  text-align: center;
  justify-content: center;
  line-height: 1.25;
  white-space: normal;
}
@media (max-width: 560px) {
  .hero-cta-pair__btn { flex: 1 1 100%; }
}

/* ─── Sticky compact-state УДАЛЕН 2026-05-09 — caused flicker ───
   Эффект ужатия шапки при scroll > 24px вызывал мерцание на всех страницах.
   См. handoff 2026-05-09-architecture-flicker-decision.md.
   Шапка теперь фиксированной высоты независимо от прокрутки. */
.brand-collar__tag {
  display: block;
}

/* На viewports < 1280px клэмп max-width на .brand-collar__inner упирается
   в min 1100px (т.к. 92vw становится меньше 1100). Полный набор
   логотип+имя+слоган+nav+телефон+ЛК ≈ 1111px и не влезает в 1100 →
   ЛК-кнопку выдавливает за правый край. Скрываем слоган-тэглайн.
   Правило ниже scroll-shrink, чтобы перебить unconditional display: block. */
@media (max-width: 1279px) {
  .brand-collar__tag { display: none; }
}

/* ─── Hero 3D background ───
   Canvas заполняет всю hero-секцию (фон), контент над ним через z-index.
   Маска убрана: 3D виден везде с opacity 0.55. */
.hero-section { position: relative; isolation: isolate; }
.hero-3d-bg {
  /* Вытаскиваем canvas из wrap-rect (max-width 1240px) — на всю ширину viewport.
     На широких мониторах сцена не «обрывается» границами секции. */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  /* drop-shadow на canvas — тёмное свечение видно на светлом bg */
  filter:
    drop-shadow(0 0 28px rgba(11, 29, 58, 0.22))
    drop-shadow(0 0 8px rgba(11, 29, 58, 0.18));
}
.hero-3d-bg canvas {
  filter:
    drop-shadow(0 0 18px rgba(196, 153, 60, 0.3))
    drop-shadow(0 0 4px rgba(122, 101, 48, 0.4));
}
/* мягкий fade на левой половине, чтобы текст hero оставался читаемым */
.hero-3d-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-bg) 0%, rgba(248,247,244,.92) 30%, rgba(248,247,244,.55) 55%, transparent 80%);
  pointer-events: none;
}

/* ─── Hero metrics strip ─── */
.hero-metrics-strip {
  border-top: 1px solid var(--color-rule, #E8E4D8);
  border-bottom: 1px solid var(--color-rule, #E8E4D8);
  background: var(--color-bg, #F8F7F4);
  padding: 24px 0;
}
.hero-metrics-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
}
@media (max-width: 720px) {
  .hero-metrics-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
.hero-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 2px solid var(--color-accent, #C4993C);
  padding-left: 14px;
}
.hero-metric__value {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  line-height: 1;
  color: var(--color-navy, #0B1D3A);
}
.hero-metric__label {
  font-size: 13px;
  color: var(--color-muted, #6E6A60);
  line-height: 1.35;
}
.hero-section > *:not(.hero-3d-bg) { position: relative; z-index: 1; }
@media (max-width: 900px) {
  /* на мобиле прячем — экран узкий, текст и так заполняет всё */
  .hero-3d-bg { display: none; }
}

/* ─── Cookie banner (152-ФЗ + GDPR совместимый) ─── */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 100;
  background: var(--brand-navy);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(245,233,200,.15);
  border-radius: 10px;
  box-shadow: 0 18px 48px -12px rgba(11,29,58,.55);
  padding: 18px 22px;
  font-family: var(--brand-f-body);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 720px) {
  .cookie-banner { left: auto; right: 24px; bottom: 24px; }
}
.cookie-banner__inner { display: flex; flex-direction: column; gap: 14px; }
.cookie-banner__title {
  font-family: var(--brand-f-display);
  font-size: 18px; font-weight: 600; color: #F5E9C8;
  margin: 0;
}
.cookie-banner__desc {
  font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.7);
  margin: 0;
}
.cookie-banner__link { color: var(--brand-accent); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__link:hover { color: #E5C685; }

.cookie-banner__settings {
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 12px 0;
  max-height: 280px; overflow-y: auto;
}
.cookie-cat {
  display: flex; gap: 12px; align-items: flex-start;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background .15s;
}
.cookie-cat:hover { background: rgba(255,255,255,.04); }
.cookie-cat--locked { cursor: default; opacity: .85; }
.cookie-cat input { margin-top: 4px; accent-color: var(--brand-accent); width: 16px; height: 16px; flex-shrink: 0; }
.cookie-cat__title {
  font-size: 13px; font-weight: 600; color: #F5E9C8;
  display: flex; align-items: center; gap: 8px;
}
.cookie-cat__lock {
  font-family: var(--brand-f-mono); font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(245,233,200,.5);
  padding: 2px 6px; border: 1px solid rgba(245,233,200,.25); border-radius: 3px;
}
.cookie-cat__desc {
  font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.45;
  margin-top: 3px;
}

.cookie-banner__actions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
}
.btn--cookie {
  font-size: 12px !important;
  padding: 8px 14px !important;
  min-height: 0 !important;
}
.cookie-banner .btn-ghost {
  background: rgba(255,255,255,.06);
  color: rgba(245,233,200,.85);
  border: 1px solid rgba(245,233,200,.18);
}
.cookie-banner .btn-ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(245,233,200,.4);
  color: #F5E9C8;
}

/* footer btn (как ссылка) */
.brand-footer__btn {
  background: none; border: none; padding: 0;
  font-size: 13px; color: rgba(255,255,255,.55);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: color .2s;
}
.brand-footer__btn:hover { color: #fff; }

/* ─── Override legacy legal-brand.css ─── */
/* legal-brand.css имеет `footer a { color: var(--accent) !important; }` —
   это ломает подвал на правовых страницах. Возвращаем единый стиль с главной. */
.brand-footer a,
.brand-footer .brand-footer__links a {
  color: rgba(255,255,255,.55) !important;
  font-family: var(--brand-f-body) !important;
  font-weight: 400 !important;
}
.brand-footer a:hover,
.brand-footer .brand-footer__links a:hover {
  color: #fff !important;
}
.brand-footer .brand-footer__logo-text {
  font-family: var(--brand-f-display) !important;
  color: #fff !important;
}
.brand-footer .brand-footer__copy {
  font-family: var(--brand-f-mono) !important;
  color: rgba(255,255,255,.25) !important;
}
.brand-footer .brand-footer__col-title {
  color: rgba(255,255,255,.35) !important;
  font-family: var(--brand-f-body) !important;
  font-weight: 700 !important;
}
.brand-footer .brand-footer__slogan {
  color: rgba(255,255,255,.4) !important;
  font-family: var(--brand-f-body) !important;
}