:root{
  --bg:#0b1224;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --primary:#1D4ED8; /* business blue */
  --primary-600:#1E40AF;
  --primary-700:#1B3A99;
  --accent:#0EA5E9;
  --danger:#ef4444;
  --success:#16a34a;
  --block-bg:rgba(255,255,255,.06);
  --block-border:rgba(255,255,255,.22);
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 10px 24px rgba(0,0,0,.15);
  --hdr-h:80px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family:Manrope, Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:#0f172a;
  background:#f8fafc;
  letter-spacing:.2px;
}

.container{
  width:min(1200px, 92vw);
  margin-inline:auto;
}


/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  height:var(--hdr-h);
  backdrop-filter:saturate(180%) blur(10px);
  background:
    linear-gradient(135deg, rgba(14,165,233,.10), rgba(99,102,241,.10), rgba(236,72,153,.08));
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 20px rgba(2,6,23,.06);
}
/* Over-hero transparent header mode */
.site-header.is-over-hero{
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  backdrop-filter: none;
}
.site-header.is-over-hero .brand-link{ color:#fff; }
.site-header.is-over-hero .brand-badge{
  color:#e5e7eb;
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.2);
}
.site-header.is-over-hero .site-nav a{ color:#fff; }
.site-header.is-over-hero .site-nav a:hover{ background: rgba(255,255,255,.12); }
.site-header.is-over-hero .site-nav .divider{ background: rgba(255,255,255,.35); }
.site-header.is-over-hero .nav-toggle-btn span{ background:#fff; }
.site-header.is-over-hero .btn-apply{
  color:#fff !important;
  background:#048848 !important;
  border:1px solid rgba(255,255,255,.15);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0;
  gap:16px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-link{
  display:inline-block;
  padding:0;
  color:#0f172a; text-decoration:none; font-weight:900; letter-spacing:.6px; text-transform:uppercase;
}
.brand-badge{
  font-size:12px; color:#6b7280; background:#f3f4f6; padding:2px 8px; border-radius:999px;
  border:1px solid #e5e7eb;
}

/* Logo transparency over video and regular header */
.site-header .brand img{
  opacity:.85;
  transition:opacity .2s ease, filter .2s ease;
}
.site-header.is-over-hero .brand img{
  opacity:.72; /* более прозрачный, когда шапка над видео */
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.25));
}
.site-header .brand img:hover{
  opacity:.95;
}

/* Nav */
.site-nav ul{display:flex; gap:14px; align-items:center; list-style:none; margin:0; padding:0}
.site-nav a{color:#0f172a; text-decoration:none; font-weight:600; padding:10px 8px; border-radius:8px}
.site-nav a:hover{background:#f3f4f6}
.site-nav .btn{padding:10px 14px}
/* Вертикальный разделитель перед кнопкой "Личный кабинет" — чуть длиннее и толще */
.site-nav .divider{
  width:2px;
  height:28px;
  background:#e5e7eb;
  margin-inline:10px;
  border-radius:999px;
}
.site-nav .push-right{margin-left:auto}

/* Header "100 проектов" animated link */
.header-ideas-link{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  text-decoration:none;
  color:#fff;
  letter-spacing:.12em;
  text-transform:uppercase;

  /* делаем хедерный "100 жоба" таким же по стилю, как hero‑таблетка без анимации */
  justify-content:center;
  text-align:center;
  margin-left:20px;              /* чуть правее от логотипа для обеих языковых версий */
  padding:6px 16px;
  border-radius:18px;
  border:1px solid rgba(211,185,97,.45);
  background:rgba(15,23,42,.45);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  transition:
    border-color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease,
    color .22s ease;
}
.header-ideas-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  margin-inline:auto;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, #d3b961, #22c55e, #0ea5e9);
  transform-origin:left center;
  transform:scaleX(.0);
  opacity:0;
  transition:transform .3s ease-out, opacity .3s ease-out;
}
.header-ideas-link:hover::after,
.header-ideas-link:focus-visible::after{
  transform:scaleX(1);
  opacity:1;
}

.header-ideas-number{
  /* единый размер и стиль для "100" без пульсации и градиента */
  font-size:clamp(26px,3.6vw,40px);
  font-weight:900;
  color:#ffffff;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  text-shadow:none;
  /* убираем анимацию "дыхания" */
  animation:none;
}
.header-ideas-label{
  /* подпись "жоба / проектов" — как у hero‑таблеток, едино на обеих языках */
  font-size:clamp(17px,2.8vw,30px);
  font-weight:700;
  text-transform:uppercase;
  color:#ffffff;
  opacity:1;
  letter-spacing:.18em;
}

/* Казахская версия "100 жоба" — крупнее и в «окне» между логотипом и разделителем */
.site-header[data-lang="kk"] .site-nav ul{
  justify-content:flex-start; /* тянем первый li (100 жоба) к логотипу */
}
.site-header[data-lang="kk"] .site-nav ul li.divider{
  margin-left:auto; /* разделительная линия уезжает вправо вместе с кнопками ЛК */
}

/* Внутри самой ссылки выравниваем текст по центру этого блока
   и даём рамку с «бледным» золотистым эффектом как у hero-плашек */
/* Для казахской версии дополнительных оверрайдов для "100 жоба" не нужно —
   используем общие стили .header-ideas-link / .header-ideas-number / .header-ideas-label */
.site-header[data-lang="kk"] .header-ideas-link{
}

/* Делаем "100" заметно крупнее в казахской версии и в стиле hero-плашек:
   белый текст по умолчанию, без градиента и без анимации */
/* Дополнительные оверрайды для числа и подписи в казахской версии больше не нужны —
   общий стиль уже соответствует требуемому виду hero‑блока "100 жоба". */

/* При наведении в казахской версии:
   — рамка становится зелёной
   — фон чуть более насыщенный
   — текст (и 100, и «жоба») остаётся белым */
.site-header[data-lang="kk"] .header-ideas-link:hover,
.site-header[data-lang="kk"] .header-ideas-link:focus-visible{
  border-color:#22c55e;                     /* зелёная рамка */
  background:rgba(4,136,72,.95);            /* насыщенный зелёный фон */
  box-shadow:0 10px 26px rgba(4,120,87,.7);
}

.site-header[data-lang="kk"] .header-ideas-link:hover .header-ideas-number,
.site-header[data-lang="kk"] .header-ideas-link:focus-visible .header-ideas-number,
.site-header[data-lang="kk"] .header-ideas-link:hover .header-ideas-label,
.site-header[data-lang="kk"] .header-ideas-link:focus-visible .header-ideas-label{
  color:#ffffff;
  opacity:1;
}

/* лёгкое "дыхание" числа 100 */
@keyframes ideas-pulse{
  0%{
    transform:translateY(0) scale(1);
    text-shadow:0 0 8px rgba(250,204,21,.35);
  }
  40%{
    transform:translateY(-1px) scale(1.06);
    text-shadow:0 0 16px rgba(250,204,21,.9);
  }
  100%{
    transform:translateY(0) scale(1);
    text-shadow:0 0 8px rgba(250,204,21,.35);
  }
}

.nav-toggle{display:none}
.nav-toggle-btn{display:none; cursor:pointer}
.nav-toggle-btn span{display:block; width:24px; height:2px; background:#111827; margin:5px 0}

/* На страницах news / about / departments / services-permits / services-consulting / cabinet
   делаем кнопку бургера градиентной, чтобы белые полоски не сливались с белым фоном хедера.
   На десктопе она всё равно скрыта (display:none), так что правка влияет только на мобайл. */
.site-header[data-page="news"] .nav-toggle-btn,
.site-header[data-page="about"] .nav-toggle-btn,
.site-header[data-page="departments"] .nav-toggle-btn,
.site-header[data-page="services-permits"] .nav-toggle-btn,
.site-header[data-page="services-consulting"] .nav-toggle-btn,
.site-header[data-page="cabinet"] .nav-toggle-btn{
  background:linear-gradient(180deg, #0a2540 0%, #081a2b 100%);
  border-radius:999px;
  border:1px solid rgba(148,163,184,.65);
  padding:4px 6px;
}

/* Цвет вертикальной линии перед "Личный кабинет" на внутренних страницах — как акцент футера */
.site-header[data-page="about"] .site-nav .divider,
.site-header[data-page="departments"] .site-nav .divider,
.site-header[data-page="news"] .site-nav .divider,
.site-header[data-page="services-permits"] .site-nav .divider,
.site-header[data-page="services-consulting"] .site-nav .divider,
.site-header[data-page="admin"] .site-nav .divider{
  background:#93c5fd; /* тот же тон, что у текста копирайта в футере */
}

/* Белые полоски бургера на этих страницах (поведение уже было в мобильном блоке,
   но дублируем без @media, чтобы цвет не зависел от порядка правил) */
.site-header[data-page="news"] .nav-toggle-btn span,
.site-header[data-page="about"] .nav-toggle-btn span,
.site-header[data-page="departments"] .nav-toggle-btn span,
.site-header[data-page="services-permits"] .nav-toggle-btn span,
.site-header[data-page="services-consulting"] .nav-toggle-btn span,
.site-header[data-page="cabinet"] .nav-toggle-btn span{
  background:#ffffff;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700;
  border:none; cursor:pointer; text-decoration:none;
  border-radius:10px; transition:.2s ease;
  padding:12px 16px;
}
.btn-primary{background:var(--primary); color:#111827; box-shadow: var(--shadow)}
.btn-primary:hover{background:var(--primary-600)}
.btn-primary:active{background:var(--primary-700)}
.btn-outline{
  background:#fff; color:#111827; border:1px solid #e5e7eb;
}
.btn-outline:hover{background:#f9fafb}
.btn-white{
  background:rgba(255,255,255,.95); color:#111827; border:1px solid rgba(0,0,0,.06)
}
.btn-white:hover{background:#fff}

/* Hero */
.hero{
  position:relative;
  padding:0; margin:0; overflow:hidden;
  border-bottom:1px solid #e5e7eb;
  background:#0a0f1d;
}
.hero .container{position:relative; padding:0}
.hero-slider{position:relative; height:540px; overflow:hidden}
.slide{
  position:absolute; inset:0; opacity:0; transform:scale(1.02);
  background: center / cover no-repeat;
  background-image:var(--bg);
  transition:opacity .6s ease, transform .6s ease;
}
.slide::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
}
.slide.active{opacity:1; transform:scale(1)}
.slide-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:10px; color:#fff; padding:0 24px; width:min(1200px,92vw); margin:auto;
}
.slide-content h2{margin:0; font-size:40px; line-height:1.15}
.slide-content p{margin:0 0 8px 0; opacity:.9}
.slider-controls{
  position:absolute; inset-inline:0; bottom:18px;
  display:flex; justify-content:space-between; pointer-events:none;
  width:min(1200px,92vw); margin:auto; gap:8px;
}
.slider-controls button{
  pointer-events:auto; border:none; cursor:pointer; width:42px; height:42px;
  border-radius:999px; background:rgba(255,255,255,.9);
  display:grid; place-items:center; font-size:20px;
  box-shadow: var(--shadow);
}
.slider-dots{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px;
}
.slider-dots::after{content:""}
.slider-dots button{
  width:10px; height:10px; border-radius:999px; border:none; background:rgba(255,255,255,.65); cursor:pointer
}
.slider-dots button.active{background:#fff}

/* CTA / Director */
.cta{background:#fff; border-bottom:1px solid #e5e7eb}
.cta-inner{
  display:flex; align-items:center; gap:24px; padding:26px 0;
}
.director{
  width:120px; height:120px; object-fit:cover; border-radius:50%;
  box-shadow: var(--shadow); border:4px solid #fff;
}
.cta blockquote{
  margin:0; font-size:20px; color:#111827; line-height:1.5; font-weight:600
}
.cta .small{font-size:12px; color:#6b7280; font-weight:500}

/* Quick tiles */
.quick-tiles{background:#f8fafc; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb}
.tiles-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:24px 0;
}
.tile{
  display:block; text-decoration:none; color:#111827; border-radius:12px; overflow:hidden; background:#fff;
  border:1px solid #e5e7eb; transition:transform .15s ease, box-shadow .15s ease;
}
.tile:hover{transform:translateY(-2px); box-shadow: var(--shadow)}
.tile img{display:block; width:100%; height:220px; object-fit:cover}
.tile-text{padding:12px 14px; font-weight:700}

/* Menu blocks */
.menu-blocks{background:#fff; border-bottom:1px solid #e5e7eb}
.blocks-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:28px 0;
}
.block{
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  min-height:110px; border-radius:12px; color:#111827; font-weight:800; letter-spacing:.4px;
  background:linear-gradient(135deg, #fff, #f6f7fb);
  border:1px solid #e5e7eb; transition:transform .15s ease, box-shadow .15s ease;
}
.block:hover{transform:translateY(-2px); box-shadow: var(--shadow)}
.block span{text-align:center}

/* Sections Shared */
section h3{
  margin:0 0 14px 0;
  font-size:24px; letter-spacing:.3px; color:#0f172a; font-weight:800;
}
.muted{color:#6b7280; font-size:14px}

/* Success stories, News */
.cards-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.card{
  display:block; text-decoration:none; color:#111827;
  border-radius:12px; overflow:hidden; border:1px solid #e5e7eb; background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px); box-shadow: var(--shadow)}
.card img{display:block; width:100%; height:220px; object-fit:cover}
.card-body{padding:12px 14px}
.card-body h4{margin:0 0 6px 0}
.more-center{display:flex; justify-content:center; margin-top:16px}

/* Services & Consultations list */
.services, .consults{background:#fff; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb}
.services .container, .consults .container{padding:24px 0}
.list-grid{
  display:grid; grid-template-columns:1fr; gap:10px; margin-top:8px;
}
.list-item{
  width:100%; text-align:left; padding:12px 14px; background:#fff; border-radius:12px;
  border:1px solid #e5e7eb; cursor:pointer; transition:background .15s ease, transform .05s ease;
  display:flex; flex-direction:column; gap:4px;
}
.list-item:hover{background:#f9fafb}
.list-item:active{transform:scale(.997)}
.list-item .title{font-weight:800}
.list-item .desc{color:#6b7280; font-size:14px}

/* Results */
.results{background:#0f172a; color:#e5e7eb}
.results .container{padding:24px 0}
.results h3{color:#fff}
.results-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.res-item{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:16px; text-align:center
}
.res-num{font-size:32px; font-weight:900}
.res-text{color:#cbd5e1}

/* Partners */
.partners .container{padding:24px 0}
.partners-row{
  display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap
}
.partners-row img{
  display:block; width:160px; height:80px; object-fit:cover; border-radius:10px; border:1px solid #e5e7eb; background:#fff
}

/* Footer */
.site-footer{
  position:relative; z-index:5;
  background:#0b1224;
  color:#e5e7eb;
  border-top:1px solid rgba(255,255,255,.06)
}
.footer-grid{
  display:grid;
  /* 3 колонки: контакты / навигация / логотипы */
  grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr) auto;
  gap:16px;
  padding:16px 0;
  align-items:flex-start;
}
.footer-col{
  display:block;
}
.footer-col--contacts .footer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}
.footer-links{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.footer-links a{color:#cbd5e1; text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.footer .btn{margin-right:6px}

/* Right (middle) column: vertical divider and navigation */
.footer-col--nav{
  position:relative;
  padding-left:18px;
  margin-left:0;
}

/* Вертикальная разделительная линия между контактами и навигацией,
   сдвинутая чуть левее относительно начала второй колонки */
.footer-col--nav::before{
  content:"";
  position:absolute;
  left:-10px;              /* визуально ближе к первой колонке */
  top:0;
  bottom:0;
  width:1px;
  background:rgba(148,163,184,.45);
}
.footer-links--nav{
  margin-top:4px;
}
.footer-links--nav a{
  font-weight:600;
}

/* Logos inside right column */
.footer-logos{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-top:10px;
}
.footer-logos img{
  max-height:80px;
  width:auto;
  opacity:.96;
}

.copyright{
  border-top:1px solid rgba(255,255,255,.06);
  padding:8px 0;
  text-align:center;
  color:#93c5fd
}

/* Hero oval pills: default transparent; on hover fill blue without changing title color */
.oval-pill{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  text-align:right;
  background:transparent;
  border:2px solid rgba(255,255,255,.9);
  border-radius:9999px;
  padding:10px 20px;
  width:min(520px, 100%);
  margin-left:auto;
  transition: background .2s ease, border-color .2s ease;
}
.hero .monolith-block:hover .oval-pill{
  background:#0b5bd3;
  border-color:#0b5bd3;
}

/* Modals */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(2px);
  z-index: 900; /* ниже модалки, выше шапки */
}
.modal{
  position:fixed; inset:0; display:grid; place-items:center; padding:20px;
  z-index: 1000; /* модалка поверх шапки */
}
.modal.hidden, .modal-backdrop.hidden{display:none}
.modal-window{
  width:min(520px, 92vw); background:#fff; border-radius:16px; border:1px solid #e5e7eb; box-shadow: var(--shadow);
  padding:18px;
}
.modal h3{margin:0 0 12px 0}
.modal form{display:grid; gap:10px}
.modal label{display:grid; gap:6px; font-weight:600; color:#0f172a}
.modal input{
  padding:12px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; outline:none;
}
.modal input:focus{border-color:#c4b100; box-shadow:0 0 0 3px rgba(255,204,0,.25)}
.modal-actions{display:flex; gap:10px; align-items:center; justify-content:flex-end}
.modal-close{
  position:absolute; top:10px; right:12px; width:36px; height:36px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; cursor:pointer;
}

/* Registration form layout: desktop = 2 колонки, mobile = 1 колонка, без горизонтального скролла */
.register-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* Блок с Фамилия / Имя / Отчество */
.register-name-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  grid-column:1 / -1;
}

/* Кнопки внизу формы — на всю ширину сетки */
.register-form-grid .modal-actions{
  grid-column:1 / -1;
}

@media (max-width: 640px){
  .register-form-grid{
    grid-template-columns:1fr;
  }
  .register-name-row{
    grid-template-columns:1fr;
  }
}

/* Toast */
.toast{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:#111827; color:#fff; padding:12px 16px; border-radius:12px; box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.08)
}
.toast.hidden{display:none}

/* Utilities */
.section{padding:24px 0}

/* Document highlight (PDF) */
.list-item.doc{
  position:relative;
  border:2px solid var(--primary);
  background:linear-gradient(180deg, #fff, #fafafa);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.list-item.doc::before{
  content:"PDF";
  position:absolute; top:10px; right:12px;
  font-size:12px; font-weight:800;
  color:#111827; background:var(--primary);
  padding:3px 8px; border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
}
.list-item.doc .title{font-weight:900; letter-spacing:.3px}
.list-item.doc .desc{color:#4b5563}

/* Responsive */
@media (max-width: 960px){
  .tiles-grid{grid-template-columns:1fr}
  .blocks-grid{grid-template-columns:1fr 1fr}
  .cards-grid{grid-template-columns:1fr}
  .results-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-slider{height:420px}
  .slide-content h2{font-size:30px}

  /* На мобильной версии разделительная полоса перед "Личный кабинет" не нужна и мешает бургеру.
     Полностью скрываем <li class="divider"> и убираем у него размеры, чтобы он не "отталкивал" Жеке кабинет / Тіркелу / Қаз. */
  .site-nav li.divider,
  .site-nav .divider{
    display:none !important;
    width:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  /* Мобильное меню: О нас / Наши подразделения / Новости — по центру, блок ЛК ближе к верху */
  .site-nav .single-nav > li:first-child{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
    width:100%;
    margin-bottom:8px; /* чуть меньше отступ до блока ЛК/Регистрация/язык, чтобы Жеке кабинет был выше */
  }
  .site-nav .single-nav > li:first-child > a{
    display:block;
    width:100%;
    text-align:center;
  }

  /* Личный кабинет / Регистрация / Қаз — по центру и чуть выше основного блока */
  .site-nav .single-nav > li:not(:first-child){
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:2px; /* небольшой прижим вверх относительно нижнего края панели */
  }

  /* ЛК /cabinet (мобайл): навигация сверху, список услуг ниже одной колонкой */
  .cabinet-services-layout{
    display:block !important;
  }
  .cabinet-nav{
    position:static !important;
    margin-bottom:12px;
  }
  .cabinet-sections-scroll{
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }
  /* Тексты навигации по правому краю на мобиле */
  .cabinet-nav-list{
    text-align:right;
  }
  .cabinet-nav-list .btn{
    justify-content:flex-end;
  }

  /* Высота и порядок перекрытия шапки и мобильного меню */
  .site-header{
    z-index:2000 !important;
  }

  /* Мобильное меню: выезжающая панель справа (виджет), не перекрывая весь hero */
  .site-nav{
    position:fixed;
    top:calc(var(--hdr-h) + 8px);
    right:0;
    bottom:auto;
    height:min(480px, calc(100vh - var(--hdr-h) - 32px));
    max-height:calc(100vh - var(--hdr-h) - 24px);
    width:min(320px,80vw);
    background:rgba(15,23,42,.9);
    border-left:1px solid rgba(148,163,184,.55);
    box-shadow:-12px 0 30px rgba(15,23,42,.60);
    border-radius:16px 0 0 16px;
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    display:flex;
    transform:translateX(100%);
    opacity:0;
    pointer-events:none;
    transition:transform .25s ease-out, opacity .25s ease-out;
    z-index:2002 !important;
    margin-left:0 !important;
  }

  /* На главной странице при открытом бургере разворачиваем панель на весь экран,
     чтобы она не "уезжала" за пределы и элементы (в т.ч. Қаз🇰🇿) оставались кликабельными
     независимо от прокрутки страницы. */
  /* На внутренних страницах news / about / departments / services-permits / services-consulting / cabinet
     фон панели бургера такой же, как градиент футера */
  .site-header[data-page="news"] nav.site-nav,
  .site-header[data-page="about"] nav.site-nav,
  .site-header[data-page="departments"] nav.site-nav,
  .site-header[data-page="services-permits"] nav.site-nav,
  .site-header[data-page="services-consulting"] nav.site-nav,
  .site-header[data-page="cabinet"] nav.site-nav{
    background:linear-gradient(180deg, #0a2540 0%, #081a2b 100%) !important;
  }

  /* На этих страницах только полоски бургера делаем белыми,
     остальной стиль кнопки остаётся как на главной */
  .site-header[data-page="news"] .nav-toggle-btn span,
  .site-header[data-page="about"] .nav-toggle-btn span,
  .site-header[data-page="departments"] .nav-toggle-btn span,
  .site-header[data-page="services-permits"] .nav-toggle-btn span,
  .site-header[data-page="services-consulting"] .nav-toggle-btn span,
  .site-header[data-page="cabinet"] .nav-toggle-btn span{
    background:#ffffff !important;
  }
  .site-nav ul{
    flex-direction:column;
    align-items:center; /* все пункты меню по центру панели */
    justify-content:flex-start !important;
    padding:12px 16px 20px; /* чуть выше и компактнее внутри панели */
    width:100%;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    gap:6px;
  }

  /* Центруем "Услуги" в мобильном меню */
  .site-nav .services-trigger{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100%;
    text-align:center;
  }

  /* Дропдаун "Услуги" внутри мобильного бургера:
     - по умолчанию скрыт (max-height:0, opacity:0)
     - раскрывается по aria-expanded="true" с лёгким выпадением */
  .site-nav .services-menu{
    position:static !important;
    inset:auto !important;
    width:100% !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 0 4px !important;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transform:translateY(-4px);
    transition:max-height .25s ease, opacity .25s ease, transform .25s ease;
    pointer-events:none;
  }
  .site-nav .services-trigger[aria-expanded="true"] + .services-menu{
    max-height:220px;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .site-nav .services-menu .list-item{
    background:linear-gradient(180deg, #0a2540 0%, #081a2b 100%) !important;
    color:#fff !important;
    border-radius:999px !important;
    text-align:center !important;
    justify-content:center !important;
    align-items:center !important;
    width:100%;
    max-width:260px;
    margin:4px auto !important;
    border:1px solid rgba(148,163,184,.6) !important;
    padding:9px 14px !important;
    font-size:12px !important;
    line-height:1.3 !important;
    white-space:normal !important;
    word-break:break-word;
  }
  .site-nav .services-menu .list-item .title{
    color:#fff !important;
  }
  .site-nav a{
    color:#e5e7eb;
  }

  /* На мобильной версии на страницах services/permits, services/consulting и cabinet
     делаем пункты верхнего меню (Услуги / О нас / Наши подразделения / Новости) белыми,
     чтобы они не сливались с фоном панели. */
  .site-header[data-page="services-permits"] nav.site-nav a,
  .site-header[data-page="services-consulting"] nav.site-nav a,
  .site-header[data-page="cabinet"] nav.site-nav a{
    color:#ffffff !important;
  }

  /* На мобильной ГЛАВНОЙ странице, когда открыт бургер-меню,
     фиксируем белый цвет пунктов навигации (Қызметтер / Біз туралы / Біздің бөлімдер / Жаңалықтар),
     чтобы при скролле вниз цвет не переключался на тёмный. */
  .site-nav a:hover{
    background:rgba(148,163,184,.18);
  }
  .nav-toggle-btn{
    display:block;
    position:relative;
    z-index:2001 !important; /* кнопка бургера всегда над панелью и шапкой */
  }

  /* Активное состояние бургера — панель выезжает справа как виджет */
  #nav-toggle:checked + .nav-toggle-btn + nav.site-nav{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
  }

  /* ЛК /cabinet (мобайл): навигация сверху, список услуг ниже одной колонкой */
  .cabinet-services-layout{
    display:block !important;
  }
  .cabinet-nav{
    position:static !important;
    margin-bottom:12px;
  }
  .cabinet-sections-scroll{
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }
  /* Тексты навигации по центру на мобиле */
  .cabinet-nav-list{
    text-align:center;
  }
  .cabinet-nav-list .btn{
    justify-content:center;
  }

  /* Мобильный футер: логотипы чуть меньше және по центру */
  .footer-grid{
    grid-template-columns:1fr;
    align-items:center;
    text-align:center;
  }
  /* On mobile: remove vertical divider and center navigation + logos */
  .footer-col--nav{
    border-left:none;
    padding-left:0;
    margin-left:0;
  }
  .footer-col--nav::before{
    display:none;
  }
  .footer-links--nav{
    justify-items:center;
  }
  .footer-logos{
    justify-content:center;
    margin-top:8px;
  }
  .footer-logos img{
    max-height:40px;
  }
}
/* Accessible version eye button (based on provided HTML btn-apply styles) */
.bvi-btn {
  padding: 9.5px 10px;
  border-radius: 4px;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 13px;
  border: none;
  text-align: center;
  text-decoration: none !important;
  background: #048848 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  line-height: 1;
}
.bvi-btn .bvi-ico { width: 18px; height: 18px; display: inline-block; }

/* Shine animation like in provided code */
.bvi-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: skewX(-15deg);
  animation: bvi-shine 4s infinite linear;
}

@keyframes bvi-shine {
  0% { left: -150%; }
  50% { left: 100%; }
  100% { left: 150%; }
}

.bvi-btn:hover {
  color: #fff !important;
  background: #048848 !important;
  transform: translateY(-2px);
}

.header-eye {
  display: inline-flex;
  align-items: center;
}

.header-eye .bvi-btn {
  margin-left: 10px;
}

/* Optional: reduce icon-only button horizontal padding on very small screens */
@media (max-width: 480px) {
  .bvi-btn { padding: 8px 8px; }
}
/* --- Business CTA like reference site (header buttons: Жеке кабинет / Тіркелу / Қаз🇰🇿 и их RU переводы) --- */
.btn-apply{
  padding:9.5px 7px !important;
  border-radius:1px !important;
  color:#fff !important;
  font-weight:500 !important;
  font-size:12px;
  border:none;
  transition:all .3s ease-in-out;
  text-align:center;
  text-decoration:none !important;
  background:#048848 !important;
  display:inline-block;
  position:relative;
  overflow:hidden;
  line-height:1;
}
.btn-apply::before{
  content:"";
  position:absolute;
  top:0;
  left:-150%;
  width:100%;
  height:100%;
  background:linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,.1),
    rgba(255,255,255,.3),
    rgba(255,255,255,.1),
    transparent
  );
  transform:skewX(-15deg);
  animation:bvi-shine 4s infinite linear;
}
.btn-apply:hover{
  color:#fff !important;
  background:#048848 !important;
  transform:translateY(-2px);
}
/* --- Hero video section (like reference) --- */
.hero{position:relative}
.hero .hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45))}
.hero .hero-container{position:relative; z-index:1; padding:36px 0}
.hero .hero-title{font-weight:900}
.hero .hero-description{font-size:clamp(14px,1.3vw,18px)}
.hero .hero-button{margin-top:6px}

/* Hero left column: individual cards */
.hero-cards-column{
  display:grid;
  gap:12px;
  width:min(420px,100%);
}

/* Базовая таблетка в hero */
.hero-card-pill{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-sizing:border-box;
    padding:10px 18px;
    border-radius:18px;
    /* единый фон и рамка как у «БІР ТЕРЕЗЕ» */
    background:linear-gradient(180deg, rgba(10,37,64,.45) 0%, rgba(8,26,43,.45) 100%);
    border:1px solid rgba(255,255,255,.75);
    font-weight:700;
    font-size:clamp(10px, 1vw, 14px);
    text-transform:uppercase;
    color:#fff;
    transition:transform .18s ease, box-shadow .18s ease, background-color .2s ease, color .2s ease;
    will-change:transform;
    width:100%;           /* все три главные карточки в hero одной ширины */
    min-height:48px;      /* одинаковая высота рамки для «БІР ТЕРЕЗЕ», «Нұсқаулықтар», «100 жоба» */
}

.hero-card-pill:hover{
    /* Единый итоговый масштаб для всех hero‑таблеток (включая "БІР ТЕРЕЗЕ" и "Нұсқаулықтар") */
    transform:scale(1.04);
    box-shadow:0 10px 24px rgba(0,0,0,.28);
    background:linear-gradient(180deg, #102a43 0%, #0b2135 100%);
    color:#D3B961;
}

.hero-card-link{
  cursor:pointer;
  text-decoration:none;
  color:#fff;
}

/* Обёртка вокруг "Нұсқаулықтар" + две дополнительные карточки */
.hero-card-sprout-wrap{
  position:relative;
  display:grid;
  gap:6px;
  width:100%;
}

/* невидимая "полоса" справа, чтобы курсор мог спокойно
   пройти между двумя карточками, не закрывая их,
   но сами карточки остаются сразу справа от "Нұсқаулықтар" */
.hero-card-sprout-wrap::after{
  content:"";
  position:absolute;
  top:-40px;
  bottom:-40px;
  left:100%;
  width:320px;
}

/* Расширенная безопасная зона ховера
   только для блока «Обслуживание по принципу «одного окна»»,
   чтобы курсор мог мягко пройти от основной таблетки к её росткам
   (Рұқсат құжаттарын рәсімдеу / Консалтинг...) */
.hero-card-sprout-services::after{
  top:-220px;
  bottom:-220px;
  width:360px;
}

/* Для блока «Нұсқаулықтар» делаем ЗОНУ УЗКОЙ ТОЛЬКО ВОКРУГ САМОЙ ТАБЛЕТКИ,
   чтобы при движении курсора вниз от «Оформление разрешительных документов»
   НЕ срабатывало наведение на путеводитель */
.hero-card-sprout-guides::after{
  top:0;
  bottom:0;
  width:260px;
}

/* Основная таблетка "Нұсқаулықтар" */
.hero-card-guides-main{
  position:relative;
  z-index:2;
}

/* Ростки: по умолчанию скрыты, появляются СПРАВА от "Нұсқаулықтар"
   при наведении/фокусе на область .hero-card-sprout-wrap */
.hero-card-sprout{
  position:absolute;
  top:50%;
  left:100%;
  /* убираем зазор между основной таблеткой и всплывающей карточкой,
     чтобы при движении курсора не было "мертвой зоны", из-за которой блок исчезает */
  margin-left:0;
  min-width:260px;
  max-width:320px;
  padding:10px 18px;
  font-size:10px;
  line-height:1.35;
  text-align:center;
  background:linear-gradient(180deg, rgba(15,23,42,.96) 0%, rgba(15,23,42,.96) 100%);
  border-color:rgba(211,185,97,.9);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  border-radius:18px;
  opacity:0;
  visibility:hidden;
  /* по умолчанию не принимаем события, чтобы не мешать кликам по hero;
     включаем ниже при наведении */
  pointer-events:none;
  transform:translateY(-50%) scale(.96);
  transform-origin:center left;
  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
  z-index:3;
}

/* Верхний и нижний ростки: разнесены по вертикали */
.hero-card-sprout-top{
  transform:translateY(-120%) scale(.96);
}
.hero-card-sprout-bottom{
  transform:translateY(20%) scale(.96);
}

/* Показываем ростки при hover/focus внутри всей обёртки И при наведении на сами карточки */
.hero-card-sprout-wrap:hover .hero-card-sprout,
.hero-card-sprout-wrap:focus-within .hero-card-sprout,
.hero-card-sprout:hover,
.hero-card-sprout:focus-within{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Немного увеличиваем и усиливаем тень при активном состоянии */
.hero-card-sprout-wrap:hover .hero-card-sprout-top,
.hero-card-sprout-wrap:focus-within .hero-card-sprout-top{
  /* Итоговый масштаб ростков справа такой же, как у основной таблетки: scale(1.04) */
  transform:translateY(-120%) scale(1.04);
  box-shadow:0 12px 30px rgba(0,0,0,.55);
}
.hero-card-sprout-wrap:hover .hero-card-sprout-bottom,
.hero-card-sprout-wrap:focus-within .hero-card-sprout-bottom{
  /* Для блоков «БІР ТЕРЕЗЕ» и «Нұсқаулықтар» правые карточки увеличиваются на тот же размер */
  transform:translateY(20%) scale(1.04);
  box-shadow:0 12px 30px rgba(0,0,0,.55);
}

/* Ломаные коннекторы временно скрываем, чтобы не мешали клику */
.hero-card-connector{display:none;}

/* На маленьких экранах ростки убираем, чтобы не перегружать hero */
@media (max-width: 900px){
  .hero-card-sprout{display:none;}
  .hero-card-connector{display:none;}
}

/* --- Monolith grid blocks in hero (right column) --- */
.monolith-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

/* Glassmorphism-style info squares (Кепілдік, Субсидиялау, Несиелеу, Оқыту) */
.monolith-block{
  min-height:220px;
  background-color:var(--block-bg);
  border:1px solid var(--block-border);
  border-radius:16px;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  padding:1.5rem;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center; /* центрируем содержимое по горизонтали */
  transition:
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.monolith-block::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at top left, rgba(148,163,253,.28), transparent 55%);
  opacity:0;
  transition:opacity 0.4s ease;
  pointer-events:none;
}

.monolith-block:hover{
  transform:translateY(-4px);
  /* при наведении фон внутри квадрата становится зелёным */
  border-color:rgba(34,197,94,.95); /* #22c55e */
  background-color:#048848; /* фирменный зелёный */
  box-shadow:0 18px 45px rgba(4,120,87,.7);
}
.monolith-block:hover::before{
  opacity:1;
  background:radial-gradient(circle at top left, rgba(74,222,128,.5), transparent 55%);
}
/* при ховере текст делаем белым на зелёном фоне */
.monolith-block:hover .monolith-title,
.monolith-block:hover .monolith-description{
  color:#ffffff;
}

.monolith-title{
  font-weight:800;
  /* цвет как у прежнего описания (monolith-description) */
  color:rgba(226,232,240,.88);
  font-size:16px;
  margin:0 0 6px;
  text-align:center;
  text-transform:uppercase; /* все буквы заглавные визуально */
}

.monolith-description{
  color:rgba(226,232,240,.88);
  font-size:13px;
  line-height:1.5;
}

/* Responsive tweaks for hero squares */
@media (max-width: 991px){
  .monolith-block{
    min-height:180px;
    justify-content:flex-start;
  }
}

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

/* Ensure hero cards are readable over video */
.hero .card{background:rgba(255,255,255,.96); border-color:#e5e7eb}
.hero .card-body{color:#0f172a}

/* Compact header brand stack tuning */
.brand-link span{letter-spacing:.5px}

/* CTA like reference (already added .btn-apply above) keeps consistent on dark bg */
.hero .btn-apply{box-shadow: var(--shadow)}
/* ===== News grid like reference (Жаңалықтар мен оқиғалар) ===== */
.news_list{background:#ececec; padding:8px 0 20px; position:relative; z-index:0}
.news_all_title1{display:flex; align-items:center; justify-content:space-between; gap:12px}
.news_title{font-weight:900; letter-spacing:.2px}
.allnews a{
  text-transform:uppercase; font-size:14px; color:#000; font-weight:700; text-decoration:none
}
.allnews a:hover{text-decoration:underline}

.news-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr;
  grid-auto-rows:220px; gap:12px; margin-bottom:16px
}
.news-item{
  position:relative; display:block; color:#111827; text-decoration:none;
  overflow:hidden; border-radius:12px; background:#fff; border:1px solid #e5e7eb;
  transition:transform .15s ease, box-shadow .15s ease; z-index:0
}
.news-item:hover{transform:translateY(-2px); box-shadow: var(--shadow)}
.news-item.big-square{grid-row:span 2}
.news-item.rectangle{grid-column:2 / span 2}

.news-img{position:absolute; inset:0; background-size:cover; background-position:center}
.read-more-wrapper{
  position:absolute; right:10px; top:10px;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.92); color:#0f172a;
  padding:6px 10px; border-radius:999px; border:1px solid #e5e7eb; font-weight:700
}

.news-text-content{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 65%);
  color:#fff; padding:12px 12px 10px
}
.news-label{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700}
.badge-news{background:rgba(0,0,0,.4); backdrop-filter:saturate(140%) blur(2px)}
.badge-success{background:rgba(20,128,20,.9)}

.news-date{display:inline-flex; align-items:center; gap:6px; opacity:.95}
.news-title{font-weight:900; margin-top:6px; text-shadow:0 1px 2px rgba(0,0,0,.25); display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; hyphens:auto}
.news-card-title, .meta-title, .meta-summary{word-break:break-word; hyphens:auto}

@media (max-width: 960px){
  .news-grid{grid-template-columns:1fr; grid-auto-rows:200px}
  .news-item.big-square{grid-row:span 1}
  .news-item.rectangle{grid-column:auto}
}
/* ===== News detail page (like reference) ===== */
.sectionimg{position:relative; min-height:260px; background:#f3f4f6}
.sectionimg .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45))}
.sectionimg .centered{position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#fff; padding:0 12px}
.title-accent-line{width:90px; height:3px; background:#d3b961; margin:10px auto 0; border-radius:3px}
.ptop{padding:18px 0}

.news-page .news-date-time{color:#6b7280; font-size:14px}
.news-page .share-row a{color:#0f172a; text-decoration:none}
.news-page .share-row a:hover{text-decoration:underline}
.news-content img{max-width:100%; height:auto; display:block; margin:8px 0; border-radius:6px}

.news-gallery-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.news-gallery img{width:100%; height:160px; object-fit:cover; border:1px solid #e5e7eb; border-radius:8px}

@media (max-width: 960px){
  .news-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news-gallery img{height:120px}
}
/* ===== FAQ Top-10 (Қызметтер каталогы as FAQ) ===== */
.faq10-accord{ --faq-gap:18px; background:#fff; padding:56px 0 }
.faq10a__container{max-width:1360px; margin:0 auto; padding:0 24px}
.faq10a__cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px; row-gap:0}

.faq10a__list{list-style:none; margin:0; padding:0}
.faq10a__item{border-top:1px solid #e6ebf0}
.faq10a__item:last-child{border-bottom:1px solid #e6ebf0}
.faq10a__item.is-open{ margin-bottom: var(--faq-gap); }

.faq10a__q{
  appearance:none; background:none; border:0; width:100%;
  display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:16px;
  padding:20px 0; text-align:left; cursor:pointer; font:inherit;
}
.faq10a__q .n{color:#138551; font-weight:600; font-variant-numeric:tabular-nums}
.faq10a__q .t{color:#0b1f33; font-weight:500; font-size:clamp(16px,1.05vw,18px); line-height:1.4}
.faq10a__q .tools{display:inline-flex; align-items:center; gap:12px; color:#6b7a89; white-space:nowrap}
.faq10a__q:hover .t{color:#138551}

.faq10-accord .copy{all:unset; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; cursor:pointer; color:#6b7a89}
.faq10-accord .copy:hover{color:#138551}
.faq10-accord .copy:focus-visible{outline:2px solid #138551; outline-offset:2px}
.faq10-accord .ic{width:16px;height:16px;display:block;flex:0 0 16px}
.faq10-accord .chev{width:12px;height:12px;transition:transform .18s ease}
.faq10a__q[aria-expanded="true"] .chev{transform:rotate(180deg); color:#138551}

.faq10a__a{
  overflow:hidden; max-height:0; opacity:.98;
  transition:max-height .25s ease, opacity .25s ease, padding .2s ease;
  font: inherit; color:#223042;
}
.faq10a__a.open{padding:12px 0 20px; max-height:2400px; opacity:1}
.faq10a__a p, .faq10a__a ul, .faq10a__a ol{margin:0 0 12px; max-width:80ch}
.faq10a__a ul, .faq10a__a ol{padding-left:18px}

.faq10a__footer{margin-top:20px}
.faq10a__all{color:#138551; text-decoration:none; font-weight:600; border-bottom:2px solid transparent}
.faq10a__all:hover{border-color:#138551}

@media (max-width: 992px){
  .faq10a__container{padding:0 16px}
  .faq10a__cols{grid-template-columns:1fr}
  .faq10a__q{grid-template-columns:28px 1fr auto}
}
@media (prefers-reduced-motion: reduce){
  .faq10a__a{transition:none}
  .faq10-accord .chev{transition:none}
}
/* ===== Leaflet Map (embedded before footer) ===== */
#map {
  height: 600px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #eef2ff;
}
#map-wrapper {
  position: relative;
  margin: 16px 0;
}
.leaflet-container {
  border-radius: 12px;
}
.leaflet-control-attribution {
  font-size: 11px;
}

/* Popup content styling (close to provided HTML) */
.leaflet-popup-content {
  font-size: 14px;
  line-height: 1.35;
  color: #0f172a;
}
.leaflet-popup-content h4 {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}
.leaflet-popup-content p {
  margin: 0 0 6px 0;
  color: #374151;
}
.leaflet-popup-content a {
  color: #0ea5e9;
  text-decoration: none;
}
.leaflet-popup-content a:hover {
  text-decoration: underline;
}

/* Right side legend panel atop the map */
.sidenav {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 260px;
  background: rgba(255,255,255,.95);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px;
  z-index: 400;
}
.sidenav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.sidenav li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
  font-size: 13px;
}
.legend-ico {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.legend-ico--phos { background: #eab308; }
.legend-ico--gold { background: #f59e0b; }
.legend-ico--van { background: #06b6d4; }
.legend-ico--uran { background: #84cc16; }
.legend-ico--gas { background: #64748b; }
.legend-ico--coal { background: #111827; }
.legend-ico--water { background: #0ea5e9; }

/* Keep legend visible on top for safety */
.leaflet-top, .leaflet-bottom { z-index: 350; }
/* Header secondary logo blend to match reference site video mixing */
.site-header .brand-link img:nth-of-type(2){
  transition: opacity .2s ease, filter .2s ease, mix-blend-mode .2s ease;
}

/* Over hero (прозрачная шапка над видео): аккуратно “убираем” белую подложку и усиливаем читаемость логотипа */
.site-header.is-over-hero .brand-link img:nth-of-type(2){
  mix-blend-mode: multiply !important; /* белый фон логотипа визуально исчезает на видеобэкграунде */
  opacity: .96;
  filter: saturate(1.15) contrast(1.08) brightness(1.10);
}

/* На остальных страницах/при непрозрачной шапке — обычный режим, без смешивания */
.site-header:not(.is-over-hero) .brand-link img:nth-of-type(2){
  mix-blend-mode: normal !important;
  opacity: .98;
  filter: none;
}