:root {
  --primary:    #000000;
  --accent:     #bbbbbb;
  --light-bg:   #f4f6f9;
  --white:      #ffffff;
  --text:       #2e3a46;
  --muted:      #6c7a89;
  --footer-bg:  #000000;
  --header-h:   78px;
  --radius:     6px;
  --shadow:     0 4px 24px rgba(26,58,92,.13);
  --transition: 0s ease;
}

::selection {
  background-color: #ffffff54; /* Цвет фона выделения */
  color: #6bb932; /* Цвет текста */
}


/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  line-height: 1.5;
  font-size: 16px;
  color: var(--text);
  padding-top: var(--header-h);
}

a { color: inherit; text-decoration: none; transition: color var(--transition); }
img { max-width: 100%; display: block; }

/* ── HEADER ───────────────────────────────────────────────── */
#mainHeader {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  background: var(--primary);
  height: var(--header-h);
  box-shadow: 0 2px 16px rgba(26,58,92,.10);
  transition: box-shadow var(--transition);
}
#mainHeader.scrolled {
  box-shadow: 0 4px 28px rgba(26,58,92,.18);
}

/* Logo */
.logo-wrap { display: flex; align-items: center; gap: 11px; }
.logo-icon {
  width: 42px; height: 42px;
  background: var(--primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-icon svg { fill: var(--accent); }
.logo-text {
  font-family: "Lato", Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .04em;
  line-height: 1.1;
}
.logo-text span { color: var(--accent); }

/* Phone in header */
.header-phone {
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
  letter-spacing: .02em;
  white-space: nowrap;
}
.header-phone i { color: #fff; margin-right: 5px; }
.header-phone:hover { color: var(--accent); }

/* Navbar */
.navbar { padding: 0; height: var(--header-h); }
.navbar-nav .nav-link {
  /* font-family: 'Raleway', sans-serif; */
  font-weight: 600;
  font-size: .88rem;
  color: #fff !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0 14px !important;
  height: var(--header-h);
  display: flex;
  align-items: center;
  position: relative;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-item.active .nav-link::after { transform: scaleX(1); }
.navbar-nav .nav-link:hover { color: var(--accent) !important; }

/* Для Bootstrap 4 и 5 открытие меню при наведении - не срабатывает*/
.navbar .nav-item:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Опционально: убирает разрыв между кнопкой и меню */
}
@media (min-width: 992px) {
    .navbar .nav-item:hover .dropdown-menu {
        display: block;
    }
}

/* Dropdown */
.dropdown-menu {
    background: #ddd;
    border: none;
    border-top: 3px;
    border-radius: 0 0 var(--radius) var(--radius);
    min-width: 220px;
    padding: 1px 0;

}
@keyframes dropIn {
  from { opacity:0; transform: translateY(-8px); }
  to   { opacity:1; transform: translateY(0); }
}
.dropdown-item {
  /* font-size: .85rem; */
  font-weight: 500;
  color: #000;
  padding: 9px 22px;
  letter-spacing: .03em;
}
.dropdown-item:hover {
  background: #b7b7b7;
  color: #ffffff;
}

/* ── HERO / MAIN CONTENT ──────────────────────────────────── */
.hero-section {
  background: var(--primary);
  color: var(--white);
  padding: 90px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero-section .badge-tag {
 display: inline-block;
 background: rgb(96 163 38);
 font-size: .78rem;
 letter-spacing: .12em;
 text-transform: uppercase;
 padding: 5px 14px;
 margin-bottom: 22px;
}
.hero-section h1 {
  font-family: "Lato", Arial, sans-serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.18;
  margin-bottom: 24px;
}
.hero-section h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero-section p.lead {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.8;
  opacity: .85;
  max-width: 670px;
}
.btn-accent {
  background: var(--accent);
  color: var(--white);
  border: none;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 34px;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-accent:hover {
  background: #1c57a3;
  color: var(--white);
}
.btn-outline-light-custom {
  border: 1px solid rgba(255,255,255,.45);
  color: var(--white);
  background: transparent;
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 32px;
  border-radius: var(--radius);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-outline-light-custom:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.8);
  color: var(--white);
}

/* Stats ribbon */
.stats-ribbon {
  background: var(--white);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 30px 40px;
  margin-top: -40px;
  position: relative;
  z-index: 5;
}
.stat-item { text-align: center; }
.stat-item .num {
  font-family: "Lato", Arial, sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.stat-item .num span { color: var(--accent); }
.stat-item .lbl {
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 4px;
}
.stat-divider {
  width: 1px;
  background: var(--light-bg);
  align-self: stretch;
}

/* Content section */
.content-section { padding: 80px 0; }
.section-label {
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section-title {
  font-family: "Lato", Arial, sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.25;
  margin-bottom: 20px;
}
.section-text {
  font-size: .98rem;
  line-height: 1.85;
  color: var(--muted);
  margin-bottom: 18px;
}

/* Content section */
.content-section-2 { padding: 80px 0; background: #dee6cf;}
.section-label {
  font-weight: 700;
  color: rgb(96 163 38);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section-title {
  font-family: "Lato", Arial, sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.25;
  margin-bottom: 20px;
}
.section-text {
  font-size: .98rem;
  line-height: 1.85;
  color: var(--muted);
  margin-bottom: 18px;
}

/* Service cards */
.service-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px 30px;
  box-shadow: 0 2px 16px rgba(26,58,92,.07);
  transition: transform var(--transition), box-shadow var(--transition);
  height: 100%;
  border-bottom: 3px solid transparent;
}
.service-card:hover {
  box-shadow: var(--shadow);
  border-bottom-color: var(--accent);
}
.service-card .icon {
  width: 52px; height: 52px;
  background: rgba(26,58,92,.07);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  font-size: 1.5rem;
  color: var(--primary);
  transition: background var(--transition), color var(--transition);
}
.service-card:hover .icon { color: var(--accent); }
.service-card h5 {
  font-family: "Lato", Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
}
.service-card p {
  font-size: .88rem;
  line-height: 1.75;
  color: var(--muted);
}

/* ── FOOTER ───────────────────────────────────────────────── */
#mainFooter {
  background: var(--footer-bg);
  color: rgba(255,255,255,.65);
  padding: 56px 0 0;
}
.footer-logo .logo-text { color: var(--white); }
.footer-desc {
  font-size: .88rem;
  line-height: 1.75;
  margin-top: 14px;
  max-width: 280px;
}
.footer-title {
  font-family: "Lato", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 10px;
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  font-size: .88rem;
  color: rgba(255,255,255,.55);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--accent); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
  margin-top: 40px;
  font-size: .82rem;
}
.footer-bottom a { color: rgba(255,255,255,.55); }
.footer-bottom a:hover { color: var(--accent); }

/* Scroll-to-top */
#scrollTopBtn {
  position: fixed;
  bottom: 32px; right: 32px;
  z-index: 999;
  width: 46px; height: 46px;
  background: rgb(96 163 38);
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
  display: flex; align-items: center; justify-content: center;
}
#scrollTopBtn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
#scrollTopBtn:hover { background: rgb(96 163 38); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .navbar-collapse {
    /* background: var(--white); */
    background: #6a6a6a;
    padding: 16px 20px 20px;
    box-shadow: 0 8px 20px rgba(26,58,92,.12);
    margin-top: 4px;
  }
  .navbar-nav .nav-link {
    height: auto;
    padding: 10px 6px !important;
  }
  .navbar-nav .nav-link::after { display: none; }
  .header-phone { font-size: .85rem; }
  .stats-ribbon { padding: 24px 20px; }
  .stat-divider { display: none; }
}
@media (max-width: 576px) {
  .hero-section { padding: 60px 0 50px; }
  .stats-ribbon { margin-top: -20px; }
}