:root{
  /* Бренд + база */
  --site-primary: #1E3A8A;                 /* navy */
  --site-primary-rgb: 30,58,138;
  --site-bg: #F7F9FC;
  --site-card: #FFFFFF;
  --site-border: #E6EAF2;
  --site-text: #0F172A;
  --site-muted: #475569;

  /* Доп. акцент (не для героя) */
  --accent: #FF7A1A;                       /* оранжевый */
  --accent-hover: #F06E1C;
}

/* Прокидываем в Bootstrap */
:root{
  --bs-primary: var(--site-primary);
  --bs-primary-rgb: var(--site-primary-rgb);
  --bs-body-bg: var(--site-bg);
  --bs-body-color: var(--site-text);
  --bs-border-color: var(--site-border);
  --bs-link-color: var(--site-primary);
  --bs-link-hover-color: #172C6C;
}

/* ===== HERO ===== */

/* Контейнер героя — мягкий фон и тень */
.site-hero{
  background: linear-gradient(180deg, rgba(var(--site-primary-rgb), .06), #fff 60%);
  border:1px solid var(--site-border);
  border-radius:16px;
  box-shadow: 0 10px 26px rgba(2,8,20,.06);
}
@media (min-width:992px){
  .site-hero{ padding:1.75rem 2rem; }
}

/* Бейдж-пилюля ровно по тексту */
.site-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.38rem .75rem;
  border-radius:999px;
  font-weight:600;
  line-height:1.1;
  white-space:nowrap;
  color: var(--site-primary);
  border:1.5px solid rgba(var(--site-primary-rgb), .35);
  background: rgba(var(--site-primary-rgb), .10);
  box-shadow: 0 1px 2px rgba(16,24,40,.06), inset 0 0 0 1px rgba(255,255,255,.4);
}

/* Ряд кнопок: мобила — столбик, ≥sm — в строку */
.btn-row{ display:grid; gap:.6rem; }
@media (min-width:576px){
  .btn-row{ display:flex; gap:.6rem; }
}

/* CTA-кнопки: форма/анимация; цвет берём из .btn-primary (синий) */
.btn-cta{
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: .6rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .6rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Синий как основной */
.btn-primary{ background: var(--site-primary); border-color: var(--site-primary); }
.btn-primary:hover{ background:#172C6C; border-color:#172C6C; }

/* Опциональный оранжевый акцент (НЕ используется в герое) */
.btn-accent{ background: var(--accent); border-color: var(--accent); color:#1b1b1b; }
.btn-accent:hover{ background: var(--accent-hover); border-color: var(--accent-hover); color:#1b1b1b; }

/* Лента доверия — компактные иконки */
.hero-trust{
  display:flex; flex-wrap:wrap; gap:.6rem 1rem;
  color:#475467; font-size:.95rem; margin-top:.75rem;
}
.hero-trust li{ display:flex; align-items:center; gap:.45rem; }
.hero-trust .hi{
  width:1.05rem; height:1.05rem; min-width:1.05rem; min-height:1.05rem;
  line-height:1; flex:0 0 1.05rem;
}
@media (min-width:992px){
  .hero-trust .hi{ width:1.1rem; height:1.1rem; }
}

/* Таблица — шапка слегка тонирована */
.table thead th{ background:#F1F4FA; }

/* Шапка всегда с белым фоном (перебивает любые прозрачности) */
.navbar { 
  background-color:#fff !important; 
}

/* Тень и слой поверх контента при прилипающем поведении */
.navbar.sticky-top { 
  z-index: 1100; 
  box-shadow: 0 1px 0 var(--site-border, #E6EAF2);
}

/* Если где-то случайно поставлен fixed-top — компенсируем высоту */
body.has-fixed-header { 
  padding-top: var(--sticky-offset, 72px); 
}

/* Якорям — отступ под шапку (чтоб скролл не прятал заголовки) */
[id] { scroll-margin-top: var(--sticky-offset, 72px); }

/* --- Медиа в карточках (плитках) --- */
.card .ratio.card-media{
  overflow: hidden;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  background: #f5f7fb;        /* подложка, если картинка не успела */
}
.img-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;           /* заполняем без искажений */
  object-position: center;
  display: block;
}

/* Лёгкий ховер для плиток */
.card-hover{
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-hover:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(2,8,20,.08);
}