/* Основная тема для «ЦБО Лояль» — Navy + Green (как на картинке) */
:root{
  /* Токены палитры (синхронизированы с includes/config.php) */
  --brand:   #2E8B57; /* зеленая кнопка / CTA */
  --brand-2: #0B3B66; /* navy заголовки/навигация */
  --accent:  #2ED1C4; /* мятный акцент (бейджи/пилюли) */
  --dark:    #111827; /* основной текст */
  --bg-soft: #F2F5F8; /* фон секций */

  /* Bootstrap-переменные, чтобы .btn-primary/.bg-primary/.text-primary стали зелёными */
  --bs-primary:           var(--brand);
  --bs-primary-rgb:       46,139,87;
  --bs-link-color:        var(--brand-2);          /* ссылки — navy */
  --bs-link-hover-color:  var(--brand-2);
  
   --bs-gradient: none;
}

html, body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg-soft);
  color: var(--dark);
}
a { text-decoration: none; color: var(--bs-link-color); }
a:hover { text-decoration: underline; color: var(--bs-link-hover-color); }

/* Заголовки — тёмный navy */
h1,h2,h3,h4,h5 { color: var(--brand-2); }

/* Кнопки (зелёные) */
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover { background: #2f9961; border-color: #2f9961; }
.btn-primary:active { background: #277a50; border-color: #277a50; }

.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Подложки и бейджи под primary — мягкий мятный/зеленоватый */
.bg-primary-subtle,
.badge.bg-primary-subtle { background: rgba(46,139,87,.12) !important; }

/* Карточки/блоки */
.feature-card,
.service-card,
.review-card,
.card { border-radius: 16px; background:#fff; }

.footer { background: var(--brand-2); }

.page-header { background: #F2F5F8; } /* можно оставить светлым для ритма */

/* Текстовые второстепенные */
.small, .text-secondary { color: #667085!important; }

.border-primary { border-color: var(--brand)!important; }
.navbar .btn { border-radius: 10px; }

/* Якоря — корректный отступ под фикс-хедер */
.page-section,
#services, #prices, #cases, #about, #contacts, #policy {
  scroll-margin-top: 90px;
}

/* Навигация: иконки и адаптивность */
.icon-link img { display:block; }
.navbar .btn { border-radius: 10px; }

/* Отзывы */
.review-card .avatar{
  width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center;
}
/* Чек-иконки/галочки — зелёные */
.rating { color:#2E8B57; letter-spacing:2px; }

/* Hero */
.hero { background: linear-gradient(180deg, #EDEFF2 0%, #FFFFFF 100%); } /* лёгкий серо-голубой */
.hero-bg { position:absolute; inset: 0 auto auto 50%; transform: translateX(-50%); width: 1200px; opacity:.18; pointer-events:none; }
.hero-visual { max-width: 520px; }

/* Мобильные отступы */
@media (max-width: 991.98px){
  .hero .display-6 { font-size: 1.75rem; }
  .hero-visual { max-width: 420px; margin-top: 12px; }
  .navbar .btn-sm { padding: .5rem .7rem; }
  .feature-card, .service-card, .review-card { padding: 1.1rem !important; }
}

/* Дублируем scroll-margin для доп. якорей */
#reviews { scroll-margin-top: 90px; }

/* Мобильный хедер */
.site-header { background:#fff; }
.mobile-topbar { border-bottom: 1px solid #eef1f6; background:#fff; }
.mobile-topbar .brand-name { font-weight: 700; color:#0F172A; font-size: 16px; }
.icon-btn, .icon-link { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:#eef4f0; }
.icon-btn img, .icon-link img { pointer-events:none; }
.phone-btn { white-space: nowrap; }

/* Бургер */
.navbar-toggler { padding: .25rem .5rem; font-size: 1.25rem; background: transparent; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,0.8%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar .nav-link { padding: 16px 14px; }

/* Offcanvas menu */
.mnav-offcanvas { width: 100%; max-width: 100%; background:#fff; }
.mnav-offcanvas .offcanvas-header { border-bottom: 1px solid #eef1f6; }
.mnav-list { padding: 12px 0 8px; margin:0; }
.mnav-link {
  display:block; padding:16px; font-size:18px; font-weight:600; border-bottom:1px solid #f1f4f9; color:#0F172A;
}
.mnav-link:active, .mnav-link:focus { background:#2E8B57; } 

/* Touch targets / spacing */
@media (max-width: 991.98px){.hero .display-6 { font-size: 1.7rem; 
}
  .btn { border-radius: 12px; }
}

/* Minor polish */
.icon-btn-lg { display:inline-flex; width:44px; height:44px; border-radius:12px; background:#eef4f0; align-items:center; justify-content:center; }

/* Hero labels mobile fix */
.hero .d-flex.gap-3 { flex-wrap: wrap; row-gap: .5rem; }
.hero .d-flex.gap-3 > div { flex: 1 1 100%; }
@media (min-width: 576px) {
  .hero .d-flex.gap-3 > div { flex: 0 0 auto; }
}

/* Map */
.map-wrap { position: relative; }
#officeMap { width: 100%; height: 360px; border-radius: 16px; overflow: hidden; }
@media (max-width: 575.98px){
  #officeMap { height: 300px; }
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus:active {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 .25rem rgba(46,139,87,.25); /* лёгкий зелёный ховер-ободок */
}

.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:focus:active {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 0 0 .25rem rgba(46,139,87,.25);
}

/* Ровная зелёная кнопка без градиентов */
.btn-green {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
  background-image: none;
}
.btn-green:hover,
.btn-green:focus {
  background-color: #2f9961;   /* чуть темнее при ховере */
  border-color: #2f9961;
  color: #fff;
}
.btn-green:active {
  background-color: #277a50;
  border-color: #277a50;
  color: #fff;
}


/* ==== FIX: Bootstrap-lite collapse + navbar behavior ==== */
.collapse:not(.show){display:none;}
.navbar-collapse{flex-basis:100%; align-items:center;}
.navbar-nav{display:flex; flex-direction:column; padding-left:0; margin-bottom:0; list-style:none;}
.navbar-nav .nav-link{padding:.5rem 1rem;}

/* Toggler */
.navbar-toggler{padding:.25rem .75rem; font-size:1.25rem; background-color:transparent; border:1px solid rgba(0,0,0,.1); border-radius:.375rem; line-height:1;}
.navbar-toggler:focus{outline:0; box-shadow:0 0 0 .25rem rgba(46,139,87,.25);}
.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:100%;}

/* Expand from lg */
@media (min-width: 992px){
  .navbar-expand-lg .navbar-collapse{display:flex !important; flex-basis:auto;}
  .navbar-expand-lg .navbar-nav{flex-direction:row;}
  .navbar-expand-lg .navbar-toggler{display:none;}
}

/* Dropdowns (safe defaults if used) */
.dropdown-menu{position:absolute; z-index:1000; display:none; min-width:10rem; padding:.5rem 0; margin:0; font-size:1rem; color:var(--dark); background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:.5rem;}
.dropdown-menu.show{display:block;}
.dropdown-item{display:block; width:100%; padding:.25rem 1rem; clear:both; color:var(--dark); text-decoration:none; white-space:nowrap;}
.dropdown-item:hover{background:rgba(0,0,0,.03);}

/* Append to assets/css/main.css */

/* ==== NAVBAR LAYOUT FIXES ==== */
/* Ensure navbar and its container are single-row, centered vertically */
.navbar { display: flex; align-items: center; min-height: 64px; }
.navbar > .container, .navbar > .container-fluid { 
  display: flex; align-items: center; gap: .75rem; 
}

/* Brand */
.navbar-brand { display: flex; align-items: center; white-space: nowrap; }
.navbar-brand .brand-logo { height: 36px; width: auto; display: inline-block; }
.navbar-brand .brand-text { font-weight: 700; font-size: 1.125rem; letter-spacing: .2px; }

/* Collapse defaults (mobile closed) */
.collapse:not(.show){ display: none; }
.navbar-collapse { flex-basis: 100%; align-items: center; }
.navbar-nav{ display:flex; flex-direction: column; padding-left:0; margin-bottom:0; list-style:none; }
.navbar-nav .nav-link{ padding:.5rem 1rem; display:block; }

/* Toggler always visible on mobile */
.navbar-toggler{ padding:.25rem .75rem; font-size:1.25rem; background:transparent; border:1px solid rgba(0,0,0,.1); border-radius:.375rem; }
.navbar-toggler-icon{ display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:center;background-size:100%;
}

/* Desktop: single row with menu at the right */
@media (min-width: 992px){
  .navbar-expand-lg .navbar-collapse{ display:flex !important; flex-basis:auto; justify-content: flex-end; }
  .navbar-expand-lg .navbar-nav { flex-direction: row; }
  .navbar-expand-lg .navbar-toggler{ display:none; }
}

/* Make sure header is not hidden on mobile by any global rule */
header, .site-header, .navbar { display:block; }

.section-cards .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
@media (min-width: 992px){
  .section-cards .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
}

/* ровная высота тарифов */
.plan-card .card-body { display:flex; flex-direction:column; }
.plan-card .plan-footer { margin-top:auto; }

/* на всякий случай для единообразия */
.service-card, .review-card { height: 100%; }


/* == Vertical gutters for grid when using Bootstrap-lite == */
.row.g-3 { row-gap: 1rem; }
.row.g-4 { row-gap: 1.5rem; }

/* — Navbar: мелкая доводка — */
.site-navbar .navbar-toggler { border: 1px solid rgba(0,0,0,.1); border-radius: .375rem; }
.site-navbar .navbar-toggler:focus { outline: 0; box-shadow: 0 0 0 .25rem rgba(46,139,87,.25); }

/* Если где-то переопределяли иконку — задаём дефолтную */
.site-navbar .navbar-toggler-icon{
  display:inline-block; width:1.5em; height:1.5em; vertical-align:middle;
  background-repeat:no-repeat; background-position:center; background-size:100%;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Не даём ничему перекрыть клик по бургеру */
.site-navbar .navbar-toggler { position: relative; z-index: 1045; }

/* --- Navbar & Collapse fixes for Bootstrap-lite --- */

/* Притянуть бургер вправо (fallback, если нет ms-auto) */
.site-navbar .navbar-toggler { margin-left: auto; position: relative; z-index: 1045; }

/* Иконка-бургера (на случай, если где-то переопределяли) */
.site-navbar .navbar-toggler-icon{
  display:inline-block; width:1.5em; height:1.5em; vertical-align:middle;
  background-repeat:no-repeat; background-position:center; background-size:100%;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Минимально достаточная логика раскрытия для collapse */
.collapse:not(.show){ display: none; }
.collapse.show { display: block; }
.collapsing { height: 0; overflow: hidden; transition: height .35s ease; }

/* Вертикальные отступы между карточками (если ещё не добавляли) */
.row.g-3 { row-gap: 1rem; }
.row.g-4 { row-gap: 1.5rem; }

/* === Offcanvas для мобильного меню (если в bs-lite нет размеров) === */
.site-offcanvas { width: 100%; max-width: 320px; background: #fff; }
.site-offcanvas .offcanvas-header { padding: .75rem 1rem; }
.site-offcanvas .offcanvas-body   { padding: 1rem; }
.site-offcanvas .nav-link { padding: .75rem 0; font-weight: 600; color: #0F172A; }
.site-offcanvas .nav-link:active, .site-offcanvas .nav-link:focus { background: #f7f9ff; }

/* Бургер: прижать вправо и сделать стандартную иконку */
.site-navbar .navbar-toggler { margin-left: auto; position: relative; z-index: 1045; }
.site-navbar .navbar-toggler-icon{
  display:inline-block; width:1.5em; height:1.5em; vertical-align:middle;
  background-repeat:no-repeat; background-position:center; background-size:100%;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* На всякий случай: если collapse используется где-то ещё */
.collapse:not(.show){ display: none; }
.collapse.show { display: block; }
.collapsing { height: 0; overflow: hidden; transition: height .35s ease; }

/* Вертикальные отступы между карточками (если ещё не добавлял) */
.row.g-3 { row-gap: 1rem; }
.row.g-4 { row-gap: 1.5rem; }

/* === Мобильное меню: компактный offcanvas по высоте контента === */
.site-offcanvas{
  /* ширина панели */
  width: 100%;
  max-width: 320px;
  background: #fff;

  /* ключевое: не тянуться до низа экрана */
  top: .75rem;         /* отступ от верха */
  right: .75rem;       /* небольшой отступ от правого края (можно 0) */
  bottom: auto;        /* ВАЖНО: выключаем «прилипание» к низу */
  height: auto;        /* ВАЖНО: высота = по контенту */
  max-height: calc(100vh - 1.5rem); /* страховка, чтобы не вылезти за экран */
  border-radius: 12px; /* красиво скруглить */
  overflow: hidden;    /* прятать скроллбар «за углом» */
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Не заставляем контент тянуть панель по флексу на всю высоту */
.site-offcanvas .offcanvas-body{
  flex: 0 1 auto;      /* вместо flex:1 */
  overflow-y: auto;    /* если контента выше max-height — аккуратно скроллим внутри */
}

/* Бургер: прижать вправо и стандартная иконка */
.site-navbar .navbar-toggler { margin-left: auto; position: relative; z-index: 1045; }
.site-navbar .navbar-toggler-icon{
  display:inline-block; width:1.5em; height:1.5em; vertical-align:middle;
  background-repeat:no-repeat; background-position:center; background-size:100%;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Compact mobile navbar (collapse under header) --- */

/* Бургер строго справа + стандартная иконка */
.site-navbar .navbar-toggler{ margin-left:auto; position:relative; z-index:1045; }
.site-navbar .navbar-toggler-icon{
  display:inline-block; width:1.5em; height:1.5em; vertical-align:middle;
  background-repeat:no-repeat; background-position:center; background-size:100%;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Паддинги панели, чтобы не «съедать» экран */
.site-navbar .navbar-collapse{ padding-top:.5rem; padding-bottom:.5rem; }

/* Компактная сетка меню: 2 колонки на мобиле; на lg — строкой как обычно */
.menu-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.25rem .75rem; margin:0; padding:0;
}
.menu-link{
  display:block; padding:.5rem .25rem; font-weight:600; font-size:0.95rem; line-height:1.1;
  color:#0F172A; border-radius:.5rem;
}
.menu-link:active, .menu-link:focus{ background:#f3f6ff; }

@media (min-width: 992px){
  .menu-grid{ display:flex; gap:0; }
  .menu-link{ padding:.5rem 1rem; }
}

/* CTA: на мобиле — колонкой; на десктопе — в линию справа */
.menu-cta{
  display:grid; grid-auto-flow:row; gap:.5rem; margin-top:.5rem;
}
.menu-cta .icon-link{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; background:#eef4f0; border-radius:10px; }
@media (min-width: 992px){
  .nav-panel{ display:flex; align-items:center; justify-content:flex-end; gap:1rem; }
  .menu-cta{ display:flex; align-items:center; gap:.5rem; margin-top:0; }
}

/* На случай урезанного CSS — базовая логика collapse */
.collapse:not(.show){ display:none; }
.collapse.show{ display:block; }
.collapsing{ height:0; overflow:hidden; transition:height .35s ease; }

/* Вертикальные отступы между карточками сайта (если ещё не задано) */
.row.g-3{ row-gap:1rem; }
.row.g-4{ row-gap:1.5rem; }

/* === Navbar: корректный перенос на мобиле === */

/* Разрешаем перенос элементов шапки на новую строку */
.navbar > .container,
.navbar > .container-fluid {
  flex-wrap: wrap;
}

/* Блок меню занимает всю ширину и идёт СЛЕДУЮЩЕЙ строкой */
.navbar .navbar-collapse {
  flex-basis: 100%;
  width: 100%;
}

/* На десктопе — обратно в одну строку */
@media (min-width: 992px){
  .navbar > .container,
  .navbar > .container-fluid {
    flex-wrap: nowrap;
  }
}

/* Небольшая отделяющая полоска и фон у раскрытого меню на мобиле */
@media (max-width: 991.98px){
  .navbar .navbar-collapse {
    background: #fff;
    border-top: 1px solid #eef1f6;
    padding: .5rem 0;
  }
}

/* === CTA: телефон + иконки в одну линию === */

/* Контейнер с телефоном и мессенджерами */
.contact-inline{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:nowrap;
}

/* Компактнее кнопка телефона */
.btn-phone{
  padding:.35rem .6rem;      /* меньше вертикальный паддинг */
  font-size:.9rem;           /* чуть меньше шрифт */
  line-height:1.1;
  border-radius:.5rem;
  white-space:nowrap;
}

/* Иконки сделать поменьше и ровные */
.icon-compact{
  width:32px; 
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:#eef4f0;        /* мягкий фон под иконку */
}

/* Сетка CTA на мобиле: заявка — строкой выше, ниже — телефон+иконки */
.menu-cta{
  display:grid;
  grid-auto-flow:row;
  gap:.5rem;
  margin-top:.5rem;
}

/* На десктопе — всё в одну линию справа */
@media (min-width: 992px){
  .menu-cta{ 
    display:flex; 
    align-items:center; 
    gap:.5rem; 
    margin-top:0; 
  }
}


/* === Brand: "ЛОЯЛЬ" + справа вертикальный стек === */
/* ЛОЯЛЬ справа от вертикальной колонки */
.navbar-brand .brand-hybrid {
  display: inline-flex;
  align-items: stretch;     /* растягиваем оба элемента по высоте */
  gap: .6rem;
}

/* Слово "ЛОЯЛЬ" */
.navbar-brand .brand-title {
  display:flex;
  align-items:center;
  font-weight:400; /* было 300 — у Golos Text лучше 400 (regular) */
  white-space:nowrap;
  font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing:.06em;             /* добавит «угловатости», но не жирности */
  font-size: clamp(18px, 5vw, 48px);
  line-height:1;
}

/* Три строки */
.navbar-brand .brand-vert {
  display:flex;
  flex-direction:column;
  justify-content:space-between; /* равномерно распределить строки */
  font-size: clamp(11px, 1.2vw, 14px);
  line-height:1.1;
}
.navbar-brand .brand-vert > span {
  font-weight:500;
}

/* размеры на desktop / mobile */
@media (min-width:992px){
  .navbar-brand .brand-title{ font-size:42px; }
  .navbar-brand .brand-vert{  font-size:12px; }
}
@media (max-width:991.98px){
  .navbar-brand .brand-title{ font-size:14px; }
  .navbar-brand .brand-vert{  font-size:11px; }
}


/* === FIX: HERO background should be behind content and only справа === */
.hero { position: relative; }
.hero > .container { position: relative; z-index: 2; }   /* контент выше подложки */
.hero-bg{
  position: absolute;
  top: 0; bottom: 0;
  right: 0;             /* прижимаем к правому краю */
  left: auto;           /* не от 50% */
  width: min(52vw, 640px);
  transform: none;      /* убираем translateX(-50%), чтобы не залезала влево */
  opacity: .18;
  pointer-events: none;
  z-index: 1;           /* ниже контейнера */
}
/* На всякий случай — кнопки точно над всем */
.hero .btn { position: relative; z-index: 3; }

/* === Responsive fix for hero illustration (e.g., hero1.webp) === */
.hero img,
.hero picture img,
.hero .hero-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prefer full-width on small screens */
@media (max-width: 767.98px){
  .hero .hero-img {
    width: 100% !important;
  }
}

/* === Brand v4: три строки + рамка ЛОЯЛЬ высотой 28px === */
.brand-v4 .brand-icon { flex:0 0 28px; }
.brand-v4-sup span{
  font-family:"Golos Text", system-ui, sans-serif;
  font-weight:600;               /* плотнее, но не жирно */
  font-size:10px;
  line-height:1.05;
  letter-spacing:.06em;
  color: var(--brand, #2E8B57);
  text-transform:uppercase;
}
.brand-v4-badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; padding:0 10px;
  border:1.6px solid var(--brand, #2E8B57);
  color:var(--brand, #2E8B57);
  border-radius:6px; line-height:1;
  font-family:"Golos Text", system-ui, sans-serif;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  /* подгон шрифта под 28px высоту */
  font-size:18px;
}
@media (max-width: 575.98px){
  .brand-v4-sup span{ font-size:9px; letter-spacing:.05em; }
  .brand-v4-badge{ font-size:13px; padding:0 8px; }
}
/* — Brand v4: чуть больше воздуха вокруг логотипа и между блоками — */
.brand-v4{ align-items: flex-start !important; }           /* выравниваем по верху */
.brand-v4 .brand-icon{ margin-right: 10px; }               /* отступ от иконки до текста */
.brand-v4-wrap{ display:flex; align-items:flex-start; gap: 10px; } /* зазор между 3 строками и бейджем */

/* на больших экранах — можно сделать чуть больше */
@media (min-width: 992px){
  .brand-v4 .brand-icon{ margin-right: 12px; }
  .brand-v4-wrap{ gap: 12px; }
}

/* если совсем тесно на очень маленьких ширинах — уменьшить зазор */
@media (max-width: 380px){
  .brand-v4 .brand-icon{ margin-right: 8px; }
  .brand-v4-wrap{ gap: 8px; }
}

/* ===== Brand v4: выравнивание текста по НИЗУ иконки ===== */
/* 1) сам бренд и внутренняя обёртка — по нижнему краю */
.brand-v4,
.brand-v4 .brand-v4-wrap{
  align-items: flex-end !important;
}

/* 2) иконка фикс 28px (как в разметке), чтобы опора была стабильной */
.brand-v4 .brand-icon{
  display:block;
  width:28px; height:28px;
}

/* 3) бейдж «ЛОЯЛЬ» центрируем по высоте своей рамки */
.brand-v4-badge{
  display:inline-flex;
  align-items:center; justify-content:center;
  height:28px; line-height:28px; /* подстраховка на случай рендера шрифта */
}

/* 4) мелкая юстировка многострочного слева (трёхстрочный блок) */
.brand-v4-sup{ line-height:1.05; padding-bottom:1px; } /* можно 0–2px по вкусу */

/* микро-подстройка, если браузер «треплет» пиксели */
@supports (transform: translateY(0)){
  .brand-v4-sup{ transform: translateY(0.5px); } /* при необходимости: 0 → 0.5–1px */
  
  /* Иконка: фиксируем ширину 28px и сохраняем пропорции */
.brand-v4 .brand-icon{
  width: 28px;
  height: auto;            /* ключ: пропорции сохраняются */
  display: block;
}

/* Выравниваем весь текст по НИЖНЕЙ кромке иконки */
.brand-v4,
.brand-v4 .brand-v4-wrap{ align-items: flex-end !important; }

/* Бейдж ЛОЯЛЬ — как и было, но центр по рамке */
.brand-v4-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;            /* высота бейджа */
  line-height: 38px;       /* подстраховка */
}

/* Чуть поджать многострочный блок, чтобы низ был ровно по полке */
.brand-v4-sup{ line-height: 1.05; padding-bottom: 1px; }

/* Бренд — ссылка без подчёркивания всегда */
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus{ text-decoration: none; }
}

.icon {
  display:inline-block;
  width:28px; height:28px;
  background-color: var(--brand);              /* наш зелёный */
  -webkit-mask: var(--icon) no-repeat center / contain;
          mask: var(--icon) no-repeat center / contain;
}
/* Заголовки блока FEATURES — как в карточках услуг */
.features .feature-title{
  font-weight: 700;
  line-height: 1.25;
  font-size: clamp(1.125rem, 0.9rem + 0.6vw, 1.25rem); /* ~18–20px */
}