/* =============================================================
   modern.css — современный премиальный слой оформления
   Лаборатория экспертных исследований
   Подключается ПОСЛЕДНИМ, переопределяет theme.min.css / min.css.
   Принцип: ничего не удаляем из разметки и контента — только
   переопределяем визуальный слой и добавляем интерактив.
   ============================================================= */

:root {
  --navy-900: #0c1228;
  --navy-800: #131b3d;
  --navy:     #1d254b;   /* фирменный */
  --navy-700: #232c57;
  --navy-600: #2c376a;
  --accent:   #c9a86a;   /* золото / шампань */
  --accent-2: #e3c98c;
  --accent-soft: rgba(201,168,106,.16);

  --ink:    #1a1f33;
  --muted:  #5b6276;
  --surface: #ffffff;
  --surface-2: #f4f6fb;
  --surface-3: #eef1f8;
  --line: rgba(29,37,75,.12);
  --line-strong: rgba(29,37,75,.22);

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(13,19,48,.06);
  --shadow:    0 14px 40px rgba(13,19,48,.12);
  --shadow-lg: 0 30px 70px rgba(13,19,48,.22);
  --ease: cubic-bezier(.22,1,.36,1);

  --maxw: 1200px;
}

/* ---------- База / типографика ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.body,
body {
  color: var(--ink);
  background-color: var(--surface);
  text-align: left;               /* убираем justify — современнее и читабельнее */
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

p { text-align: left; }
/* Сброс justify темы в основных текстовых секциях — современнее и читаемее.
   Бьём только по параграфам, центрированные заголовки/блоки не затрагиваем. */
.gl-ab p, .gl-bl p, .gl-k p, .gl-st p, .gl-sotr p,
.metod p, .metod2 p, .faq p, .intro p, .intro_2 p,
.entries p, .card p, .filter-item p { text-align: left; }

/* Цвета заголовков НЕ переопределяем глобально — тема задаёт корректный
   контраст по секциям (белый на тёмном, тёмный на светлом). Меняем только
   точечно там, где это безопасно (hero, карточки, формы — см. ниже). */

::selection { background: var(--accent); color: #fff; }

img { max-width: 100%; height: auto; }

a { transition: color .25s var(--ease); }

/* Аккуратные кастомные скроллбары */
* { scrollbar-color: var(--navy-600) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--navy-600); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

.container { max-width: var(--maxw); width: 100%; }

/* ---------- Контейнерные секции: ритм / отступы ---------- */
section { position: relative; }
.intro, .intro_2, .personnel, .uslugi, .pogr,
.gl-k, .gl-st, .gl-bl, .gl-sotr, .metod, .metod2, .faq, .anoth, .case_u {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* Тонкая «премиум» подложка вместо плоского фона */
.dotted-bg, .personnel.dotted-bg, .uslugi.dotted-bg, .pogr.dotted-bg {
  background-image:
    radial-gradient(1100px 480px at 12% -10%, rgba(201,168,106,.10), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(44,55,106,.45), transparent 55%);
}

/* ====================================================================
   КНОПКИ
   ==================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  color: var(--navy);
  cursor: pointer;
  text-decoration: none;
  transition: transform .3s var(--ease), filter .3s var(--ease), color .3s var(--ease);
}
.button:hover { transform: translateX(2px); }

/* Круглый «значок-стрелка» — подсвечиваем акцентом */
.button span.icon.arrow,
.intro .button span.icon.arrow,
.intro_2 .button span.icon.arrow,
.item .button span.icon.arrow,
.foot .button span.icon.arrow {
  border: 2px solid var(--accent);
  background: transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.button:hover span.icon.arrow { background: var(--accent); box-shadow: 0 8px 20px rgba(201,168,106,.4); }
.button:hover span.icon.arrow svg { fill: #fff !important; }

/* Кнопки на тёмном фоне (personnel/footer) — белый текст */
.personnel .button, .foot .button, .footer_nav .button,
.ngdialog-content .button { color: #fff; }

/* Пилюли b-nav / b-nav2 / b-s */
.b-nav, .b-nav2 {
  display: inline-block;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  padding: 12px 26px !important;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  transition: all .28s var(--ease);
}
.b-nav:hover, .b-nav2:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
/* Телефон в шапке — акцентная пилюля */
.b-s {
  display: inline-block;
  background: var(--accent) !important;
  color: var(--navy-900) !important;
  border-radius: 999px;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  transition: all .28s var(--ease);
  white-space: nowrap;
}
.header nav .nav-pills > li > a.b-s::after { display: none; }
.b-s:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(201,168,106,.45); }

.cookie_accept { border-radius: 999px !important; }

/* ====================================================================
   ШАПКА / НАВИГАЦИЯ
   ==================================================================== */
.header.transparent_nav {
  height: auto !important;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1050;
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.header.transparent_nav.is-stuck { box-shadow: 0 8px 30px rgba(13,19,48,.10); background: rgba(255,255,255,.94); }

.header .container { padding-top: 10px; padding-bottom: 10px; }

/* Сбрасываем жёсткие inline-проценты ширины через flex (только десктоп,
   чтобы не сломать переключение .nav-d / .nav-m на мобильных) */
@media (min-width: 992px) {
  .header .nav-d.row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 18px;
  }
  .header .nav-d .col-md-2 { width: auto !important; flex: 0 0 auto; padding-right: 0; }
  .header .nav-d .rspnav   { width: auto !important; flex: 1 1 auto; }
  .header .nav-d .col-md-1 { width: auto !important; flex: 0 0 auto; margin-top: 0 !important; }
}

.header .logo img { max-height: 56px; width: auto; }

.city { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.city a { color: var(--muted); font-weight: 600; cursor: pointer; border-bottom: 1px dashed var(--line-strong); }
.city a:hover { color: var(--navy); }
.city .fa-map-marker { color: var(--accent); }

.header nav.collnav .nav-pills {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}
.header.transparent_nav nav>ul>li>a,
.header nav .nav-pills>li>a {
  position: relative;
  color: var(--navy) !important;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 14px;
  background: transparent !important;
  border-radius: 10px;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.header nav .nav-pills>li>a:not(.b-s)::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.header nav .nav-pills>li>a:not(.b-s):hover::after { transform: scaleX(1); }
.header nav .nav-pills>li>a:not(.b-s):hover { color: var(--navy) !important; }

/* Кнопка-бургер */
.rspbtn button {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 12px;
  width: 48px; height: 48px;
  font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .25s var(--ease), transform .2s var(--ease);
}
.rspbtn button:hover { background: var(--navy-600); transform: translateY(-1px); }

/* ====================================================================
   HERO (главная — .gl-b) и верхние блоки страниц
   ==================================================================== */
.gl-b {
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(44,55,106,.55), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy) 60%, var(--navy-700));
  color: #fff;
  padding: 70px 0 40px;
  overflow: hidden;
}
.gl-b h1 { color: #fff; letter-spacing: .5px; }
.gl-b h1 span { color: #fff; }
.gl-b p, .gl-b h3, .gl-b h3 span { color: rgba(255,255,255,.88); }
.gl-b p b { color: var(--accent-2); }
.gl-b .icon svg path { fill: var(--accent); }

/* Тёмные hero внутренних страниц. ВАЖНО: только те секции, что в теме
   действительно тёмные (.gl-st = #1d254b, .gl-sotr = тёмный оверлей).
   .gl-ab / .gl-bl / .gl-k — СВЕТЛЫЕ секции (тёмный текст) — НЕ трогаем. */
.gl-sotr, .gl-st {
  background: linear-gradient(160deg, var(--navy-900), var(--navy) 70%);
  color: #fff;
  padding-top: 56px; padding-bottom: 56px;
}
.gl-sotr h1, .gl-st h1,
.gl-sotr p, .gl-st p { color: #fff; }

/* ====================================================================
   INTRO блоки
   ==================================================================== */
.intro .text-left p, .intro_2 .text-left p { color: var(--ink); font-size: 18px; }
.intro_2 { background: var(--surface-2); }

/* ====================================================================
   «Процессы с нашим участием» (тёмная секция .personnel) + карточки кейсов
   ==================================================================== */
.personnel { background: linear-gradient(165deg, var(--navy-900), var(--navy) 75%) !important; }
.personnel h2 { color: #fff; }

.it-cnt {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 26px 24px;
  height: 100%;
  backdrop-filter: blur(4px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.it-cnt:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.07);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.it-cnt h4 { color: #fff; font-weight: 700; margin-bottom: 14px; min-height: 56px; }
.it-cnt p { color: rgba(255,255,255,.72); margin: 0; }
.it-cnt p b { color: var(--accent-2); }
.it-cnt > a:not(.button) { color: var(--accent-2); font-weight: 600; }
.it-cnt hr { border-top: 1px solid rgba(255,255,255,.15); }

/* Стрелки каруселей */
.prev span.icon, .next span.icon { border: 2px solid rgba(255,255,255,.35) !important; transition: all .3s var(--ease); cursor: pointer; }
.prev:hover span.icon, .next:hover span.icon { border-color: var(--accent) !important; background: var(--accent); }
.prev:hover span.icon svg, .next:hover span.icon svg { fill: var(--navy-900) !important; }

/* ====================================================================
   КАРТОЧКИ услуг / блога / фильтров (на светлом)
   ==================================================================== */
.card, .filter-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  overflow: hidden;
}
.card:hover, .filter-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}
.card h4, .filter-item h4 { color: var(--navy); }

/* Блог-«ленты» */
.entries .entry .title { color: var(--navy); }
.entries .entry .body p { color: var(--muted); }

/* ====================================================================
   «Погружение в проект»
   ==================================================================== */
.sme p { color: var(--ink); font-size: 18px; }
.diamond img { filter: drop-shadow(0 30px 50px rgba(13,19,48,.25)); }

/* ====================================================================
   ФОРМЫ
   ==================================================================== */
.form-control,
#sideform .form-control {
  height: 46px;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: none;
}
.form-control:focus,
#sideform .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  outline: none;
}
.form-group label { color: var(--navy); font-weight: 600; }
.forma h4 { color: var(--navy); font-weight: 700; }

.error { color: #d9534f; font-size: 12px; margin-top: 4px; display: none; }
.success-message {
  display: none;
  background: #eaf7ee;
  color: #1e7a40;
  border: 1px solid #b9e2c6;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  margin-top: 10px;
}

/* ====================================================================
   БОКОВАЯ ФОРМА (sidebar.php: block / klick / leftmenu)
   ==================================================================== */
klick {
  background: var(--navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  box-shadow: -6px 6px 20px rgba(13,19,48,.25);
}
klick:hover { background: var(--accent) !important; color: var(--navy-900) !important; }
.anti { background: var(--navy) !important; color: #fff !important; }
.anti:hover { background: var(--accent) !important; color: var(--navy-900) !important; }
leftmenu {
  background: var(--surface) !important;
  border-left: 4px solid var(--accent) !important;
  border-right: none !important;
  box-shadow: var(--shadow-lg) !important;
}
#sideform .b-nav { border-radius: 999px; background: var(--navy); color: #fff; border-color: var(--navy); }
#sideform .b-nav:hover { background: var(--accent); color: var(--navy-900); border-color: var(--accent); }

/* ====================================================================
   МЕГА-МЕНЮ услуг (ngdialog / menu-map)
   ==================================================================== */
.ngdialog .ngdialog-overlay {
  background: linear-gradient(160deg, var(--navy-900), var(--navy) 80%) !important;
  opacity: .98;
}
.menu-map__head a.no_visited.alt_white { transition: color .25s var(--ease); }
.menu-map__head a.no_visited.alt_white:hover { color: var(--accent-2) !important; }
a.alt_light_white.no_visited:hover { color: #fff !important; }
.main_menu_burger.show .lay { background: var(--accent); }

/* ====================================================================
   МОДАЛКА обратной связи
   ==================================================================== */
.modal__bg { background: rgba(12,18,40,.55) !important; backdrop-filter: blur(6px); }
.modal__content {
  background: #fff !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border-top: 4px solid var(--accent);
}
.modal__content .forma h4, .modal__content h2,
.modal__content label { color: var(--navy) !important; }
.modal__content .b-nav { background: var(--navy); color: #fff; border-color: var(--navy); width: 100%; }
.modal__content .b-nav:hover { background: var(--accent); color: var(--navy-900); border-color: var(--accent); }
.demo-close { background: var(--surface-3); }
.demo-close svg { fill: var(--navy); }
.demo-close:hover { background: var(--accent); }
.demo-close:hover svg { fill: #fff; }

/* Гео-модалка выбора города */
#geo .modal__content {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 28px;
  border-top: 4px solid var(--accent);
}
#geo .forma h4 { color: var(--navy); margin-bottom: 18px; }
#geo .nav-pills { display: flex; flex-wrap: wrap; justify-content: center; }

/* ====================================================================
   ПОДВАЛ
   ==================================================================== */
.footer_nav {
  background: linear-gradient(160deg, var(--navy), var(--navy-900)) !important;
  padding-top: 56px;
  padding-bottom: 24px;
}
.footer_nav h4 { color: #fff; letter-spacing: .3px; }
.footer_nav a, .footer_nav p, .pol-a a { color: rgba(255,255,255,.78) !important; }
.footer_nav a:hover { color: var(--accent-2) !important; }
.footer_nav .b-nav { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.footer_nav .b-nav:hover { background: var(--accent); border-color: var(--accent); color: var(--navy-900); }
.foot { background: var(--navy-900); padding: 34px 0; }

/* ====================================================================
   COOKIE-уведомление
   ==================================================================== */
#cookie_note {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px;
  display: none;
  z-index: 1200;
}
#cookie_note.show { display: block; transform: none !important; animation: cn-up .5s var(--ease); }
#cookie_note p { font-size: 13px; line-height: 1.6; margin-bottom: 10px; }
#cookie_note a { color: var(--navy); font-weight: 600; text-decoration: underline; }
@keyframes cn-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ====================================================================
   КНОПКА «НАВЕРХ»
   ==================================================================== */
#toTop {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: all .35s var(--ease);
  z-index: 1100;
  box-shadow: var(--shadow);
}
#toTop.show { opacity: 1; visibility: visible; transform: none; }
#toTop:hover { background: var(--accent); color: var(--navy-900); }

/* ====================================================================
   SCROLL-REVEAL анимации
   ==================================================================== */
/* Прогрессивное улучшение: эффект включается ТОЛЬКО когда modern.js
   добавил класс .reveal-on на <html>. Без JS / при ошибке — контент виден. */
html.reveal-on .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
html.reveal-on .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.reveal-on .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ====================================================================
   АДАПТИВ / МОБИЛЬНАЯ ВЕРСИЯ
   ==================================================================== */
@media (max-width: 1199px) {
  .header nav .nav-pills>li>a { font-size: 15px; padding: 9px 10px; }
}

@media (max-width: 991px) {
  .intro, .intro_2, .personnel, .uslugi, .pogr,
  .gl-k, .gl-st, .gl-bl, .gl-sotr, .metod, .metod2, .faq { padding-top: 44px; padding-bottom: 44px; }

  /* Мобильное выпадающее меню — панель (сетку .nav-m не трогаем) */
  .header nav.collnav.collapse:not(.in) { display: none; }
  .header nav.collnav.in,
  .header nav.collnav.collapse.in {
    display: block !important;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 8px;
    margin-top: 8px;
  }
  .header nav.collnav .nav-pills { flex-direction: column; align-items: stretch; }
  .header nav.collnav .nav-pills>li { width: 100%; }
  .header nav.collnav .nav-pills>li>a {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border-bottom: 1px solid var(--line);
  }
  .header nav.collnav .nav-pills>li>a:not(.b-s)::after { display: none; }
  .header nav.collnav .nav-pills>li:last-child { margin-top: 8px; text-align: center; }
  .b-s { display: inline-block; }

  .gl-b { padding: 48px 0 32px; }
  .it-cnt h4 { min-height: auto; }
}

@media (max-width: 767px) {
  body, body.body { font-size: 15px; }
  .intro .text-left p, .intro_2 .text-left p, .sme p { font-size: 16px; }
  .intro_2 .text-left p[style] { font-size: 18px !important; }
  #toTop { right: 14px; bottom: 14px; width: 44px; height: 44px; }
  .footer_nav { text-align: center; }
  .footer_nav .col-md-3, .footer_nav .col-md-4, .footer_nav .col-md-2 { margin-bottom: 28px; }
  .footer_nav nav.collfnav { float: none !important; }
}

/* Уважаем фиксированную высоту шапки в старых inline-стилях — сбрасываем */
.header[style] { height: auto !important; }