/* =========================================================
   SAS Security - B2B Editorial Design System
   Построена строго по архитектуре sas-migration.kz
   Цветовая палитра: Графит (#212529, #2B2D42), Светлый (#F8F9FA),
   Контрастный красный (#D90429, #EF233C)
   ========================================================= */

:root {
  --bg: #212529;
  --bg-soft: #1a1e21;
  --panel: #2b2d42;
  --panel-2: #242638;
  --fg: #f8f9fa;
  --fg-2: #ced4da;
  --fg-mut: #8d99ae;
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.06);

  --accent: #D90429;
  --accent-2: #ef233c;
  --accent-deep: #8d0801;
  --accent-ink: #ffffff;

  --paper: #f8f9fa;
  --paper-2: #e9ecef;
  --paper-ink: #212529;
  --paper-mut: #6c757d;
  --paper-line: rgba(33, 37, 41, 0.14);

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --container: 1240px;
  --pad: clamp(20px, 5vw, 44px);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.65);
  --shadow-red: 0 16px 34px -16px rgba(217, 4, 41, 0.6);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.sas-security {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.section {
  padding: clamp(35px, 5.5vw, 70px) 0;
  position: relative;
}

/* ---------- Чередование секций: темный - светлый - темный ---------- */
.section-dark {
  background: var(--bg);
  color: var(--fg);
}

.section-dark-soft {
  background: var(--bg-soft);
  color: var(--fg);
}

.section-light {
  background: var(--paper);
  color: var(--paper-ink);
}

.section-light-2 {
  background: var(--paper-2);
  color: var(--paper-ink);
}

/* ---------- Типографика по эталону ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5F666C;
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: #5F666C;
  opacity: 0.8;
}

.section-light .eyebrow,
.section-light-2 .eyebrow {
  color: #5f666c;
}

.section-light .eyebrow::before,
.section-light-2 .eyebrow::before {
  background: #5f666c;
}

.section-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--fg);
}

.section-light .section-title,
.section-light-2 .section-title {
  color: var(--paper-ink);
}

.section-sub {
  max-width: 60ch;
  color: var(--fg-2);
  font-size: clamp(15px, 1.6vw, 18px);
  margin: 0;
  line-height: 1.6;
}

.section-light .section-sub,
.section-light-2 .section-sub {
  color: var(--paper-mut);
}

.section-head {
  margin-bottom: clamp(38px, 6vw, 64px);
  max-width: 780px;
}

/* ---------- Блок «О компании»: текст + фото ---------- */
.about-content {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 5vw, 64px);
}

.about-text {
  flex: 1 1 55%;
  min-width: 0;
}

.about-photo {
  flex: 1 1 45%;
  min-width: 0;
}

.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

@media (max-width: 900px) {
  .about-content {
    flex-direction: column;
  }
}

/* ---------- Ссылка со стрелкой (link-arrow) ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  cursor: pointer;
  margin-top: 16px;
}

.link-arrow i {
  font-style: normal;
  transition: transform 0.3s var(--ease);
}

.link-arrow:hover i {
  transform: translateX(6px);
}

/* ---------- Reveal-анимации ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Оверлеи и Прогресс ---------- */
.sas-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sas-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}

.sas-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ---------- Фирменный кастомный интерактивный курсор ---------- */
.sas-cursor {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .sas-cursor {
    display: block;
  }

  body.sas-security {
    cursor: none;
  }

  body.sas-security a,
  body.sas-security button,
  body.sas-security input,
  body.sas-security select,
  body.sas-security textarea,
  body.sas-security label {
    cursor: none;
  }
}

.sas-cursor .dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}

.sas-cursor .ring {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(217, 4, 41, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s, background 0.25s, border-color 0.25s;
}

.sas-cursor.is-hover .ring {
  width: 54px;
  height: 54px;
  background: rgba(217, 4, 41, 0.1);
  border-color: var(--accent);
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--fg);
  background: transparent;
  position: relative;
  transition: transform 0.35s var(--ease), background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s;
  will-change: transform;
}

.btn svg {
  flex: none;
}

.btn-lg {
  padding: 16px 30px;
  font-size: 15px;
}

.btn-sm {
  padding: 9px 18px;
  font-size: 13px;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-primary {
  background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  color: #ffffff;
  box-shadow: var(--shadow-red);
}

.btn-primary:hover {
  box-shadow: 0 20px 44px -14px rgba(217, 4, 41, 0.7);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border-color: var(--line);
  color: var(--fg);
}

#careersApply .btn-outline:not(:hover) {
  border-color: #33383d;
  color: #33383d;
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

#modalLegalDoc .btn-outline {
  border-color: #ffffff;
}

#modalLegalDoc .btn-outline:hover {
  border-color: var(--accent);
}

.section-light .btn-outline,
.section-light-2 .btn-outline {
  border-color: var(--paper-line);
  color: var(--paper-ink);
}

.section-light .btn-outline:hover,
.section-light-2 .btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* =========================================================
   ШАПКА
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.4s var(--ease), border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}

body.scrolled .site-header {
  background: rgba(33, 37, 41, 0.88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-2);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 84px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand-logo {
  max-height: 54px !important;
  width: auto !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-text strong {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--fg);
}

.brand-text em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mut);
  margin-top: 3px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: center;
}

.nav-menu a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color 0.25s;
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}

.nav-menu a:hover {
  color: var(--fg);
}

.nav-menu a:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.header-phones-desktop {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
  line-height: 1.2;
}

.header-phones-desktop .phone-lbl {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-mut);
}

.header-phones-desktop .header-phone {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  letter-spacing: 0.3px;
  transition: color 0.25s;
}

.header-phones-desktop .header-phone:hover {
  color: var(--accent);
}

/* Выпадающий список языков */
.lang-dd {
  position: relative;
  display: inline-block;
}

.lang-dd-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  transition: border-color 0.25s, background 0.25s;
}

.lang-dd-toggle:hover {
  border-color: var(--accent);
}

.lang-dd-code {
  color: var(--accent);
}

.lang-dd-name {
  color: var(--fg-2);
  width: 58px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-dd-caret {
  color: var(--fg-mut);
  transition: transform 0.3s var(--ease);
}

.lang-dd.is-open .lang-dd-caret {
  transform: rotate(180deg);
}

.lang-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 172px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  z-index: 60;
}

.lang-dd.is-open .lang-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dd-menu [data-lang-set] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: background 0.2s, color 0.2s;
}

.lang-dd-menu [data-lang-set]:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg);
}

.lang-dd-menu [data-lang-set] .lang-dd-c {
  min-width: 32px;
  font-weight: 700;
  color: var(--accent);
}

.lang-dd-menu [data-lang-set].is-active {
  background: rgba(217, 4, 41, 0.12);
  color: var(--fg);
}

.burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  position: relative;
}

.burger span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--fg);
  transition: transform 0.35s var(--ease), opacity 0.2s;
}

.burger span:first-child {
  top: 16px;
}

.burger span:last-child {
  bottom: 16px;
}

body.menu-open .burger span:first-child {
  transform: translateY(5px) rotate(45deg);
}

body.menu-open .burger span:last-child {
  transform: translateY(-5px) rotate(-45deg);
}

/* Мобильное меню */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--bg);
  padding: 110px var(--pad) 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s var(--ease), opacity 0.4s;
  overflow-y: auto;
}

body.menu-open .mobile-menu {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-menu nav a {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--fg);
  padding: 8px 0;
  border-bottom: 1px solid var(--line-2);
}

.mobile-phones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}

.mob-phone-group span {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--fg-mut);
  display: block;
}

.mob-phone-group a {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}

.mobile-ctas {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

/* =========================================================
   HERO СЕКЦИЯ
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 100px !important;
  padding-bottom: 0;
  overflow: hidden;
  background: var(--bg);
}


.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background-image: url('../assets/main.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  transform: scale(1.05);
 
  z-index: 1 !important;
}

@media (max-width: 768px) {
  .hero-bg {
    background-image: url('../assets/main-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  .hero-bg {
    background-image: url('../assets/main-mob-s.webp') !important;
    background-position: center top !important;
  }
}

/* ---------- Арабская версия: другая картинка на первом экране ---------- */
html[lang="ar"] .hero-bg {
  
  background-image: url('../assets/main-ar.webp') !important;
}
@media (max-width: 768px) {
  html[lang="ar"] .hero-bg {
    background-image: url('../assets/main-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  html[lang="ar"] .hero-bg {
    background-image: url('../assets/main-mob-s.webp') !important;
    background-position: center top !important;
  }
}

/* ---------- Страница «Физическая охрана»: индивидуальный фон первого экрана ---------- */
#physHero .hero-bg {
  background-image: url('../assets/physical_r.webp') !important;
}
@media (max-width: 768px) {
  #physHero .hero-bg {
    background-image: url('../assets/physical_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  #physHero .hero-bg {
    background-image: url('../assets/physical_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}

html[lang="ar"] #physHero .hero-bg {
  background-image: url('../assets/physical_r-ar.webp') !important;
}
@media (max-width: 768px) {
  html[lang="ar"] #physHero .hero-bg {
    background-image: url('../assets/physical_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  html[lang="ar"] #physHero .hero-bg {
    background-image: url('../assets/physical_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}

/* ---------- Страница «Пультовая охрана»: индивидуальный фон первого экрана ---------- */
#pulseHero .hero-bg {
  background-image: url('../assets/pulse_r.webp') !important;
}
@media (max-width: 768px) {
  #pulseHero .hero-bg {
    background-image: url('../assets/pulse_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  #pulseHero .hero-bg {
    background-image: url('../assets/pulse_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}
html[lang="ar"] #pulseHero .hero-bg {
  background-image: url('../assets/pulse_r-ar.webp') !important;
}
@media (max-width: 768px) {
  html[lang="ar"] #pulseHero .hero-bg {
    background-image: url('../assets/pulse_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  html[lang="ar"] #pulseHero .hero-bg {
    background-image: url('../assets/pulse_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}

/* ---------- Страница «УТО»: индивидуальный фон первого экрана ---------- */
#utoHero .hero-bg {
  background-image: url('../assets/uto_r.webp') !important;
}
@media (max-width: 768px) {
  #utoHero .hero-bg {
    background-image: url('../assets/uto_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  #utoHero .hero-bg {
    background-image: url('../assets/uto_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}
html[lang="ar"] #utoHero .hero-bg {
  background-image: url('../assets/uto_r-ar.webp') !important;
}
@media (max-width: 768px) {
  html[lang="ar"] #utoHero .hero-bg {
    background-image: url('../assets/uto_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  html[lang="ar"] #utoHero .hero-bg {
    background-image: url('../assets/uto_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}

/* ---------- Страница «Технические системы»: индивидуальный фон первого экрана ---------- */
#techHero .hero-bg {
  background-image: url('../assets/tech_r.webp') !important;
}
@media (max-width: 768px) {
  #techHero .hero-bg {
    background-image: url('../assets/tech_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  #techHero .hero-bg {
    background-image: url('../assets/tech_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}
html[lang="ar"] #techHero .hero-bg {
  background-image: url('../assets/tech_r-ar.webp') !important;
}
@media (max-width: 768px) {
  html[lang="ar"] #techHero .hero-bg {
    background-image: url('../assets/tech_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  html[lang="ar"] #techHero .hero-bg {
    background-image: url('../assets/tech_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}

/* ---------- Страница «K9»: индивидуальный фон первого экрана ---------- */
#k9Hero .hero-bg {
  background-image: url('../assets/k9_r.webp') !important;
}
@media (max-width: 768px) {
  #k9Hero .hero-bg {
    background-image: url('../assets/k9_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  #k9Hero .hero-bg {
    background-image: url('../assets/k9_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}
html[lang="ar"] #k9Hero .hero-bg {
  background-image: url('../assets/k9_r-ar.webp') !important;
}
@media (max-width: 768px) {
  html[lang="ar"] #k9Hero .hero-bg {
    background-image: url('../assets/k9_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  html[lang="ar"] #k9Hero .hero-bg {
    background-image: url('../assets/k9_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}

/* ---------- Страница «Женская охрана»: индивидуальный фон первого экрана ---------- */
#femaleHero .hero-bg {
  background-image: url('../assets/woman_r.webp') !important;
}
@media (max-width: 768px) {
  #femaleHero .hero-bg {
    background-image: url('../assets/woman_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  #femaleHero .hero-bg {
    background-image: url('../assets/woman_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}
html[lang="ar"] #femaleHero .hero-bg {
  background-image: url('../assets/woman_r-ar.webp') !important;
}
@media (max-width: 768px) {
  html[lang="ar"] #femaleHero .hero-bg {
    background-image: url('../assets/woman_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  html[lang="ar"] #femaleHero .hero-bg {
    background-image: url('../assets/woman_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}

/* ---------- Страница «Специальная охрана»: индивидуальный фон первого экрана ---------- */
#specHero .hero-bg {
  background-image: url('../assets/spec_r.webp') !important;
}
@media (max-width: 768px) {
  #specHero .hero-bg {
    background-image: url('../assets/spec_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  #specHero .hero-bg {
    background-image: url('../assets/spec_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}
html[lang="ar"] #specHero .hero-bg {
  background-image: url('../assets/spec_r-ar.webp') !important;
}
@media (max-width: 768px) {
  html[lang="ar"] #specHero .hero-bg {
    background-image: url('../assets/spec_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  html[lang="ar"] #specHero .hero-bg {
    background-image: url('../assets/spec_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}

/* ---------- Страница «Перевозки охрана»: индивидуальный фон первого экрана ---------- */
#transHero .hero-bg {
  background-image: url('../assets/trans_r.webp') !important;
}
@media (max-width: 768px) {
  #transHero .hero-bg {
    background-image: url('../assets/trans_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  #transHero .hero-bg {
    background-image: url('../assets/trans_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}
html[lang="ar"] #transHero .hero-bg {
  background-image: url('../assets/trans_r-ar.webp') !important;
}
@media (max-width: 768px) {
  html[lang="ar"] #transHero .hero-bg {
    background-image: url('../assets/trans_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  html[lang="ar"] #transHero .hero-bg {
    background-image: url('../assets/trans_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}

/* ---------- Страница «Для иностранцев»: индивидуальный фон первого экрана ---------- */
#foreignHero .hero-bg {
  background-image: url('../assets/foreigner_r.webp') !important;
}
@media (max-width: 768px) {
  #foreignHero .hero-bg {
    background-image: url('../assets/foreigner_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  #foreignHero .hero-bg {
    background-image: url('../assets/foreigner_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}
html[lang="ar"] #foreignHero .hero-bg {
  background-image: url('../assets/foreigner_r-ar.webp') !important;
}
@media (max-width: 768px) {
  html[lang="ar"] #foreignHero .hero-bg {
    background-image: url('../assets/foreigner_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  html[lang="ar"] #foreignHero .hero-bg {
    background-image: url('../assets/foreigner_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}

/* ---------- Страница «Карьера»: индивидуальный фон первого экрана ---------- */
#careersHero .hero-bg {
  background-image: url('../assets/career_r.webp') !important;
}
@media (max-width: 768px) {
  #careersHero .hero-bg {
    background-image: url('../assets/career_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  #careersHero .hero-bg {
    background-image: url('../assets/career_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}
html[lang="ar"] #careersHero .hero-bg {
  background-image: url('../assets/career_r-ar.webp') !important;
}
@media (max-width: 768px) {
  html[lang="ar"] #careersHero .hero-bg {
    background-image: url('../assets/career_r-mob.webp') !important;
    background-position: center top !important;
  }
}
@media (max-width: 455px) {
  html[lang="ar"] #careersHero .hero-bg {
    background-image: url('../assets/career_r-mob-s.webp') !important;
    background-position: center top !important;
  }
}

/* ---------- Страница «Правовая информация»: без фото, только фирменный градиент ---------- */
#legalActsHero .hero-bg {
  display: none !important;
}
#licensesHero .hero-bg {
  display: none !important;
}

#licensesHero {
  min-height: 50vh !important;
  padding-top: 160px !important;
  padding-bottom: 60px !important;
}

@media (max-width: 640px) {
  #licensesHero {
    min-height: auto !important;
    padding-top: 100px !important;
    padding-bottom: 35px !important;
  }

  #licensesHero .hero-inner {
    padding-bottom: 0 !important;
  }

  #licensesHero .hero-sub {
    margin-bottom: 0 !important;
  }
}

.hero-inner {
  position: relative;
  z-index: 3 !important;
  padding-bottom: clamp(60px, 8vw, 100px) !important;
  max-width: 820px !important;
  width: 100%;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(38px, 5.2vw, 64px) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 24px !important;
  color: #ffffff !important;
}

.hero-sub {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--fg-2) !important;
  margin-bottom: 36px !important;
  max-width: 620px;
}

.hero-cta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px !important;
}

.hero-features-bar {
  position: relative;
  z-index: 3 !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  background: transparent;
}

.hero-feat-item {
  padding: 26px 20px 32px;
  border-left: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-feat-item:first-child {
  border-left: 0;
  padding-left: 0;
}

.hero-feat-icon {
  color: #99B2E3;
  flex-shrink: 0;
}

.hero-feat-text {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg);
}

/* =========================================================
   СЕТКИ РЕШЕНИЙ И ОТРАСЛЕЙ
   ========================================================= */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.sol-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 42px);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}

.sol-card:hover {
  transform: translateY(-4px);
  border-color: rgba(217, 4, 41, 0.45);
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.6);
}

.sol-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

#utoImportant .sol-header {
  justify-content: flex-start;
  gap: 12px;
}

#utoImportant .sol-header .sol-num {
  text-align: left;
}

#utoImportant .sol-card > div:last-child {
  text-align: center;
}

.tech-selection-card .sol-header {
  justify-content: flex-start;
  gap: 12px;
}

.tech-selection-card .sol-num {
  color: #0b0f12 !important;
  text-align: left;
}

.trans-regulation-card .sol-header {
  justify-content: flex-start;
  gap: 12px;
}

.trans-regulation-card .sol-num {
  color: #0b0f12 !important;
  text-align: left;
}

.sol-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #5F666C;
}

.sol-num-l {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #5F666C;
}

.sol-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #E0E8F9;
  color: #14181C;
  display: grid;
  place-items: center;
}

.sol-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.25;
  color: var(--fg);
  margin: 0 0 14px;
}

.sol-desc {
  font-size: 14.5px;
  color: var(--fg-2);
  line-height: 1.6;
  margin: 0 0 24px;
}

.sol-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sol-foot .link-arrow + .link-arrow {
  margin-top: 12px;
}

.sol-price-link {
  color: #33383d;
}

/* Отрасли */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ind-card {
  background: #ffffff;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 30px 24px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s;
}

.ind-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.12);
}

.ind-card h4 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 10px;
  color: var(--paper-ink);
}

.ind-card p {
  font-size: 14px;
  color: var(--paper-mut);
  line-height: 1.55;
  margin: 0;
}

/* Шаги процесса */
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.wf-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  transition: border-color 0.3s;
}

.wf-card:hover {
  border-color: var(--accent);
}

.wf-card h4 {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}

.wf-card p {
  font-size: 13.5px;
  margin: 0;
  line-height: 1.5;
}

.wf-summary-box {
  margin-top: 36px;
  padding: 20px 24px;
  border-radius: var(--radius);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}

/* Почему SAS Security */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 26px;
  border-left: 3px solid var(--accent) !important;
}

.why-card h4 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.why-card p {
  font-size: 14.5px;
  margin: 0;
  line-height: 1.55;
}

/* Руководство */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.team-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.team-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.team-card-body {
  padding: 28px 32px 32px;
}

.team-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--fg);
  margin: 0 0 6px;
}

.team-role {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(153, 178, 227) !important;
  margin-bottom: 16px;
}

.team-desc {
  font-size: 14.5px;
  color: var(--fg-2);
  margin: 0;
  line-height: 1.6;
}

/* =========================================================
   ГРУППА SAS (Экосистема в стиле sas-migration.kz)
   ========================================================= */
.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) !important;
  gap: 24px;
}

.group-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s ease !important;
}

.group-card:hover {
  transform: translateY(-5px) scale(1.01) !important;
  border-color: rgba(217, 4, 41, 0.4) !important;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45), 0 0 20px rgba(217, 4, 41, 0.1) !important;
}

.group-card.is-current {
  border-color: var(--accent);
  animation: GlenPulseSecurity 4s infinite alternate;
}

@keyframes GlenPulseSecurity {
  0% {
    border-color: rgba(217, 4, 41, 0.25);
    box-shadow: 0 10px 40px rgba(217, 4, 41, 0.05);
  }
  100% {
    border-color: rgba(217, 4, 41, 0.55);
    box-shadow: 0 12px 44px rgba(217, 4, 41, 0.2);
  }
}

.group-card-header {
  height: 58px;
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.group-card-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--fg);
  margin: 0 0 12px;
}

.group-card-desc {
  font-size: 14.5px;
  color: var(--fg-2);
  margin: 0 0 24px;
  line-height: 1.6;
}

.group-card-link {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* =========================================================
   ФОРМЫ И ИНПУТЫ
   ========================================================= */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.field {
  position: relative;
}

.field-full {
  grid-column: 1 / -1;
}

.field input,
.field textarea,
.field select {
  width: 100% !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--fg) !important;
  font: inherit !important;
  padding: 22px 16px 8px !important;
  transition: border-color 0.25s, background-color 0.25s;
  appearance: none;
}

.field textarea {
  min-height: 90px;
  resize: vertical;
}

.field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d99ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px !important;
}

.field select option {
  background: var(--panel);
  color: var(--fg);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  background-color: rgba(217, 4, 41, 0.05) !important;
}

.field label {
  position: absolute !important;
  left: 16px !important;
  top: 15px !important;
  color: var(--fg-mut) !important;
  font-size: 14px;
  pointer-events: none;
  transition: transform 0.2s var(--ease), color 0.2s, font-size 0.2s;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field-select select:valid + label,
.field-select select:focus + label {
  transform: translateY(-9px) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  color: var(--accent) !important;
}

.form-checkbox {
  margin: 18px 0 24px;
}

.custom-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--fg-mut);
  cursor: pointer;
  user-select: none;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: var(--accent);
  border-color: var(--accent);
}

.custom-checkbox input:checked ~ .checkmark::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.form-response {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  text-align: center;
}

.form-response.is-success {
  background: rgba(217, 4, 41, 0.12);
  border: 1px solid var(--accent);
  color: #ffffff;
}

.form-response.is-error {
  background: rgba(255, 77, 79, 0.15);
  border: 1px solid #ff4d4f;
  color: #ff7875;
}

/* =========================================================
   МОДАЛЬНЫЕ ОКНА
   ========================================================= */
.sas-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: block;
}

.sas-modal[hidden] {
  display: none;
}

.sas-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 12, 0.82);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.sas-modal.is-open .sas-modal-backdrop {
  opacity: 1;
}

.sas-modal-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: min(640px, calc(100vw - 32px));
  max-height: min(90vh, 880px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(26px, 4vw, 42px);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.sas-modal-panel-lg {
  width: min(860px, calc(100vw - 32px));
}

.sas-modal.is-open .sas-modal-panel {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.sas-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg-2);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.sas-modal-close:hover {
  color: #ffffff;
  border-color: var(--accent);
  background: var(--accent);
}

.modal-icon-badge {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  color: var(--accent);
  background: rgba(217, 4, 41, 0.1);
  border: 1px solid rgba(217, 4, 41, 0.3);
  margin-bottom: 18px;
}

.modal-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 30px);
  color: var(--fg);
  margin: 0 0 8px;
}

.modal-sub {
  color: var(--fg-2);
  font-size: 14px;
  margin: 0 0 24px;
  line-height: 1.55;
}

body.modal-open {
  overflow: hidden;
}

/* =========================================================
   ПОДВАЛ
   ========================================================= */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: clamp(56px, 8vw, 96px) 0 36px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(36px, 6vw, 80px);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-2);
}

.footer-mark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 28px;
  color: var(--fg);
}

.footer-tagline {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 12px 0 8px;
}

.footer-sub {
  font-size: 14px;
  color: var(--fg-2);
  margin: 0 0 10px;
  line-height: 1.5;
}

.footer-pillars {
  font-size: 12.5px;
  color: var(--fg-mut);
  margin: 0;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.4fr;
  gap: 28px;
}

.footer-cols h4 {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mut);
  margin: 0 0 16px;
  font-weight: 600;
}

.footer-cols a {
  display: block;
  color: var(--fg-2);
  font-size: 14px;
  padding: 5px 0;
  transition: color 0.25s;
}

.footer-cols a:hover {
  color: var(--accent);
}

.footer-contact-item {
  margin-bottom: 14px;
}

.footer-contact-item span {
  display: block;
  font-size: 11px;
  color: var(--fg-mut);
}

.footer-contact-item .f-phone,
.footer-contact-item .f-mail {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}

.footer-contact-item .f-addr {
  font-size: 13px;
  color: var(--fg-mut);
  margin: 0;
  line-height: 1.4;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--fg-2);
  transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s;
}

.social-link:hover {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.footer-disclaimer {
  padding: 24px 0;
  border-bottom: 1px solid var(--line-2);
}

.footer-disclaimer p {
  font-size: 13px;
  color: var(--fg-mut);
  line-height: 1.6;
  margin: 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 13px;
  color: var(--fg-mut);
}

/* =========================================================
   ПЛАВАЮЩИЙ ВИДЖЕТ СВЯЗИ (Strict sas-migration Style)
   ========================================================= */
.sas-fixed-communication {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999999 !important;
  display: flex;
  gap: 14px;
  align-items: flex-end;
}

.comm-trigger {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  transition: transform 0.2s var(--ease), background 0.2s;
  position: relative;
  z-index: 20;
  padding: 0 !important;
  flex: none !important;
}

.comm-trigger:active {
  transform: scale(0.9) !important;
}

.comm-trigger.main-call {
  background: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 40px -12px rgba(217, 4, 41, 0.55) !important;
}

.comm-trigger.main-call:hover {
  background: var(--accent-deep) !important;
}

.comm-trigger.main-wa {
  background: #25d366 !important;
  color: #ffffff !important;
  box-shadow: 0 18px 40px -12px rgba(37, 211, 102, 0.6) !important;
}

.wa-glow-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: waring 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes waring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.to-top {
  position: fixed !important;
  right: 22px !important;
  bottom: 92px !important;
  width: 46px !important;
  height: 46px !important;
  z-index: 99999 !important;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.25s, border-color 0.25s;
}

.to-top:hover {
  background: var(--accent);
  border-color: var(--accent);
}

body.show-totop .to-top {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none;
}

/* =========================================================
   ЯЗЫКОВЫЕ ШРИФТЫ И ПОДДЕРЖКА RTL (Арабский)
   ========================================================= */
html[data-lang="zh"] {
  --sans: "Noto Sans SC", "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Noto Sans SC", "Inter", system-ui, -apple-system, sans-serif;
}

html[data-lang="ar"] {
  --sans: "Noto Sans Arabic", "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Noto Sans Arabic", "Inter", system-ui, -apple-system, sans-serif;
}

[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .eyebrow::before {
  margin-left: 10px;
  margin-right: 0;
}

[dir="rtl"] .hero-feat-item {
  border-left: 0;
  border-right: 1px solid var(--line);
}

[dir="rtl"] .hero-feat-item:first-child {
  border-right: 0;
}

[dir="rtl"] .lang-dd-menu {
  right: auto;
  left: 0;
}

[dir="rtl"] .lang-dd-menu [data-lang-set] {
  text-align: right;
}

[dir="rtl"] .sas-modal-close {
  right: auto;
  left: 16px;
}

[dir="rtl"] .field label {
  left: auto;
  right: 16px;
}

[dir="rtl"] .field select {
  background-position: left 16px center !important;
  padding: 22px 16px 8px 44px !important;
}

[dir="rtl"] .header-phones-desktop {
  text-align: left;
}

[dir="rtl"] .sas-fixed-communication {
  right: auto;
  left: 22px;
}

[dir="rtl"] .to-top {
  right: auto;
  left: 22px;
}

[dir="rtl"] .about-content {
  flex-direction: row-reverse;
}

@media (max-width: 900px) {
  [dir="rtl"] .about-content {
    flex-direction: column;
  }
}

/* =========================================================
   АДАПТИВНОСТЬ
   ========================================================= */
@media (max-width: 1500px) {
  .nav-menu {
    display: none;
  }
  .header-phones-desktop {
    display: none;
  }
  .burger {
    display: block;
  }
  .header-actions {
    gap: 12px;
  }
}

@media (max-width: 900px) {
  .solutions-grid,
  .why-grid,
  .footer-top {
    grid-template-columns: 1fr;
  }

  .industries-grid {
    grid-template-columns: 1fr 1fr;
  }

  .workflow-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-features-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-feat-item:nth-child(3) {
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .header-inner {
    height: 64px;
    gap: 12px;
  }

  .brand-logo {
    max-height: 40px !important;
  }

  .brand-text strong {
    font-size: 15px;
  }

  .header-cta {
    display: none;
  }

  .hero {
    min-height: 92vh !important;
  }

  .hero-cta .btn {
    flex: 1;
    width: 100%;
  }

  .industries-grid,
  .workflow-grid,
  .footer-cols,
  .form-grid,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }

  .hero-features-bar {
    grid-template-columns: 1fr;
  }

  .hero-feat-item {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 18px 0;
  }

  .hero-feat-item:first-child {
    border-top: 0;
  }

  .sas-fixed-communication {
    right: 14px !important;
    bottom: 14px !important;
    gap: 10px !important;
  }

  .comm-trigger {
    width: 46px !important;
    height: 46px !important;
  }

  .comm-trigger svg {
    width: 22px !important;
    height: 22px !important;
  }

  .wa-glow-ring {
    display: none !important;
  }
}

/* ---------- Группа SAS по референсу ---------- */
.group-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.group-hero-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  transition: transform 0.4s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease;
}

.group-hero-card.is-current {
  border-color: rgba(217, 4, 41, 0.4);
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.5);
}

.group-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.group-cat {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mut);
}

.group-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge-here {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.group-icon-frame {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--fg-2);
  background: rgba(255, 255, 255, 0.03);
}

.group-hero-logo-box {
  margin: 10px 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.group-main-logo {
  max-height: 74px !important;
  width: auto !important;
  object-fit: contain !important;
}

.group-hero-desc {
  max-width: 680px;
  margin: 0 auto 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-2);
}

.group-site-link {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.group-sub-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.group-sub-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}

.group-sub-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.4);
}

.group-sub-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.group-sub-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--fg);
  margin: 0 0 10px;
}

.group-sub-desc {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.55;
  margin: 0 0 24px;
}

.group-sub-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.group-action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-2);
  transition: color 0.25s;
}

.group-action-link:hover {
  color: var(--accent);
}

.group-action-link i {
  font-style: normal;
  font-size: 16px;
}

@media (max-width: 768px) {
  .group-sub-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ШАПКА (Site Header) — Адаптивная B2B-структура
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.4s var(--ease), border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
  background: rgba(33, 37, 41, 0.95);
  backdrop-filter: blur(14px);
}

/* Компенсация админ-панели WordPress */
body.admin-bar .site-header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

body.scrolled .site-header {
  background: rgba(26, 30, 33, 0.98);
  border-bottom-color: var(--line-2);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 80px;
}

/* Крупный логотип без деформации */
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 12px;
}

.brand-logo {
  max-height: 56px !important;
  height: 56px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block;
}

/* Навигация */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
}

.nav-menu a {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color 0.25s;
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}

.nav-menu a:hover {
  color: #ffffff;
}

.nav-menu a:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Телефоны в шапке */
.header-phones-desktop {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
  line-height: 1.2;
}

.header-phones-desktop .header-phone {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  letter-spacing: 0.3px;
  transition: color 0.25s;
}

.header-phones-desktop .header-phone:hover {
  color: var(--accent);
}

.header-phone-sub {
  font-size: 11px !important;
  color: var(--fg-mut) !important;
}

/* Селектор языка */
.lang-dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.lang-dd-code {
  color: var(--accent);
  font-weight: 700;
}

.lang-dd-name {
  color: var(--fg-2);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   ЧЕТКИЙ БРЕЙКПОИНТ ДЛЯ ШАПКИ (по эталону sas-migration 1500px)
   ========================================================= */
@media (max-width: 1400px) {
  .nav-menu {
    display: none !important;
  }
  .header-phones-desktop {
    display: none !important;
  }
  .burger {
    display: block !important;
  }
  .header-actions {
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .header-inner {
    height: 64px;
  }
  .brand-logo {
    max-height: 44px !important;
    height: 44px !important;
  }
  .header-cta {
    display: none !important;
  }
  .lang-dd-name {
    display: none !important;
  }
  .lang-dd-toggle {
    padding: 6px 10px;
  }
}

/* =========================================================
   ШАПКА (Site Header) — строго по эталону sas-migration
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10, 14, 12, 0.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.4s var(--ease), border-color 0.4s;
}

/* Компенсация админ-панели WP */
body.admin-bar .site-header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

body.scrolled .site-header {
  background: rgba(10, 14, 12, 0.85) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.header-container {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 48px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 90px;
}

/* Крупный логотип без привязки и сплющивания */
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.brand-logo {
  max-height: 64px !important;
  height: 64px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block;
}

/* Горизонтальное меню */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 auto;
}

.nav-menu a {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color 0.25s;
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}

.nav-menu a:hover {
  color: #ffffff;
}

.nav-menu a:hover::after {
  width: 100%;
}

/* Правый блок действий */
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Телефоны в 2 строки по эталону */
.header-phones-desktop {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
  line-height: 1.2;
}

.header-phones-desktop .header-phone {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  letter-spacing: 0.3px;
  transition: color 0.25s;
}

.header-phones-desktop .header-phone:hover {
  color: var(--accent);
}

.header-phones-desktop .phone-pref {
  color: var(--fg-mut);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.header-phones-desktop .phone-num {
  font-weight: 700;
}

/* Переключатель языков */
.lang-dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}

.lang-dd-code {
  color: var(--accent);
  font-weight: 700;
}

.lang-dd-name {
  color: var(--fg-2);
}

/* Круглая кнопка WhatsApp в шапке */
.header-wa {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--fg-2);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.header-wa:hover {
  color: #25d366;
  border-color: #25d366;
  background: rgba(37, 211, 102, 0.1);
}

/* Кнопка заявки в шапке */
.header-cta {
  padding: 10px 20px !important;
  font-size: 13px !important;
}

/* =========================================================
   АДАПТИВНОСТЬ ШАПКИ
   ========================================================= */
@media (max-width: 1500px) {
  .nav-menu {
    display: none !important;
  }
  .header-phones-desktop {
    display: none !important;
  }
  .header-wa {
    display: none !important;
  }
  .burger {
    display: block !important;
  }
  .header-actions {
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .header-inner {
    height: 70px;
  }
  .brand-logo {
    max-height: 48px !important;
    height: 48px !important;
  }
  .header-cta {
    display: none !important;
  }
  .lang-dd-name {
    display: none !important;
  }
  .lang-dd-toggle {
    padding: 7px 11px;
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 80px; /* Увеличена общая высота шапки для крупного логотипа */
}

/* Крупный логотип без искусственного сжатия */
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  padding: 4px 0;
}

.brand-logo {
  max-height: 150px !important;
  height: 140px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block;
  transform: scale(1.15); /* Оптическая компенсация прозрачных полей png */
  transform-origin: left center;
}

@media (max-width: 640px) {
  .header-inner {
    height: 76px;
  }
  .brand-logo {
    max-height: 100px !important;
    height: 90px !important;
    transform: scale(1.1);
  }
}

.hero {
  position: relative;
  min-height: 100vh !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 130px !important; /* Запас под высокую полупрозрачную шапку */
  padding-bottom: 0;
  overflow: hidden;
  background: var(--bg);
}

/* =========================================================
   HERO СЕКЦИЯ (Выровненная по левому краю общего контейнера)
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 90px !important; /* Уменьшено на 30% */
  padding-bottom: 0;
  overflow: hidden;
  background: var(--bg);
}

.hero-content-wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero-inner {
  padding-bottom: clamp(40px, 6vw, 70px) !important;
  max-width: 860px !important;
  width: 100%;
  margin-left: 0 !important; /* Строгое выравнивание по левой направляющей контейнера */
  text-align: left;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(38px, 5.2vw, 64px) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 24px !important;
  color: #ffffff !important;
}

.hero-sub {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--fg-2) !important;
  margin-bottom: 36px !important;
  max-width: 620px;
}

.hero-cta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px !important;
}

/* Обертка нижней плашки */
.hero-features-bar-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  border-top: 1px solid var(--line);
  background: rgba(33, 37, 41, 0.45);
  backdrop-filter: blur(8px);
}

.hero-features-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.hero-feat-item {
  padding: 22px 18px;
  border-left: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-feat-item:first-child {
  border-left: 0;
  padding-left: 0;
}

/* =========================================================
   ФИНАЛЬНЫЙ ФИКС ОТСТУПОВ HERO (OVERRIDE)
   ========================================================= */
section.hero#hero {
  min-height: auto !important;
  height: auto !important;
  padding-top: 200px !important;
  padding-bottom: 0 !important;
  justify-content: flex-start !important;
}

section.hero#hero .hero-content-wrapper {
  padding-top: 20px !important;
  padding-bottom: 30px !important;
}

section.hero#hero .hero-inner {
  padding-top: 0 !important;
  padding-bottom: 20px !important;
  margin-top: 0 !important;
}

section.hero#hero .hero-eyebrow {
  margin-bottom: 12px !important;
  color: #99B2E3 !important;
}

section.hero#hero .hero-eyebrow::before {
  background: #99B2E3 !important;
}

section.hero#hero .hero-title {
  margin-bottom: 16px !important;
  line-height: 1.12 !important;
}

section.hero#hero .hero-sub {
  margin-bottom: 24px !important;
}

section.hero#hero .hero-features-bar-wrap {
  margin-top: 20px !important;
}

.header-cta-audit {
  padding: 10px 16px !important;
  font-size: 12.5px !important;
  white-space: nowrap !important;
}

@media (max-width: 1550px) {
  .header-cta-audit {
    display: none !important;
  }
}

/* =========================================================
   ВЕРТИКАЛЬНОЕ ЦЕНТРИРОВАНИЕ НАПОЛНЕНИЯ ХЕДЕРА И ЕГО ВЫРАВНИВАНИЕ
   ========================================================= */
.site-header .container {
  max-width: 1680px !important; /* Увеличиваем ширину контейнера шапки, чтобы всё помещалось в одну строку */
}

.header-inner {
  display: flex !important;
  align-items: center !important; /* Жесткое вертикальное центрирование всех элементов */
  justify-content: space-between !important;
  height: 96px !important;
}

.brand {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.nav-menu {
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important; /* Выравнивание правого блока по центру */
  gap: 12px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   МАСШТАБ ЛОГОТИПА В БЛОКЕ «ГРУППА SAS»
   ========================================================= */
.group-hero-logo-box {
  margin: 16px 0 16px !important;
}

.group-main-logo {
  max-height: 400px !important; 
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* =========================================================
   КОМПАКТНЫЕ ОТСТУПЫ ГЛАВНОЙ КАРТОЧКИ «ГРУППА SAS»
   ========================================================= */
.group-hero-card {
  padding: 24px 32px !important;
}

.group-hero-top {
  margin-bottom: 14px !important;
}

.group-hero-logo-box {
  margin: 6px 0 12px !important;
}

.group-hero-desc {
  margin-bottom: 16px !important;
}

/* =========================================================
   ФИНАЛЬНЫЙ ФИКС ЦЕНТРИРОВАНИЯ И ПЕРЕХОДА НА БУРГЕР (IPAD PRO / TABLET)
   ========================================================= */

/* Жесткое центрирование хедера и его содержимого */
.site-header .header-container {
  max-width: 1720px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

.site-header .header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 90px !important;
  width: 100% !important;
}

/* Логотип слева */
.site-header .brand {
  margin-right: auto !important;
  flex-shrink: 0 !important;
}

/* Десктопное меню строго по центру */
.site-header .nav-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  margin: 0 auto !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Правый блок элементов */
.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Адаптивный переход на бургер для планшетов (включая iPad Pro до 1366px) и телефонов */
@media (max-width: 1366px) {
  .site-header .nav-menu {
    display: none !important;
  }
  .site-header .header-phones-desktop {
    display: none !important;
  }
  .site-header .header-wa {
    display: none !important;
  }
  .site-header .header-cta-stack {
    display: none !important;
  }
  .site-header .burger {
    display: block !important;
  }
  .site-header .header-actions {
    gap: 10px !important;
  }
}

/* =0========================================================
   ИДЕАЛЬНЫЙ ФИКС ХЕДЕРА: Центрирование меню + Мобильная версия с iPad Pro
   ========================================================= */

/* Контейнер хедера на всю ширину с отступами */
.site-header .header-container {
  max-width: 1720px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Сетка хедера: Лого слева, Меню по центру, Кнопки/телефоны справа */
.site-header .header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 90px !important;
  width: 100% !important;
  gap: 20px !important;
}

.site-header .brand {
  flex-shrink: 0 !important;
  margin-right: 0 !important;
}

/* Безопасное центрирование десктопного меню без наложения */
.site-header .nav-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  margin: 0 auto !important;
  position: static !important;
  transform: none !important;
  flex: 1 !important;
}

.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}

/* Переход на мобильный бургер на планшетах и мобильных (включая iPad Pro до 1366px) */
@media (max-width: 1366px) {
  .site-header .nav-menu {
    display: none !important;
  }
  .site-header .header-phones-desktop {
    display: none !important;
  }
  .site-header .header-wa {
    display: none !important;
  }
  .site-header .header-cta-stack {
    display: none !important;
  }
  .site-header .header-cta {
    display: none !important;
  }
  .site-header .burger {
    display: block !important;
  }
  .site-header .header-actions {
    gap: 10px !important;
  }
}

@media (max-width: 640px) {
  .site-header .header-inner {
    height: 70px !important;
  }
  .site-header .brand-logo {
    max-height: 48px !important;
    height: 48px !important;
  }
}

/* =========================================================
   ИДЕАЛЬНЫЙ БАЛАНС ШЕДЕРА И ПЕРЕХОД НА БУРГЕР
   ========================================================= */
.site-header .header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 90px !important;
  gap: 15px !important;
}

.site-header .nav-menu {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 auto !important;
}

.site-header .nav-menu a {
  font-size: 10.5px !important; /* Компактный размер для идеального размещения всех 8 пунктов */
  letter-spacing: 0.03em !important;
}

.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Если ширина экрана меньше 1600px — аккуратно переключаем на бургер, чтобы ничего не наезжало */
@media (max-width: 1600px) {
  .site-header .nav-menu {
    display: none !important;
  }
  .site-header .header-phones-desktop {
    display: none !important;
  }
  .site-header .burger {
    display: block !important;
  }
}

/* =========================================================
   ВЕРТИКАЛЬНЫЙ СТЕК КНОПОК СПРАВА В ХЕДЕРЕ («В ДВА ЭТАЖА»)
   ========================================================= */
.header-cta-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

.header-cta-stack .btn {
  padding: 10px 12px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
  min-height: 26px !important;
}

/* Возвращаем комфортный размер шрифта меню */
.site-header .nav-menu a {
  font-size: 11.5px !important;
  letter-spacing: 0.05em !important;
}

/* =========================================================
   УМЕНЬШЕНИЕ ВНУТРЕННИХ ОТСТУПОВ КАРТОЧЕК РЕШЕНИЙ (.sol-card)
   ========================================================= */
.sol-card {
  padding: 24px 24px 24px 24px !important; /* Уменьшаем отступы со всех сторон */
}

.sol-header {
  margin-bottom: 14px !important; /* Уменьшаем отступ под шапкой карточки (номер и иконка) */
}

.sol-title {
  margin-bottom: 10px !important; /* Уменьшаем отступ под заголовком */
}

.sol-desc {
  margin-bottom: 13px !important; /* Уменьшаем отступ под описанием */
}

/* Пункт 35 ТЗ: Универсальный международный стек шрифтов */
:root {
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans Arabic", sans-serif;
}

body {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Строгое требование ТЗ: мобильный текст не менее 16px */
@media (max-width: 768px) {
  body,
  p,
  .sol-desc,
  .why-card p,
  .wf-card p,
  .team-desc,
  .field input,
  .field select,
  .field textarea,
  .cb-text {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* Корректное направление для арабской локали */
html[lang="ar"] body {
  direction: rtl;
  text-align: right;
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
html[lang="ar"] .link-arrow i {
  transform: rotate(180deg);
  display: inline-block;
}

@media (pointer: coarse), (max-width: 1024px) {
  .sas-cursor {
    display: none !important;
  }
  body.sas-security,
  body.sas-security a,
  body.sas-security button,
  body.sas-security input,
  body.sas-security select,
  body.sas-security textarea,
  body.sas-security label {
    cursor: auto !important;
  }
}

.sas-fixed-communication {
  bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  right: calc(18px + env(safe-area-inset-right, 0px)) !important;
}

.to-top {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  right: calc(18px + env(safe-area-inset-right, 0px)) !important;
}

/* =========================================================
   ФИКС МОБИЛЬНОЙ ВЕРСИИ (IPHONE & ANDROID)
   ========================================================= */

/* 1. Жесткая фиксация хедера наверху экрана */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: rgba(26, 30, 33, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.admin-bar .site-header {
  top: 46px !important;
}

/* 2. Безопасные отступы слева и справа + пропорциональные шрифты на экранах до 640px */
@media (max-width: 640px) {
  :root {
    --pad: 16px !important;
  }

  .container,
  .header-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Компенсация высоты хедера для первого экрана */
  section.hero#hero,
  .hero {
    padding-top: 100px !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* Пропорциональные заголовки */
  .hero-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }

  .section-title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  .hero-sub,
  .section-sub {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
  }

  /* 3. Плашка фишек: 4 элемента строго в 2 ряда по 2 колонки (2х2) */
  .hero-features-bar-wrap {
    margin-top: 24px !important;
    border-top: 1px solid var(--line) !important;
  }

  .hero-features-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }

  .hero-feat-item {
    padding: 14px 10px !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--line) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Разделитель между колонками */
  .hero-feat-item:nth-child(odd) {
    border-right: 1px solid var(--line) !important;
  }

  .hero-feat-item:nth-child(3),
  .hero-feat-item:nth-child(4) {
    border-bottom: none !important;
  }

  .hero-feat-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .hero-feat-text {
    font-size: 11px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.02em !important;
  }
}

/* =========================================================
   ВОЗВРАТ ИДЕАЛЬНОГО ДЕСКТОПНОГО ХЕДЕРА И КРУПНОГО ЛОГОТИПА
   ========================================================= */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
  background: rgba(33, 37, 41, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.admin-bar .site-header {
  top: 32px !important;
}

.site-header .header-inner {
  height: 90px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Крупный, читаемый логотип на десктопе */
.site-header .brand-logo {
  max-height: 140px !important;
  height: 130px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  transform: scale(0.5) !important;
  transform-origin: left center !important;
}

/* Отступ 5px между логотипом и текстовым блоком рядом с ним */
.site-header .brand {
  gap: 5px !important;
}

/* Текст «ГРУППА ОХРАННЫХ ОРГАНИЗАЦИЙ / основано в 2012 году» рядом с логотипом */
.brand-tagline {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 130px !important; /* равно высоте .site-header .brand-logo на десктопе */
  color: #ffffff !important;
}

.brand-tagline-line {
  display: block !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
}

.brand-tagline-sub {
  display: block !important;
  margin-top: 8px !important;
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
}

/* =========================================================
   ИЗОЛИРОВАННАЯ МОБИЛЬНАЯ АДАПТАЦИЯ (ТОЛЬКО ЭКРАНЫ ДО 640px)
   ========================================================= */
@media screen and (max-width: 640px) {
  body.admin-bar .site-header {
    top: 46px !important;
  }

  .site-header .header-inner {
    height: 70px !important;
  }

  /* На смартфонах логотип крупный и пропорциональный */
  .site-header .brand-logo {
    max-height: 80px !important;
    height: 75px !important;
    transform: scale(0.5) !important;
  }
    .brand-tagline {
    height: 75px !important;
  }
  .brand-tagline-line {
    font-size: 11px !important;
  }
  .brand-tagline-sub {
    font-size: 8px !important;
    margin-top: 3px !important;
  }

  /* Отступы по 16px по бокам для всех блоков */
  .container,
  .header-container,
  main .container,
  section .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Отступ первого экрана под шапку */
  section.hero#hero {
    padding-top: 100px !important;
  }

  /* Шрифты заголовков на мобилке */
  .hero-title {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  .section-title {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  /* Сетка фишек первого экрана 2 в ряд */
  .hero-features-bar-wrap {
    margin-top: 20px !important;
  }

  .hero-features-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }

  .hero-feat-item {
    padding: 12px 8px !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--line) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .hero-feat-item:nth-child(odd) {
    border-right: 1px solid var(--line) !important;
  }

  .hero-feat-item:nth-child(3),
  .hero-feat-item:nth-child(4) {
    border-bottom: none !important;
  }

  .hero-feat-text {
    font-size: 11px !important;
  }

  /* Плавающие кнопки связи */
  .sas-fixed-communication {
    position: fixed !important;
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 99999 !important;
  }

  .to-top {
    position: fixed !important;
    right: 16px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 99998 !important;
  }
}

/* =========================================================
   МАССОВОЕ АВТОМАТИЧЕСКОЕ ЧЕРЕДОВАНИЕ ФОНОВ НА ВСЕХ СТРАНИЦАХ
   ========================================================= */

/* Шаг 1. Все секции внутри <main> по умолчанию светлые (контрастные), кроме Hero */
main > section:not(.hero) {
  background-color: var(--paper-bg, #f8f9fa) !important;
  color: var(--paper-ink, #111111) !important;
}

/* Перекрашиваем тексты и заголовки внутри светлых секций */
main > section:not(.hero) .section-title {
  color: var(--paper-ink, #111111) !important;
}

main > section:not(.hero) .section-sub,
main > section:not(.hero) .sol-desc,
main > section:not(.hero) p {
  color: #555555 !important;
}

/* Шаг 2. Каждая ЧЕТНАЯ секция после Hero автоматически становится ТЕМНОЙ */
main > section:not(.hero):nth-of-type(even) {
  background-color: var(--bg, #1a1e21) !important;
  color: var(--fg, #ffffff) !important;
}

/* Возвращаем светлые тексты и карточки для автоматически темных секций */
main > section:not(.hero):nth-of-type(even) .section-title {
  color: var(--fg, #ffffff) !important;
}

main > section:not(.hero):nth-of-type(even) .section-sub,
main > section:not(.hero):nth-of-type(even) .sol-desc,
main > section:not(.hero):nth-of-type(even) p {
  color: var(--fg-2, #adb5bd) !important;
}

/* Карточки (.sol-card) внутри темных секций */
main > section:not(.hero):nth-of-type(even) .sol-card {
  background: var(--panel, #212529) !important;
  border-color: var(--line, rgba(255,255,255,0.08)) !important;
  color: var(--fg, #ffffff) !important;
}

/* =========================================================
   ИНТЕРАКТИВНЫЙ ЖИВОЙ ГРАДИЕНТ ДЛЯ HERO-СЕКЦИИ
   ========================================================= */

.hero.section-dark {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #13171a, #1a2228, #0f1316, #21282e) !important;
  background-size: 300% 300% !important;
  animation: liveHeroGradient 12s ease infinite !important;
}

/* Плавное бесшовное переливание оттенков */
@keyframes liveHeroGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Дополнительный технологичный паттерн-вуаль поверх градиента для глубины */
.hero.section-dark::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Убеждаемся, что контент внутри героической секции всегда поверх анимации */
.hero.section-dark .container,
.hero.section-dark .hero-features-bar-wrap {
  position: relative !important;
  z-index: 2 !important;
}

/* =========================================================
   ИСПРАВЛЕНИЕ ВИЗУАЛЬНЫХ ДЕФЕКТОВ: УДАЛЕНИЕ ЛИНИЙ И УЛУЧШЕНИЕ ШРИФТОВ
   ========================================================= */

/* 1. Полное удаление дешевых разделительных линий между секциями */
section, .hero, .site-header, .sol-card, .ind-card, .wf-card, .why-card {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Оставляем только тонкую рамку у карточек для структуры */
.sol-card, .ind-card, .wf-card, .why-card {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* На светлых секциях рамки карточек делаем аккуратными */
section.section-light .sol-card,
section.section-light .ind-card,
section.section-light .wf-card,
section.section-light .why-card,
main > section:not(.hero):nth-of-type(odd) .sol-card,
main > section:not(.hero):nth-of-type(odd) .ind-card {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
}

/* 2. ПОВЫШЕНИЕ ЧИТЕМОСТИ И КОНТРАСТА ШРИФТОВ (Убираем "пропажу" текста) */

/* Заголовки всегда чистые и плотные */
h1, h2, h3, h4, h5, h6, 
.sol-title, .section-title, .hero-title, .team-name {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  -webkit-font-smoothing: antialiased !important;
}

/* На светлых секциях заголовки и текст темные */
section.section-light h1,
section.section-light h2,
section.section-light h3,
section.section-light h4,
section.section-light .section-title,
section.section-light .sol-title,
main > section:not(.hero):nth-of-type(odd) h1,
main > section:not(.hero):nth-of-type(odd) h2,
main > section:not(.hero):nth-of-type(odd) h3,
main > section:not(.hero):nth-of-type(odd) .sol-title {
  color: #111111 !important;
}

/* Основные описания (.sol-desc, p, .section-sub) — делаем яркими, чтобы они не "растворялись" */
.sol-desc, 
.section-sub, 
.hero-sub, 
.team-desc,
p {
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* На светлых секциях описания контрастные темно-серые */
section.section-light .sol-desc,
section.section-light .section-sub,
section.section-light p,
main > section:not(.hero):nth-of-type(odd) .sol-desc,
main > section:not(.hero):nth-of-type(odd) .section-sub,
main > section:not(.hero):nth-of-type(odd) p {
  color: #444444 !important;
}

/* Мелкие подписи и номера (01, 02 и т.д.) */
.sol-num {
  color: #99B2E3 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* =========================================================
   ИСПРАВЛЕНИЕ КОНТРАСТА, РАЗДЕЛИТЕЛЬНЫХ ЛИНИЙ И HOVER-ПОДСВЕТКИ
   ========================================================= */

/* 1. Возвращаем тонкую премиальную границу под Hero-секцией */
section.hero#hero, 
main > section.hero:first-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 2. ЖЕСТКИЙ КОНТРАСТ ТЕКСТА НА СВЕТЛЫХ (БЕЛЫХ) СЕКЦИЯХ */
section.section-light,
main > section:not(.hero):nth-of-type(odd) {
  background-color: #f4f6f8 !important; /* Чуть более глубокий чистый фон для контраста */
  color: #111111 !important;
}

section.section-light h1,
section.section-light h2,
section.section-light h3,
section.section-light h4,
section.section-light .section-title,
section.section-light .sol-title,
main > section:not(.hero):nth-of-type(odd) h1,
main > section:not(.hero):nth-of-type(odd) h2,
main > section:not(.hero):nth-of-type(odd) h3,
main > section:not(.hero):nth-of-type(odd) .sol-title {
  color: #0b0f12 !important; /* Угольно-черный для идеальной читаемости */
}

section.section-light .sol-desc,
section.section-light .section-sub,
section.section-light p,
main > section:not(.hero):nth-of-type(odd) .sol-desc,
main > section:not(.hero):nth-of-type(odd) .section-sub,
main > section:not(.hero):nth-of-type(odd) p {
  color: #33383d !important; /* Темно-серый текст вместо полупрозрачного */
  font-weight: 500 !important;
}

/* 3. ПОДСВЕТКА И HOVER ДЛЯ ВСЕХ КАРТОЧЕК (включая лицензии и услуги) */
.sol-card, .ind-card, .wf-card, .why-card, .team-card, .group-sub-card {
  transition: all 0.25s ease-in-out !important;
}

.sol-card:hover, .ind-card:hover, .wf-card:hover, .why-card:hover, .team-card:hover, .group-sub-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(220, 38, 38, 0.4) !important; /* Фирменная красная подсветка контура */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Для карточек на светлых секциях — темная тень и контрастный hover */
section.section-light .sol-card:hover,
main > section:not(.hero):nth-of-type(odd) .sol-card:hover {
  background: #ffffff !important;
  border-color: #5F666C !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08) !important;
}

/* Принудительный контраст для текста во всех белых карточках на сайте */
.ind-card p, 
.wf-card p, 
.sol-card p,
section.section-light p {
  color: #2b3137 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

.ind-card h4, 
.wf-card h4, 
section.section-light h2,
section.section-light h3,
section.section-light h4 {
  color: #0b0f12 !important;
}

/* =========================================================
   УНИВЕРСАЛЬНОЕ РАЗДЕЛЕНИЕ КОНТЕКСТА: ТЕМНЫЕ И СВЕТЛЫЕ СЕКЦИИ
   ========================================================= */

/* 1. Если карточка находится внутри ТЕМНОЙ секции (.section-dark или .section-dark-soft) */
.section-dark .sol-card h3,
.section-dark .sol-card h4,
.section-dark .sol-title,
.section-dark-soft .sol-card h3,
.section-dark-soft .sol-card h4,
.section-dark-soft .sol-title {
  color: #ffffff !important;
}

.section-dark .sol-card p,
.section-dark .sol-desc,
.section-dark-soft .sol-card p,
.section-dark-soft .sol-desc {
  color: #ced4da !important;
}

/* 2. Если карточка находится внутри СВЕТЛОЙ секции (.section-light) */
.section-light .sol-card h3,
.section-light .sol-card h4,
.section-light .sol-title,
.section-light .ind-card h4,
.section-light .wf-card h4 {
  color: #ffffff !important;
}

.section-light .sol-card p,
.section-light .sol-desc,
.section-light .ind-card p,
.section-light .wf-card p {
  color: #3b4249 !important;
}

/* =========================================================
   УЛУЧШЕНИЕ ГРАНИЦ И ТЕНЕЙ ДЛЯ БЕЛЫХ КАРТОЧЕК
   ========================================================= */

.section-light .sol-card,
.section-light .ind-card,
.section-light .wf-card,
.section-light .why-card {
  border: 1px solid rgba(0, 0, 0, 0.15) !important; /* Чуть темнее рамка для четких границ */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; /* Мягкая премиальная тень для объема */
}

/* При наведении делаем рамку еще выразительнее */
.section-light .sol-card:hover,
.section-light .ind-card:hover,
.section-light .wf-card:hover,
.section-light .why-card:hover {
  border-color: rgba(217, 4, 41, 0.5) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* =========================================================
   БАЛАНС ЛОГОТИПА И ТЕКСТА В ШАПКЕ (финальная версия)
   ========================================================= */
.site-header .brand-logo {
  max-height: 65px !important;
  height: 65px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  transform: none !important;
}

.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  overflow: hidden !important;
  max-height: 90px !important;
}

.brand-tagline {
  height: 65px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
}

.brand-tagline-line {
  display: block !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

.brand-tagline-sub {
  display: block !important;
  margin-top: 4px !important;
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

/* Арабский: направление и шрифт */
html[lang="ar"] .brand-tagline {
  text-align: right !important;
}
html[lang="ar"] .brand-tagline-line,
html[lang="ar"] .brand-tagline-sub {
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
}

/* Мобильная версия ≤640px */
@media screen and (max-width: 640px) {
  .site-header .brand-logo {
    max-height: 48px !important;
    height: 48px !important;
  }
  .site-header .brand {
    max-height: 70px !important;
    gap: 5px !important;
  }
  .brand-tagline {
    height: 48px !important;
  }
  .brand-tagline-line {
    font-size: 14px !important;
  }
  .brand-tagline-sub {
    font-size: 7px !important;
    margin-top: 2px !important;
  }
}

/* Отступы шапки = отступам остальной страницы (как у .container) */
.site-header .header-container {
  max-width: var(--container) !important;
  padding: 0 var(--pad) !important;
}

/* Отступ между блоком телефонов и кнопками в футере мобильного меню */
.mobile-menu-foot .header-cta-stack {
  margin-top: 24px;
}

/* Новый блок с Логотипами Партнеров */
.partner-logos-section {
	background: #f7f8fa;
	color: var(--fg);
	overflow: hidden;
}

.partner-logos-heading {
	max-width: 760px;
	margin-bottom: 44px;
}

.partner-slider {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) 52px;
	align-items: center;
	gap: 18px;
}

.partner-slider-viewport {
	overflow: hidden;
}

.partner-slider-track {
	display: flex;
	transition: transform 0.55s ease;
	will-change: transform;
}

.partner-slide {
	flex: 0 0 100%;
	min-width: 0;
}

.partner-logo-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
}

#partnerlogo .partner-logo-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	padding: 20px;
	background: #fff !important;
	border: 1px solid #e1e5e9;
	border-radius: 4px;
}

#partnerlogo .partner-logo-card img,
#partnerlogo .partner-logo-card:hover img {
	display: block;
	width: 100%;
	max-width: 210px;
	max-height: 105px;
	object-fit: contain;
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

.partner-slider-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	color: var(--fg);
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 50%;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.partner-slider-btn:hover,
.partner-slider-btn:focus-visible {
	color: #fff;
	background: var(--accent);
	border-color: var(--accent);
	outline: none;
}

@media (max-width: 900px) {
	.partner-logo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.partner-logo-card {
		min-height: 100px;
	}
}

@media (max-width: 600px) {
	.partner-logos-heading {
		margin-bottom: 30px;
	}

	.partner-slider {
		grid-template-columns: 42px minmax(0, 1fr) 42px;
		gap: 8px;
	}

	.partner-slider-btn {
		width: 42px;
		height: 42px;
		font-size: 23px;
	}

	.partner-logo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

		#partnerlogo .partner-logo-card {
		min-height: 105px;
		padding: 14px;
	}

	#partnerlogo .partner-logo-card img,
	#partnerlogo .partner-logo-card:hover img {
		max-width: 145px;
		max-height: 68px;
	}
}

/* Логотипы всегда листаются слева направо, независимо от языка сайта */
#partnerlogo .partner-slider,
#partnerlogo .partner-slider-viewport,
#partnerlogo .partner-slider-track {
	direction: ltr;
}

/* Стрелки сохраняют физическое направление слайдера */
html[lang="ar"] #partnerlogo .partner-slider-prev span,
html[lang="ar"] #partnerlogo .partner-slider-next span {
	transform: none;
}

/* ---------- Тарифная таблица ---------- */
.price-table-wrap {
	width: min(100%, 900px);
	margin-inline: auto;
	overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--paper-line);
	background: #ffffff;
}

.price-table-title {
	width: min(100%, 900px);
	margin: 0 auto 18px;
	color: #0b0f12;
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}

#priceTable .price-table-title {
	color: #ffffff !important;
}

.price-table-wrap + .price-table-title {
	margin-top: 44px;
}

.price-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
	table-layout: fixed;
  font-size: 14px;
}

.price-table th,
.price-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--paper-line);
}

.price-table th {
	text-align: center;
	vertical-align: middle;
	color: #0b0f12;
	font-weight: 700;
}

.price-table td {
	text-align: left;
	color: #33383d;
	font-weight: 500;
}

html:not([lang="ar"]) .price-table th {
	text-align: left;
	vertical-align: middle;
}

html:not([lang="ar"]) .price-table td {
	text-align: left;
	vertical-align: top;
}

.price-table-feature-col {
  width: 58%;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.price-plan-col {
	width: 21%;
	min-width: 0;
	font-size: 14px;
}

.price-table--cols-2 .price-plan-col {
	width: 50%;
}

.price-table--cols-2 .price-table-feature-col ~ .price-plan-col {
	width: 42%;
}

/* Первая таблица пультовой охраны: больше места для двух тарифов. */
.price-table--price_pulse_business .price-table-feature-col {
	width: 52%;
}

.price-table--price_pulse_business .price-table-feature-col ~ .price-plan-col {
	width: 24%;
}

.price-feature-label {
}

.price-feature-val {
	vertical-align: top;
	text-align: left;
}

.price-feature-dash {
	color: inherit;
}

.price-table-section-row td {
	background: #f3f5f6;
	color: #0b0f12;
	font-weight: 700;
}

.price-table-section-row .price-feature-label {
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.price-table th,
.price-table td {
	overflow-wrap: anywhere;
	hyphens: auto;
}

html[lang="ar"] .price-table td {
	text-align: right;
	vertical-align: top;
}

html[lang="ar"] .price-table th {
	text-align: right;
	vertical-align: middle;
}

.price-note {
  max-width: 760px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 14px;
  font-style: italic;
  color: var(--paper-mut);
}

@media (max-width: 900px) {
  .price-table {
    font-size: 13px;
  }

  .price-table th,
  .price-table td {
    padding: 12px;
  }

  .price-table-feature-col {
    width: 60%;
    font-size: 12px;
    letter-spacing: 0.03em;
  }

  .price-plan-col {
    width: 20%;
    font-size: 13px;
  }

  .price-table--cols-2 .price-table-feature-col ~ .price-plan-col {
    width: 40%;
  }

  .price-table--price_pulse_business .price-table-feature-col {
    width: 54%;
  }

  .price-table--price_pulse_business .price-table-feature-col ~ .price-plan-col {
    width: 23%;
  }
}

@media (max-width: 480px) {
  .price-table {
    font-size: 12px;
  }

  .price-table th,
  .price-table td {
    padding: 10px 8px;
    line-height: 1.4;
  }

  .price-table-feature-col {
    width: 62%;
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  .price-plan-col {
    width: 19%;
    font-size: 12px;
  }

  .price-table--cols-2 .price-table-feature-col ~ .price-plan-col {
    width: 38%;
  }

  .price-table--price_pulse_business .price-table-feature-col {
    width: 56%;
  }

  .price-table--price_pulse_business .price-table-feature-col ~ .price-plan-col {
    width: 22%;
  }
}

/* ---------- Каталог оборудования технических систем ---------- */
.technical-catalog-hero {
	min-height: 42vh !important;
	padding-top: 150px !important;
	padding-bottom: clamp(35px, 5.5vw, 70px) !important;
}

/* На страницах тарифов нижний воздух hero равен верхнему padding следующей .section. */
#priceHero .hero-inner {
	padding-bottom: 0 !important;
}

#priceHero .hero-sub,
#priceHero .hero-title:last-child {
	margin-bottom: 0 !important;
}

.technical-catalog-group + .technical-catalog-group {
	margin-top: 72px;
}

.technical-catalog-group-title {
	margin: 0 0 24px;
	color: #ffffff !important;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 700;
	line-height: 1.2;
}

#technicalCatalog .technical-catalog-group-title {
	color: #ffffff !important;
}

.technical-catalog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.technical-catalog-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--paper-line);
	border-radius: var(--radius-lg);
	background: #fff;
}

.technical-catalog-card-media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	border-bottom: 1px solid var(--paper-line);
	background: #f3f5f6;
}

.technical-catalog-card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 18px;
}

.technical-catalog-card-media--placeholder {
	color: #69737c;
}

.technical-catalog-card-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 24px;
}

.technical-catalog-card-category {
	margin: 0 0 10px;
	color: #5f666c !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.technical-catalog-card h3 {
	margin: 0;
	color: #0b0f12;
	font-size: 20px;
	line-height: 1.25;
}

.technical-catalog-card-subtitle {
	margin: 8px 0 0;
	color: #3366c6 !important;
	font-size: 14px;
	font-weight: 600;
}

.technical-catalog-card-features {
	margin: 18px 0;
	padding-left: 18px;
	color: #33383d;
	font-size: 14px;
	line-height: 1.5;
}

.technical-catalog-card-features li + li {
	margin-top: 6px;
}

.technical-catalog-card-description {
	margin: 0;
	color: #33383d !important;
	font-size: 13px;
	line-height: 1.55;
}

.technical-mobile-app-block {
	display: grid;
	grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--paper-line);
	border-radius: var(--radius-lg);
	background: #ffffff;
}

.technical-mobile-app-media {
	display: grid;
	place-items: center;
	min-height: 360px;
	padding: 32px;
	border-right: 1px solid var(--paper-line);
	background: #f3f5f6;
}

.technical-mobile-app-media img {
	display: block;
	max-width: 100%;
	max-height: 360px;
	object-fit: contain;
}

.technical-mobile-app-content {
	display: flex;
	flex-direction: column;
	padding: 40px;
}

.technical-mobile-app-content h3 {
	margin: 0;
	color: #0b0f12;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.25;
}

#technicalCatalog .technical-mobile-app-content .technical-catalog-card-description {
	max-width: 760px;
}

.technical-catalog-cta {
	margin-top: 56px;
	text-align: center;
}

#technicalCatalog .technical-catalog-card-category,
#technicalCatalog .technical-catalog-card-subtitle {
	color: #5f666c !important;
}

#technicalCatalog .technical-catalog-card-subtitle {
	color: #3366c6 !important;
}

#technicalCatalog .technical-catalog-card-description {
	color: #33383d !important;
}

html[lang="ar"] .technical-catalog-card-content,
html[lang="ar"] .technical-catalog-group-title {
	direction: rtl;
	text-align: right;
}

html[lang="ar"] .technical-catalog-card-features {
	padding-right: 18px;
	padding-left: 0;
}

/* Арабская версия: единое RTL-выравнивание содержимого и шапки. */
html[lang="ar"] h1,
html[lang="ar"] main .eyebrow,
html[lang="ar"] main p,
html[lang="ar"] main .section-sub,
html[lang="ar"] main .hero-sub,
html[lang="ar"] main .sol-desc,
html[lang="ar"] main .team-desc,
html[lang="ar"] main .technical-catalog-card-description {
	text-align: right !important;
}

html[lang="ar"] main .section-head,
html[lang="ar"] main .hero-inner {
	text-align: right;
}

html[lang="ar"] .header-inner {
	/* Логотип (первый в DOM) — справа, действия (последние) — слева. */
	direction: ltr;
	flex-direction: row-reverse;
}

html[lang="ar"] .site-header .header-actions {
	direction: rtl;
	/* Override the LTR auto margin so actions stay at the left edge. */
	margin-left: 0 !important;
	margin-right: auto !important;
}

html[lang="ar"] .site-header .brand {
	direction: rtl;
	margin-right: 0;
	margin-left: 0;
}

html[lang="ar"] .site-header .nav-menu {
	gap: 10px !important;
}

@media (max-width: 900px) {
	.technical-catalog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.technical-catalog-hero {
		padding-top: 124px !important;
		padding-bottom: 35px !important;
	}

	.technical-catalog-group + .technical-catalog-group {
		margin-top: 52px;
	}

	.technical-catalog-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.technical-catalog-card-content {
		padding: 20px;
	}

	#technicalCatalog .technical-catalog-card-media img,
	#technicalCatalog .technical-mobile-app-media img {
		transform: translateX(-6px);
	}

	.technical-mobile-app-block {
		grid-template-columns: 1fr;
	}

	.technical-mobile-app-media {
		min-height: 280px;
		padding: 24px;
		border-right: 0;
		border-bottom: 1px solid var(--paper-line);
	}

	.technical-mobile-app-media img {
		max-height: 280px;
	}

	.technical-mobile-app-content {
		padding: 24px 20px;
	}
}

@media (max-width: 770px) {
	.technical-mobile-app-block {
		grid-template-columns: 1fr;
	}

	.technical-mobile-app-media {
		min-height: 280px;
		padding: 24px;
		border-right: 0;
		border-bottom: 1px solid var(--paper-line);
	}

	.technical-mobile-app-media img {
		max-height: 280px;
	}

	.technical-mobile-app-content {
		padding: 24px 20px;
	}
}

/* Блок «Как мы работаем» на странице отраслей. */
.industries-workflow .sol-card.reveal {
	border-color: #5f666c !important;
}

.industries-workflow .sol-card .sol-title {
	color: #0b0f12 !important;
}

.industries-workflow .sol-card .sol-desc {
	color: #33383d !important;
}

/* Arabic service pages: override inline left alignment of section headings. */
html[lang="ar"] body:is(
  .page-template-page-monitoring-response,
  .page-template-page-physical-security,
  .page-template-page-uto-security,
  .page-template-page-technical-security,
  .page-template-page-k9-security,
  .page-template-page-female-security,
  .page-template-page-specialized-solutions,
  .page-template-page-specialized-transportation,
  .page-template-page-international-companies
) main :is(.section-head, h2) {
  text-align: right !important;
}

/* Telephone numbers only: preserve typography and alignment in every language. */
.phone-num,
a.mobile-phone[href^="tel:"],
a.f-phone[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Client review carousel. */
#reviews { background: #212529; color: #f8f9fa; container-type: inline-size; }
#reviews .section-head { margin-bottom: 24px; }
#reviews .section-title { color: #f8f9fa !important; }
#reviews .section-sub { color: #ced4da !important; }
.reviews-controls { display: flex; justify-content: flex-end; direction: ltr; gap: 10px; margin-bottom: 24px; }
.reviews-arrow { flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; position: relative; border: 1px solid #5f666c; border-radius: 50%; background: transparent; color: #f8f9fa; font: inherit; font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s, opacity .2s; }
.reviews-arrow > span[aria-hidden="true"] { display: block; line-height: 1; }
.reviews-arrow:hover:not(:disabled) { background: #343a40; }
.reviews-arrow:disabled { opacity: .3; cursor: default; }
.reviews-arrow:focus-visible, .review-link:focus-visible, .reviews-track:focus-visible { outline: 2px solid #99b2e3; outline-offset: 4px; }
.reviews-track { --reviews-edge: calc((100cqw - 100%) / 2); margin-inline: calc(-1 * var(--reviews-edge)); padding-inline: var(--reviews-edge); scroll-padding-inline: calc((100cqw - min(100cqw, var(--container))) / 2 + var(--pad)); display: flex; gap: 20px; overflow-x: auto; direction: ltr; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.reviews-track::-webkit-scrollbar { display: none; }
.review-card { flex: 0 0 calc((100% - 60px) / 3.35); min-width: 0; display: flex; flex-direction: column; padding: 28px; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 22px; scroll-snap-align: start; }
.review-stars { color: #3366c6; font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 14px; direction: ltr; }
#reviews .review-text { color: #33383d !important; font-family: var(--sans); font-size: 13.5px !important; line-height: 1.6; margin: 0 0 28px; flex: 1; }
.review-foot { display: flex; align-items: flex-end; justify-content: flex-end; direction: ltr; gap: 16px; flex-wrap: wrap; }
#reviews .review-name { color: #0b0f12 !important; font-family: var(--sans); font-size: 18px; line-height: 1.15; margin: 0 0 4px; }
.review-link { color: #33383d; font-size: 14px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.review-link:hover { color: #33383d; }
.reviews-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[lang="ar"] #reviews .section-head, html[lang="ar"] .review-card { direction: rtl; text-align: right; }
@media (max-width: 1100px) { .review-card { flex-basis: calc((100% - 40px) / 2.25); padding: 24px; } }
@media (max-width: 640px) { .reviews-track { gap: 14px; } .review-card { flex-basis: 88%; padding: 22px; } #reviews .review-text { font-size: 13.5px; } }

.reviews-track { cursor: grab; }
.reviews-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.reviews-track.is-dragging * { cursor: grabbing; user-select: none; }

/* Match the existing alternating light section background. */
main > section#reviews:nth-of-type(odd) .section-title { color: #0b0f12 !important; }
main > section#reviews:nth-of-type(odd) .section-sub { color: #33383d !important; }
main > section#reviews:nth-of-type(odd) .reviews-arrow { color: #33383d; }
main > section#reviews:nth-of-type(odd) .reviews-arrow:hover:not(:disabled) { color: #ffffff; }

.review-heading { display: flex; direction: ltr; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
#reviews .review-heading .review-name { margin: 0; min-width: 0; overflow-wrap: anywhere; text-align: left; }
.review-heading .review-stars { flex-shrink: 0; white-space: nowrap; }
html[lang="ar"] .review-heading .review-name { direction: rtl; }

#reviews .review-name { white-space: pre-line; }
.review-heading .review-stars { line-height: 25.2px; }

/* Компании группы на странице «О компании». */
#aboutGroup .section-head { max-width: none; margin-inline: 0; }
#aboutGroup .about-group-intro { max-width: none; margin: 0 0 40px; }
#aboutGroup .about-group-intro p { margin: 0 0 16px; line-height: 1.8; }
#aboutGroup .about-group-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
#aboutGroup .about-group-card { display: grid; grid-template-columns: clamp(140px, 20vw, 240px) minmax(0, 1fr); align-items: start; gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 3vw, 40px); background: #fff; border: 1px solid #dce0e4; border-top: 3px solid #2b2d42; border-radius: 20px; min-width: 0; }
#aboutGroup .about-group-logo-slot { width: 100%; aspect-ratio: 1; min-width: 0; }
#aboutGroup .about-group-logo-slot img { display: block; width: 100%; height: 100%; object-fit: contain; }
#aboutGroup .about-group-content { min-width: 0; overflow-wrap: anywhere; }
#aboutGroup .about-group-name { margin: 0 0 10px; font-size: clamp(22px, 2.2vw, 28px); }
#aboutGroup .about-group-role { color: #3366c6 !important; font-weight: 700 !important; margin: 0 0 24px; }
#aboutGroup .about-group-description { margin: 0 0 16px; line-height: 1.8; }
#aboutGroup .about-group-directions { color: #33383d !important; margin: 24px 0 12px; font-size: 17px; }
#aboutGroup .about-group-list { color: #33383d; margin: 0 0 24px; padding-inline-start: 22px; line-height: 1.75; list-style: disc; }
#aboutGroup .about-group-list li + li { margin-top: 7px; }
#aboutGroup .about-group-focus { margin: 0; padding-top: 22px; border-top: 1px solid #dce0e4; line-height: 1.7; }
@media (max-width: 640px) {
  #aboutGroup .about-group-card { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px 16px; }
  #aboutGroup .about-group-logo-slot { max-width: 270px; justify-self: center; }
  #aboutGroup .about-group-name { font-size: 20px; }
}

#aboutPrinciplesGrid .why-card p { color: #33383d !important; }

/* Management cards: three across, two on tablets, one on phones. */
#management .team-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); }
#management .team-card:hover { border-color: #33383d !important; }
#management .team-name {
  color: #33383d;
  font-size: 16px;
  line-height: 1.3;
  text-transform: uppercase;
}
#management .team-role {
  color: #3366c6 !important;
  font-size: 12px;
  text-transform: uppercase;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 6px 0;
}
#management .team-desc {
  color: #33383d !important;
  font-size: 14px !important;
}
#management .team-desc + .team-desc { margin-top: 14px; }
#management .team-responsibility { margin-top: 18px; }
@media (max-width: 1100px) {
  #management .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #management .team-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Eyebrow text and rule always share the section color. */
main section:not(.hero) .eyebrow { color: #5f666c !important; }
main section:not(.hero) .eyebrow::before { background-color: #5f666c !important; }
main section:is(
  #about, #partnerlogo, #workflow, #industriesGridSection, #foreign, #why, #principles, #contacts,
  #aboutMission, #aboutPrinciplesGrid, #lawsSection,
  #physApproachOverview, #physWorkflow, #pulseWorkflowOverview, #utoLegal,
  #techApproach, #k9Overview, #femaleOverview, #transOverview, #foreignLegalOverview
) .eyebrow { color: #99b2e3 !important; }
main section:is(
  #about, #partnerlogo, #workflow, #industriesGridSection, #foreign, #why, #principles, #contacts,
  #aboutMission, #aboutPrinciplesGrid, #lawsSection,
  #physApproachOverview, #physWorkflow, #pulseWorkflowOverview, #utoLegal,
  #techApproach, #k9Overview, #femaleOverview, #transOverview, #foreignLegalOverview
) .eyebrow::before { background-color: #99b2e3 !important; }

main section.hero .eyebrow { color: #99b2e3 !important; }
main section.hero .eyebrow::before { background-color: #99b2e3 !important; }

/* Правовая информация: заголовки секций справа в арабской версии. */
html[lang="ar"] main :is(#lawsSection, #internalDocsSection) .section-head,
html[lang="ar"] main :is(#lawsSection, #internalDocsSection) .section-head h2,
html[lang="ar"] main :is(#lawsSection, #internalDocsSection) .section-head .eyebrow {
  text-align: right !important;
}

/* О компании: заголовки секций справа в арабской версии. */
html[lang="ar"] main :is(#aboutMission, #aboutGroup, #aboutPrinciplesGrid) .section-head,
html[lang="ar"] main :is(#aboutMission, #aboutGroup, #aboutPrinciplesGrid) .section-head h2,
html[lang="ar"] main :is(#aboutMission, #aboutGroup, #aboutPrinciplesGrid) .section-head .eyebrow {
  text-align: right !important;
}

/* Every hero uses full-width stacked actions on phones, independent of language. */
@media (max-width: 640px) {
  main section.hero .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  main section.hero .hero-cta > .btn {
    width: 100%;
    flex: none;
  }
}

/* Hero outline actions have a white border at rest and the standard red hover. */
main section.hero .btn.btn-outline.btn-lg {
  border-color: #fff !important;
}
main section.hero .btn.btn-outline.btn-lg:hover {
  border-color: var(--accent) !important;
}

/* Requested outline treatment for the About and international-project links. */
main section:is(#about, #foreign) .btn.btn-outline.btn-lg {
  border-color: #fff !important;
  color: #fff !important;
}
main section:is(#about, #foreign) .btn.btn-outline.btn-lg:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* The industries page uses the light eyebrow color for its workflow section. */
main #industriesGridSection ~ section#workflow .eyebrow { color: #5f666c !important; }
main #industriesGridSection ~ section#workflow .eyebrow::before { background-color: #5f666c !important; }

/* =========================================================
   ПЕРЕХОД НА БУРГЕР ДО 1920px (ЧТОБЫ КНОПКИ НЕ ВЫЛЕТАЛИ)
   ========================================================= */
/* =========================================================
   ПОЛНОРАЗМЕРНЫЙ ХЕДЕР ДЛЯ FULL HD (БЕЗ БУРГЕРА)
   ========================================================= */

/* 1. Максимально полезная ширина шапки */
.site-header .header-container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

.site-header .header-inner {
  width: 100% !important;
  max-width: 100% !important;
  gap: 10px !important;
}

/* 2. Компактный отступ у бренда */
.site-header .brand {
  margin-right: 6px !important;
  flex-shrink: 0 !important;
}

/* 3. Горизонтальное меню: строго в одну строку */
.site-header .nav-menu {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  margin: 0 auto !important;
  flex-shrink: 1 !important;
}

.site-header .nav-menu a {
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  padding: 4px 0 !important;
  white-space: nowrap !important;
}

/* 4. Блок контактов и действий справа */
.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* 5. Телефоны */
.site-header .header-phones-desktop {
  display: flex !important;
  gap: 2px !important;
  line-height: 1.15 !important;
}

.site-header .header-phones-desktop .header-phone {
  font-size: 11px !important;
  gap: 4px !important;
}

.site-header .header-phones-desktop .phone-pref {
  font-size: 9px !important;
}

/* 6. Селектор языка */
.site-header .lang-dd-toggle {
  padding: 6px 10px !important;
  font-size: 11.5px !important;
  gap: 4px !important;
}

.site-header .lang-dd-name {
  max-width: 48px !important;
}

/* 7. Две кнопки в 2 этажа */
.site-header .header-cta-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
}

.site-header .header-cta-stack .btn {
  display: inline-flex !important;
  padding: 7px 11px !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
  border-radius: 6px !important;
}

/* Бургер скрыт на всех десктопах шире 1280px */
@media (min-width: 1281px) {
  .site-header .burger {
    display: none !important;
  }
}

/* Бургер включается только на ноутбуках и планшетах менее 1280px */
@media (max-width: 1280px) {
  .site-header .nav-menu {
    display: none !important;
  }
  .site-header .header-phones-desktop {
    display: none !important;
  }
  .site-header .burger {
    display: block !important;
  }
}

/* =========================================================
   ФИНАЛЬНЫЙ АДАПТИВНЫЙ ХЕДЕР: ДЕСКТОП В ЛИНИЮ + ЧИСТАЯ МОБИЛКА
   ========================================================= */

/* 1. Общие настройки для десктопа (широкие экраны от 1201px) */
@media (min-width: 1201px) {
  .site-header .header-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  .site-header .header-inner {
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  .site-header .brand {
    margin-right: 6px !important;
    flex-shrink: 0 !important;
  }

  .site-header .nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    margin: 0 auto !important;
    flex-shrink: 1 !important;
  }

  .site-header .nav-menu a {
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
    padding: 4px 0 !important;
    white-space: nowrap !important;
  }

  .site-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .site-header .header-phones-desktop {
    display: flex !important;
    gap: 2px !important;
    line-height: 1.15 !important;
  }

  .site-header .header-phones-desktop .header-phone {
    font-size: 11px !important;
    gap: 4px !important;
  }

  .site-header .lang-dd-toggle {
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
  }

  .site-header .header-cta-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
  }

  .site-header .header-cta-stack .btn {
    display: inline-flex !important;
    padding: 7px 11px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    letter-spacing: 0.01em !important;
    border-radius: 6px !important;
  }

  /* Бургер на десктопе строго выключен */
  .site-header .burger {
    display: none !important;
  }
}

/* 2. Мобильные устройства и планшеты (до 1200px) */
@media (max-width: 1200px) {
  /* Прячем длинное меню и телефоны */
  .site-header .nav-menu {
    display: none !important;
  }

  .site-header .header-phones-desktop {
    display: none !important;
  }

  /* Прячем обе десктопные кнопки, чтобы они не вытесняли бургер */
  .site-header .header-cta-stack {
    display: none !important;
  }

  .site-header .header-cta,
  .site-header .header-cta-audit {
    display: none !important;
  }

  /* Показываем бургер */
  .site-header .burger {
    display: block !important;
    flex-shrink: 0 !important;
  }

  .site-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
  }
}

/* Компактный переключатель языков: оставляем только код (KZ, RU, EN и т.д.) */
.site-header .lang-dd-name {
  display: none !important;
}

.site-header .lang-dd-toggle {
  padding: 6px 8px !important;
  gap: 3px !important;
}

.site-header .lang-dd-code {
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Компактный зазор в казахской и немецкой версиях */
html[lang="kk"] .site-header .nav-menu,
html[lang="de"] .site-header .nav-menu {
  gap: 8px !important;
}

html[lang="kk"] .site-header .nav-menu a,
html[lang="de"] .site-header .nav-menu a {
  font-size: 10px !important;
  letter-spacing: 0.01em !important;
}

.lang-dd-menu a[data-lang-set] {
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}
.lang-dd-menu a[data-lang-set]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Фото слева, текст справа */
#management .team-grid {
  grid-template-columns: minmax(0, 1fr);
}

#management .team-card:first-child {
  display: grid;
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  direction: ltr;
  align-items: stretch;
}

#management .team-card:first-child .team-photo {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

#management .team-card:first-child .team-card-body {
  min-width: 0;
  align-self: center;
}

/* Арабский: фото справа, текст слева */
html[lang="ar"] #management .team-card:first-child {
  direction: rtl;
}

/* Мобильные: фото сверху, текст снизу на всех языках */
@media (max-width: 767px) {
  #management .team-card:first-child {
    grid-template-columns: minmax(0, 1fr);
  }

  #management .team-card:first-child .team-photo {
    grid-row: 1;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  #management .team-card:first-child .team-card-body {
    grid-row: 2;
  }
}