/* =========================
   Narodna Rada — Header (final)
   ========================= */

/* --- Color tokens --- */
:root{
  --ua-blue: #1f6fff;
  --ua-yellow: #ffd33d;

  --light-bg: #f8fbff;         /* нижній поверх */
  --light-fg: #0b1522;
  --light-fg-subtle:#334155;
  --light-hover:#e9eef7;
  --light-border:#d9e1ef;

  --dropdown-shadow: 0 14px 30px rgba(15,23,42,.08);

  /* середній (декор) */
  --mid-grad-start: #e31b23;
  --mid-grad-end: #0b0b0d;
}

/* ================= HEADER WRAPPER ================= */
.nr-header{
  position: sticky; top: 0; z-index: 1000;

}
.nr-header.is-scrolled{
  box-shadow: 0 14px 36px rgb(0 0 0 / 2%);
  backdrop-filter: blur(6px) saturate(1.2);
}

/* ================= TOP BAR ================= */
.nr-header__top{
  min-height: 72px;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;

      background: linear-gradient(90deg, var(--ua-blue) 0%, var(--ua-yellow) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    backdrop-filter: saturate(1.1);
    transition: box-shadow .2s ease, transform .2s ease, backdrop-filter .2s ease;
}
.nr-brand{ display:flex; align-items:center; gap:14px; color:#0b1522; text-decoration:none; }
.nr-brand__logo{ width:42px; height:42px; border-radius:12px; object-fit:cover; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.nr-brand__text{ display:flex; flex-direction:column; line-height:1.02; }
.nr-brand__title{
  font-family: "Unbounded","Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight: 900; letter-spacing:.2px;
  font-size: clamp(1.6rem, 4.2vw, 2.8rem);
  color: #0b1522;
  text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 2px 14px rgba(0,0,0,.12);
}
.nr-brand__subtitle{ display:none !important; }


/* ====== Базові утиліти ====== */
.history .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(16px, 2vw, 24px);
  }

  .history .eyebrow {
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .8rem;
    opacity: .8;
  }

  .history h1, .history h2, .history h3 {
    margin: 0 0 .6em;
  }

  .history .lead {
    font-size: clamp(1rem, 1.2vw + .8rem, 1.25rem);
    line-height: 1.7;
    opacity: .95;
  }

  /* ====== Hero ====== */
  .history-hero {
    position: relative;
    padding: clamp(48px, 6vw, 96px) 0;
    background:
      radial-gradient(1200px 400px at 10% -10%, rgba(0,120,255,.15), transparent 60%),
      radial-gradient(1200px 400px at 120% 10%, rgba(255,200,0,.12), transparent 60%),
      var(--nr-hero-bg, #0b0f1a);
    color: #fff;
    overflow: hidden;
  }

  .history-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: url('/img/pattern-wreath.svg') center/600px repeat;
    opacity: .06;
    pointer-events: none;
  }

  .history-title {
    font-family: "Unbounded", system-ui, sans-serif;
    font-weight: 800;
    line-height: 1.15;
    margin-top: .25rem;
  }

  /* ====== Карти/контент ====== */
  .history-content, .history-achievements { padding: 40px 0; }
  .grid-2 {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(16px, 3vw, 28px);
  }
  @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

  .card {
    background: var(--surface, #fff);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    padding: clamp(16px, 2vw, 24px);
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
  }

  /* ====== Факти ====== */
  .fact-list {
    list-style: none; padding: 0; margin: .5rem 0 0;
  }
  .fact-list li { padding: .5rem 0; border-bottom: 1px dashed rgba(0,0,0,.08); }
  .fact-list li:last-child { border-bottom: 0; }
  .fact-list span { opacity: .7; }

  /* ====== Пріоритети ====== */
  .history-priorities { padding: 32px 0 8px; }
  .priority-list {
    counter-reset: prio;
    display: grid;
    gap: 14px;
    margin: 1rem 0 0;
    padding-left: 0;
  }
  .priority-list li {
    list-style: none;
    position: relative;
    padding: 14px 14px 14px 56px;
    background: linear-gradient(180deg, #fff, #fafafa);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
  }
  .priority-list li::before {
    counter-increment: prio;
    content: counter(prio);
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: grid; place-items: center;
    border-radius: 50%;
    background: #0d6efd; color: #fff; font-weight: 700;
  }

  /* ====== Статистика ====== */
  .history-stats { padding: 24px 0 8px; }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(12px, 2vw, 18px);
    margin-top: 16px;
  }
  @media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 600px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

  .stat {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.05);
  }
  .stat .num {
    font-size: clamp(1.6rem, 2.2vw + 1rem, 2.4rem);
    font-weight: 800;
    line-height: 1;
  }
  .stat .label { margin-top: 6px; font-size: .92rem; opacity: .85; }
  .muted { opacity: .8; }
  .examples { margin-top: .75rem; }

  /* ====== Таймлайн ====== */
  .history-timeline { padding: 32px 0 64px; }
  .timeline {
    position: relative;
    margin-top: 18px;
    padding-left: 20px;
  }
  .timeline::before {
    content: "";
    position: absolute; left: 7px; top: 0; bottom: 0;
    width: 2px; background: linear-gradient(#0d6efd, transparent 80%);
    opacity: .4;
  }
  .tl-item { position: relative; padding: 16px 0 16px 24px; }
  .tl-dot {
    position: absolute; left: -1px; top: 24px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #0d6efd;
    box-shadow: 0 0 0 6px rgba(13,110,253,.12);
  }
  .tl-content h3 { margin: 0 0 .25rem; font-weight: 700; }
  .tl-content p { margin: 0; opacity: .95; }

  /* ====== Анімації появи ====== */
  .reveal { opacity: 0; transform: translateY(16px); transition: .6s cubic-bezier(.2,.65,.3,1); }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
  /* === Timeline: одна крапка, без дублюючих маркерів === */
.timeline { position: relative; margin-top: 18px; padding-left: 28px; }
.timeline::before {
  content: ""; position: absolute; left: 14px; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(#5a63ff, transparent 80%); opacity: .45;
}

/* Забезпечуємо «одну» крапку */
.tl-item { position: relative; padding: 16px 0 16px 16px; list-style: none; }
.tl-item::before,
.tl-item::after { content: none !important; }    /* глушимо чужі псевдоелементи */

.tl-dot{
  position: absolute; left: 8px; top: 24px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #5a63ff;
  border: 3px solid #0f1115;       /* обводка під фон сторінки */
  box-shadow: none !important;     /* вимикаємо «ореол», який схожий на другу крапку */
}
.tl-dot::before,
.tl-dot::after { content: none !important; }     /* на всяк випадок глушимо дод.точки */
/* === Timeline: не накладаємо крапку на текст === */
.timeline{
  position: relative;
  padding-left: 56px;              /* було ~20–28px > даємо реальний відступ під крапку */
}
.timeline::before{
  left: 28px;                      /* ставимо лінію всередині поля */
  width: 2px;
}

/* один пункт таймлайну */
.tl-item{
  position: relative;
  padding: 18px 0;                 /* без лівого паддінгу — його дає .timeline */
}

/* сама крапка */
.tl-dot{
  position: absolute;
  left: 22px;                      /* між лінією (28px) і краєм контейнера лишається 6px */
  top: 0.95em;                     /* прив’язка до першого рядка заголовка */
  width: 12px; height: 12px; border-radius: 50%;
  background: #5a63ff;
  border: 3px solid #0f1115;       /* колір фону сторінки */
  box-shadow: none !important;
}

/* заголовок і текст пункту — без додаткових відступів ліворуч */
.tl-content h3{ margin: 0 0 .25rem; }
.tl-content p{  margin: 0; }

/* трохи компактніше на вузьких екранах */
@media (max-width: 600px){
  .timeline{ padding-left: 48px; }
  .timeline::before{ left: 24px; }
  .tl-dot{ left: 18px; }
}
/* === Timeline: крапка на рівні першого рядка заголовка === */
.timeline{ padding-left: 56px; }
.timeline::before{ left: 28px; }

.tl-item{ position: relative; padding: 18px 0; }

.tl-content h3{
  margin: 0 0 .35rem;
  line-height: 1.25;           /* стабільна висота рядка */
}

/* Крапка — злегка нижче верху елемента, центровано по рядку h3 */
.tl-dot{
  position: absolute;
  left: 22px;                  /* між лінією (28px) і краєм контейнера */
  top: 1.25em;                 /* було ~0.95em > опускаємо нижче, щоб не «зависала» над текстом */
  width: 12px; height: 12px; border-radius: 50%;
  background: #5a63ff;
  border: 3px solid #0f1115;   /* під колір фону секції */
  box-shadow: none !important;
}

/* Трохи компактніше на мобільних */
@media (max-width: 600px){
  .timeline{ padding-left: 48px; }
  .timeline::before{ left: 24px; }
  .tl-dot{ left: 18px; top: 1.2em; }
}
/* === Timeline: без крапок === */
.timeline{
  padding-left: 32px;        /* менший відступ, бо крапки більше немає */
}
.timeline::before{
  left: 12px;                 /* вертикальна лінія ближче до тексту */
  width: 2px;
}

/* глушимо будь-які маркери/псевдоелементи */
.tl-item::before,
.tl-item::after,
.tl-dot,
.tl-dot::before,
.tl-dot::after{
  display: none !important;
  content: none !important;
}

/* чисті відступи пунктів */
.tl-item{ padding: 18px 0; }
.tl-content h3{ margin: 0 0 .35rem; }
.tl-content p{ margin: 0; }

/* трохи щільніше на мобільних */
@media (max-width: 600px){
  .timeline{ padding-left: 28px; }
  .timeline::before{ left: 10px; }
}

/* ===== База ===== */



.eyebrow {
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .8rem;
    opacity: .8
}

.documents h1,
.documents h2 {
    margin: 0 0 .6em
}

.lead {
    font-size: clamp(1rem, 1.2vw + .8rem, 1.25rem);
    line-height: 1.7;
    opacity: .95
}

.muted {
    opacity: .8
}


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

.docs-hero {
    padding: clamp(48px, 6vw, 96px) 0;
    color: #fff;
    background: radial-gradient(1200px 400px at 10% -10%, rgba(0, 120, 255, .15), transparent 60%), radial-gradient(1200px 400px at 120% 10%, rgba(255, 200, 0, .12), transparent 60%), var(--nr-hero-bg, #0b0f1a)
}

.docs-title {
    font-family: "Unbounded", system-ui, sans-serif;
    font-weight: 800
}


/* ===== Tabs ===== */

.docs-tabs {
    padding: 28px 0 64px
}

.tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.tab {
    appearance: none;
    border: 1px solid rgba(0, 0, 0, .1);
    background: #fff;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s
}

.tab:is(:hover, :focus) {
    transform: translateY(-1px)
}



.tabpanels {
    margin-top: 16px
}

.tabpanel[hidden] {
    display: none
}


/* ===== Layout ===== */

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 3vw, 28px)
}

@media (max-width:900px) {
    .grid-2 {
        grid-template-columns: 1fr
    }
}

.card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    padding: clamp(16px, 2vw, 24px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .06)
}


/* ===== Thumb / Lightbox ===== */

.doc-thumb {
    margin: .5rem 0 0
}

.doc-thumb img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
    transition: transform .25s
}

.doc-thumb img:hover {
    transform: scale(1.01)
}

.actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #0d6efd;
    color: #fff;
    text-decoration: none;
    border: 1px solid #0d6efd;
    cursor: pointer
}

.btn-ghost {
    background: #fff;
    color: #0d6efd;
    border-color: #0d6efd
}

.btn:focus {
    outline: 3px solid rgba(13, 110, 253, .35);
    outline-offset: 2px
}

.link {
    color: #0d6efd;
    text-decoration: none
}

.link:hover {
    text-decoration: underline
}


/* ===== PDF Viewer ===== */

.pdf-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 12px
}

.pdf-viewer {
    position: relative;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
    background: #f6f7f9
}

.pdf-viewer iframe {
    display: block;
    width: 100%;
    height: min(78vh, 900px);
    border: 0;
    background: #fff
}

.pdf-viewer.is-fullscreen {
    position: fixed;
    inset: 16px;
    z-index: 1000;
    border-radius: 16px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .35)
}

.pdf-viewer.is-fullscreen iframe {
    height: calc(100vh - 32px)
}


/* ===== Список документів ===== */

.doc-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px
}

.doc-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px dashed rgba(0, 0, 0, .08);
    border-radius: 10px;
    background: #fff
}

.badge {
    font-size: .85rem;
    background: #ffe9a8;
    border: 1px solid #ffcf54;
    padding: 2px 8px;
    border-radius: 999px
}


/* ===== Порожні блоки ===== */

.empty {
    border: 1px dashed rgba(0, 0, 0, .12);
    border-radius: 14px;
    padding: 24px;
    background: #fff
}


/* ===== Лайтбокс ===== */

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    display: none;
    place-items: center;
    z-index: 1200
}

.lightbox.is-open {
    display: grid
}

.lightbox__img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    background: #fff
}

.lightbox__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #fff;
    border: 0;
    border-radius: 999px;
    width: 40px;
    height: 40px;
    cursor: pointer
}


/* ===== Reveal animation ===== */

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: .6s cubic-bezier(.2, .65, .3, 1)
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0)
}


/* === Сітка мініатюр для кількох фото === */

.thumbs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 2vw, 18px);
}

@media (max-width:700px) {
    .thumbs-grid {
        grid-template-columns: 1fr;
    }
}
.nr-topnav{ margin-left:auto; display:flex; align-items:center; gap:14px; }

/* соц-іконки */
.nr-social{ display:inline-flex; align-items:center; gap:14px; }
.nr-social__link{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  color:#fff; background: rgba(0,0,0,.22);
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.nr-social__link:hover,.nr-social__link:focus-visible{ background:rgba(0,0,0,.32); transform:translateY(-1px); }

/* бургер */
.nr-burger{ display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid rgba(0,0,0,.15);
  border-radius:12px; background:rgba(255,255,255,.25); color:#0b1522; cursor:pointer;
}
.nr-burger span{ width:20px; height:2px; background:#0b1522; display:block; position:relative; }
.nr-burger span::before,.nr-burger span::after{ content:""; position:absolute; left:0; width:9px; height:2px; background:#0b1522; }
.nr-burger span::before{ top:-6px } .nr-burger span::after{ top:6px }
.nr-burger[aria-expanded="true"] span{ transform:rotate(45deg) }
.nr-burger[aria-expanded="true"] span::before{ transform:rotate(90deg) }
.nr-burger[aria-expanded="true"] span::after{ opacity:0 }

/* затемнення фону для моб-меню */
.menu-overlay{ position:fixed; inset:64px 0 0 0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .18s; z-index:999; }
.menu-overlay.show{ opacity:1; pointer-events:auto; }

/* ================= MIDDLE BAR (decor) ================= */
.nr-header__mid{ height: clamp(8px, 0.6vw + 6px, 14px);
  background: linear-gradient(90deg, var(--mid-grad-start), var(--mid-grad-end)); }

/* ================= BOTTOM NAV (light) ================= */
.nr-subnav{
  background: var(--light-bg); color: var(--light-fg);
  border-top: 1px solid var(--light-border);
  padding: 8px clamp(10px, 3vw, 0px);
}
.nr-menu{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap: 6px 14px; }
.nr-menu--bottom .nr-menu__item{ position:relative; }

.nr-link{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:10px; text-decoration:none;
  color: var(--light-fg);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  transition: background .2s ease, color .2s ease;
}
.nr-link:hover,.nr-link:focus-visible{ background: var(--light-hover); color: var(--light-fg); }
.nr-caret{ opacity:.9; transition:transform .18s ease; }

/* underline-ефект для активного й hover */
.nr-menu--bottom .nr-link::after{
  content:""; position:absolute; left:10%; right:10%; bottom:-6px; height:3px;
  background: linear-gradient(90deg, var(--ua-blue), var(--ua-yellow));
  border-radius:3px; transform:scaleX(0); transform-origin:center; transition:transform .22s ease;
}
.nr-menu--bottom .nr-link:hover::after,
.nr-menu--bottom .nr-link.active::after,
.nr-menu--bottom .nr-link[aria-current="page"]::after{ transform:scaleX(1); }

/* DROPDOWNS (light) */
.nr-dropdown{ position:relative; }
.nr-dropdown__toggle{ border:0; background:transparent; cursor:pointer; font:inherit; color:inherit; }
.nr-dropdown[data-open="true"] .nr-caret{ transform:rotate(180deg); }

.nr-dropdown__menu{
  position:absolute; left:0; top:calc(100% + 8px); min-width:220px;
  background:#fff; color:var(--light-fg);
  border:1px solid var(--light-border); border-radius:12px; padding:6px;
  box-shadow: var(--dropdown-shadow); display:none; z-index:30;
}
.nr-dropdown[data-open="true"] .nr-dropdown__menu{ display:block; }
.nr-dropdown__link{ display:block; padding:10px 12px; border-radius:8px; color:var(--light-fg); text-decoration:none; }
.nr-dropdown__link:hover,.nr-dropdown__link:focus-visible{ background: var(--light-hover); }

/* ================== RESPONSIVE ================== */



/* Контейнер сторінки */


.contact-page h1 {
    margin: 0 0 16px;
color: #171a21;
    font-weight: 700;
    letter-spacing: .2px
}


/* Сітка контактів */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
}

@media (max-width:700px) {
    .contact-grid {
        grid-template-columns: 1fr
    }
}

.contact-card {
    background: #171a21;
    border: 1px solid #253140;
    border-radius: 14px;
    padding: 22px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #e7e9ee;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transform: translateY(10px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22, .8, .24, 1), opacity .35s ease, box-shadow .25s, border-color .25s, background .25s
}

.contact-card h3 {
    margin: 0 0 10px;
    font-size: 1.15rem;
    letter-spacing: .2px;
    color: #ffffff;
    font-weight: 750
}

.contact-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
    font-size: .98rem;
    color: #c9d2dd
}

.contact-card a {
    color: #9da6ff;
    text-decoration: none;
    font-weight: 700
}

.contact-card a:hover {
    text-decoration: underline
}

.contact-card.hovered {
    border-color: #5a41d8;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .45);
    background: linear-gradient(180deg, rgba(90, 65, 216, .06), transparent 40%), #171a21
}

.contact-card.reveal {
    transform: translateY(0);
    opacity: 1
}


/* Офіс: лейаут */

.office {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 28px;
    margin-top: 28px
}

@media (max-width:900px) {
    .office {
        grid-template-columns: 1fr;
        gap: 18px
    }
}

.office h2 {
    margin: 0 0 10px;
    color: #fff;
    font-weight: 700;
    letter-spacing: .2px
}

.office__info {
    background: #0f131a;
    border: 1px solid #253140;
    border-radius: 14px;
    padding: 20px
}

.office__addr {
    font-style: normal;
    color: #cdd6e3;
    margin-bottom: 10px
}

.addr-line {
    line-height: 1.35
}

.office__actions {
    margin-top: 14px
}


/* Кнопка маршруту */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    border: 1px solid #4e5bd6;
    padding: 10px 14px;
    font-weight: 700;
    color: #e7e9ee;
    background: #2b2f55;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .35)
}

.btn:active {
    transform: translateY(0)
}

.btn--route {
    background: #313874
}


/* Карта */

.office__map {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #253140;
    min-height: 300px
}

.office__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 300px
}


/* Графік роботи */

.hours {
    margin-top: 8px
}

.hours h3 {
    margin: 8px 0 8px;
    color: #eaefff;
    font-size: 1.05rem
}

.hours__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px
}

.hours__table th,
.hours__table td {
    padding: 6px 10px
}

.hours__table th {
    color: #96a2b6;
    font-weight: 700;
    width: 52px;
    text-align: left
}

.hours__table td {
    color: #d9e1ef;
    font-weight: 600
}

.hours__table tr.today {
    background: linear-gradient(90deg, rgba(122, 99, 255, .12), transparent 60%);
    border-radius: 10px
}

.hours__table tr.today th,
.hours__table tr.today td {
    color: #fff
}

.hours__table tr.is-closed td {
    color: #98a2b3
}

.hours__note {
    margin: 6px 0 0;
    color: #98a2b3;
    font-size: .9rem
}


/* Бейдж статусу (відкрито/зачинено) */

.open-badge {
    --bg: #20351f;
    --fg: #b0e3a0;
    --dot: #3ee07b;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid #2f5031;
    background: var(--bg);
    color: var(--fg);
    font-weight: 750;
    padding: 6px 12px;
    margin: 10px 0
}

.open-badge.closed {
    --bg: #3a1e1e;
    --fg: #f2b0b0;
    --dot: #ff6b6b;
    border-color: #6a2e2e
}

.open-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot);
    box-shadow: 0 0 10px var(--dot)
}


/* Тости копіювання */

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #10151c;
    border: 1px solid #324152;
    color: #e7e9ee;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .4);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 9999;
    pointer-events: none
}

.toast.show {
    opacity: 1;
    transform: translateY(0)
}


/* Анімації з повагою до reduce-motion */

@media (prefers-reduced-motion: reduce) {
    .contact-card {
        transition: none
    }
    .btn {
        transition: none
    }
    .toast {
        transition: none
    }
}


:root{ --h-weight:650 }
.single-page h1{font-weight:var(--h-weight);letter-spacing:.2px;margin:0 0 8px}
.single-page .lead{margin:6px 0 18px}
.single-page .two-col .note{
        color: #000000;
}
.nr-menu__item ul li{
    list-style: none;
}

.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}

/* Accordion */
.accordion{display:grid;gap:10px}
.acc{background:#171a21;border:1px solid #253140;border-radius:12px;overflow:hidden}
.acc>button{width:100%;text-align:left;padding:14px 16px;background:transparent;color:#e7e9ee;font-weight:750;display:flex;justify-content:space-between;align-items:center}
.acc>button:hover{background:rgba(255,255,255,.04)}
.acc .acc-body{display:none;padding:0 16px 14px;color:#c9d2dd}
.acc.open .acc-body{display:block}

/* Tabs */
.tabs{display:grid;gap:10px}
.tablist{display:flex;gap:8px;flex-wrap:wrap}
.tablist button{padding:8px 12px;border-radius:10px;border:1px solid #253140;background:#121821;color:#e7e9ee;font-weight:750;cursor:pointer}
.tablist button[aria-selected="true"]{background:linear-gradient(180deg,#5a41d8,#7a63ff);color:#120c2b;border-color:transparent}
/*.tabpanels{border:1px solid #253140;border-radius:12px;padding:16px;background:#171a21}
*/
/* Timeline */
.timeline{position:relative;padding-left:18px}
.timeline::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#5a41d8,#7a63ff)}
.tl-item{position:relative;margin:10px 0;padding-left:12px}
.tl-item::before{content:"";position:absolute;left:-2px;top:.6em;width:10px;height:10px;border-radius:50%;background:#7a63ff;box-shadow:0 0 0 3px rgba(0,0,0,.45)}
.tl-title{font-weight:750}

/* People cards */

.card-person{background:#171a21;border:1px solid #253140;border-radius:14px;padding:14px;display:grid;gap:8px;transition:transform .2s, box-shadow .2s}
.card-person:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.card-person .name{font-weight:800}
.card-person .role{color:#afbacb}

/* Partners filter + grid */
.partners-filter{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.partners-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.partner{background:#171a21;border:1px solid #253140;border-radius:12px;display:grid;place-items:center;aspect-ratio:3/2;color:#dfe6ff;font-weight:800;opacity:.95;transition:transform .15s, filter .15s}
.partner:hover{transform:scale(1.03);filter:saturate(1.1)}
@media (max-width:900px){.partners-grid{grid-template-columns:1fr 1fr}}

/* Org tree (collapsible) */
.org-tree{list-style:none;padding-left:0}
.org-tree li{margin:8px 0;padding-left:16px;position:relative}
.org-tree li::before{content:"";position:absolute;left:6px;top:.9em;width:8px;height:2px;background:#6d7a8a}
.org-node{display:flex;align-items:center;gap:8px;background:#171a21;border:1px solid #253140;border-radius:10px;padding:8px 10px;

    background: rgba(122, 99, 255, .12);
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 10px;
    padding: 10px;
    color: #000000;
    font-family: 'Montserrat';}
.org-toggle{cursor:pointer;border:0;background:transparent;font-weight:800;color:#7a63ff}

/* Note */
.note{background:rgba(122,99,255,.12);border:1px solid rgba(0,0,0,.3);border-radius:10px;padding:10px;     color: #000000;
    font-family: 'Montserrat';}




/* =========================
   НАРОДНА РАДА — HOME.CSS
   Чисто, без підкреслюючої смуги в меню
   ========================= */

/* ---------- База / змінні ---------- */
:root{
  --bg:#0f1115; --bg-2:#121821;
  --text:#e7e9ee; --muted:#afbacb;

  --accent:#5a41d8;     /* фіолетовий */
  --accent-2:#7a63ff;   /* світліший фіолетовий */

  --card:#171a21; --card-2:#1b2230; --border:#253140;
  --radius:14px; --radius-sm:10px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --shadow-2:0 18px 40px rgba(0,0,0,.45);

  --fs-1:clamp(2rem,4.5vw,4.5rem);
  --fs-2:clamp(1.25rem,2.2vw,2rem);
  --fs-3:clamp(1.05rem,1.2vw,1.15rem);
  --fs-body:1rem;

  --t-quick:.15s ease;
  --t-slow:.28s cubic-bezier(.22,.8,.24,1);

  --container-w:min(1100px,92%);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f8fafc; --bg-2:#ffffff; --text:#0f172a; --muted:#4b5563;
    --card:#ffffff; --card-2:#ffffff; --border:#e2e8f0;
    --shadow:0 12px 30px rgba(2,6,23,.08);
    --shadow-2:0 18px 40px rgba(2,6,23,.12);
  }
}



/* утиліти */
img{ max-width:100%; display:block }
a{ text-decoration:none; color:inherit }

/* ---------- Кнопки (єдині) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; font-weight:800;
  color:#120c2b;
  background-image:linear-gradient(90deg, #1e90ff, #ffd500);     border: 0px;
  box-shadow:0 10px 22px rgba(90,65,216,.28);
  transition: transform var(--t-quick), filter var(--t-quick), box-shadow var(--t-quick);
}
.btn:hover{ transform:translateY(-1px) scale(1.02); filter:brightness(1.05) }
.btn.secondary{
  background-image:linear-gradient(180deg,color-mix(in oklab,var(--accent-2),#fff 10%),var(--accent-2));
  box-shadow:0 10px 22px rgba(122,99,255,.28);
}

/* ---------- HERO ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding: clamp(60px, 10vw, 120px) 0 clamp(36px, 6vw, 64px);
  color:#eaf2ff;
}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.40),rgba(0,0,0,.40)),
    radial-gradient(100% 90% at 100% 0%, rgba(122,99,255,.25), transparent 60%),
    radial-gradient(100% 80% at 0% 0%, rgba(90,65,216,.25), transparent 60%),
    linear-gradient(90deg,#0e2a30,#142c3a);
  animation:bgShift 18s ease-in-out infinite alternate;
  filter:saturate(1.05);
}
@keyframes bgShift{
  0%{ transform:translate3d(0,0,0) scale(1) }
  100%{ transform:translate3d(0,-12px,0) scale(1.03) }
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center;
  gap:clamp(16px,3vw,32px);
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr } }

.hero-copy h1{
  margin:0 0 10px; font-family:"Unbounded",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:900; letter-spacing:.3px; font-size:clamp(34px,6vw,72px); color:#fff;
}
.hero-copy p{ color:#c8d2de; max-width:720px }
.hero-actions{ display:flex; gap:12px; margin-top:22px }

/* статистика */
.hero-stats{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.hero-stats li{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:14px 16px; backdrop-filter:blur(4px)
}
.hero-stats span{ display:block; font-size:clamp(28px,4.5vw,44px); font-weight:900; color:#fff; line-height:1 }
.hero-stats small{ color:#b8c3d1 }

/* ---------- Reveal-анімації ---------- */
.reveal-up{ opacity:.01; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease }
.reveal-up.show{ opacity:1; transform:none }
.delay-1{ transition-delay:.08s } .delay-2{ transition-delay:.16s } .delay-3{ transition-delay:.24s }
@media (prefers-reduced-motion:reduce){ .reveal-up{ opacity:1; transform:none } }

/* ---------- Quick Links: повноширинна смуга ---------- */
.quicklinks-band{
      margin: 0px 0 28px;
  padding:clamp(16px,3.5vw,32px) 0;
  border-top:1px solid rgba(255,255,255,.06);
  position:relative;
}
.quicklinks-band .quick-links{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px;
}
@media (max-width:900px){ .quicklinks-band .quick-links{ grid-template-columns:1fr 1fr } }
.quicklinks-band .ql-card{
 display: grid;
    gap: 6px;
    padding: 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e5eaf8;
    color: #0b1522;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.quicklinks-band .ql-card:hover{
  background:#fff; border-color:#dfe6fb; box-shadow:0 10px 24px rgba(15,23,42,.10); transform:translateY(-2px);
}
.quicklinks-band .ql-icon{ font-size:22px }
.quicklinks-band .ql-title{
    font-weight:800;
        font-weight: 800;
    font-family: "Unbounded", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 18px;
    margin: 12px 0px;
     }
.quicklinks-band .ql-sub{ color:#48566b; font-size:.95rem }
.quicklinks-band::before,
.quicklinks-band::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:100%; max-width:100vw; height:12px; pointer-events:none; filter:blur(6px);
}

/* ---------- Останні новини ---------- */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
}
.section-head h2{
  margin:0; font-family:"Unbounded",system-ui; font-weight:800; font-size:clamp(22px,3vw,32px); color:#0b1522; margin-bottom: 32px;
}
.text-link{
        color: #223a8f;
    font-weight: 600;
    font-family: 'Montserrat';}
.text-link:hover{ text-decoration:underline }

.home-news{ padding:32px 0 32px; background:#f8fbff; border-top:1px solid #e7edf9; border-bottom:1px solid #e7edf9 }
.news-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px }
@media (max-width:900px){ .news-grid{ grid-template-columns:1fr } }

.news-card, .home-news .card, .home-news article{
  background:#fff; border:1px solid #e7eaf6; border-radius:14px; overflow:hidden;
  display:grid; grid-template-rows:160px auto; min-height:260px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.news-card:hover, .home-news .card:hover, .home-news article:hover{
  transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.news-card img, .home-news .card img, .home-news article img{ width:100%; height:100%; object-fit:cover; background:#eef2ff }
.news-card .body, .home-news .card .body, .home-news article .body{ padding:12px 14px }
.news-card h3, .home-news .card h3, .home-news article h3{ margin:6px 0; font-size:1.05rem; color:#0b1522 }
.news-card .body p, .home-news .card .body p, .home-news article .body p{ color:#475569 }

/* ---------- Проєкти — горизонтальний скрол ---------- */
.home-projects{ padding:28px 0 }
.projects-scroller{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 320px);
  gap:14px; overflow:auto; padding-bottom:8px; scroll-snap-type:x mandatory;
}
.projects-scroller > *{ scroll-snap-align:start }
.project-card{
  background:#0f172a; color:#e8eefc; border:1px solid #1d2842; border-radius:16px; padding:14px;

}
.project-card .pc-img{ height:140px; border-radius:10px; background:linear-gradient(135deg,#223a8f,#6e6dfc); margin-bottom:10px }
.project-card h3{ margin:8px 0; font-size:1.1rem }
.project-card p{ color:#c9d2e8 }

/* ---------- Державні портали ---------- */
.gov-links{ padding:40px 0 40px; background:#fafcff; border-top:1px solid #eef2fb }
.gov-links h2{ margin:0 0 32px; font-family:"Unbounded"; font-weight:800; color:#0b1522 }
.gov-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px }
@media (max-width:900px){ .gov-grid{ grid-template-columns:1fr } }
.gov-card{
  display:grid; gap:8px; padding:16px; border-radius:14px; text-decoration:none;
  color:#0b1522; background:#fff; border:1px solid #e6ecf7;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.gov-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,23,42,.08); border-color:#dbe6fb }
.gov-badge{
  display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 28px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    background: linear-gradient(90deg, #1f6fff, #ffd33d);
        color: #ffffff;
    font-family: 'Montserrat';
}

/* ---------- Footer (легкий) ---------- */
.footer{ background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 40%), #0b1a22; color:#8ea0ad; border-top:1px solid #10222b }
.footer .row{ min-height:64px }

/* ---------- Хедер: повністю без підкреслюючої лінії ---------- */
.nr-menu--bottom .nr-link,
.nr-menu--bottom .nr-dropdown__toggle{
  padding-bottom:12px;
  background-image:none !important;
}
.nr-menu--bottom .nr-link::after,
.nr-menu--bottom .nr-dropdown__toggle::after{
  content:none !important; display:none !important;
}
.nr-subnav{ position:relative; overflow:visible; z-index:20 }



@media (max-width: 900px){
  .nr-burger{ display:flex; }
  /* мобільне меню: виїжджає зверху, темний стиль для контрасту */
  .nr-subnav{
    position:fixed; left:0; right:0; top:64px;
    transform:translateY(-120%); background:#0f1115; color:#e7e9ee;
    border-top:1px solid rgba(255,255,255,.08); box-shadow:0 16px 40px rgba(0,0,0,.35);
    transition:transform .28s cubic-bezier(.22,.8,.24,1); z-index:1000;
  }
  .nr-subnav.open{ transform:translateY(0); }
  .nr-menu--bottom{ flex-direction:column; padding:10px; gap:8px; }
  .nr-menu--bottom .nr-link{ color:#e7e9ee; background:#121821; }
  .nr-menu--bottom .nr-link::after{ background: linear-gradient(90deg, #7aa2ff, #ffe37a); bottom:-4px; }
  .nr-dropdown__menu{ position:static; display:none; background:#1b2230; color:#e7e9ee; border-color:#253140; box-shadow:none; margin-top:6px; }
  .nr-dropdown[data-open="true"] .nr-dropdown__menu{ display:block; }
  body.menu-open{ overflow:hidden; }
}

/* На дуже вузьких — трохи зменшуємо бренд */
@media (max-width: 520px){
  .nr-brand__logo{ width:36px; height:36px; }
  .nr-brand__title{ font-size: clamp(1.35rem, 6vw, 1.8rem); }
}

/* Скрол-стан: компактніше */
.nr-header.is-scrolled .nr-brand__title{
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  text-shadow: 0 1px 0 rgba(255,255,255,.2), 0 1px 8px rgba(0,0,0,.08);
}
.nr-header.is-scrolled .nr-header__top{ min-height:64px; }
/* === Normalize: однаковий шрифт для всіх пунктів меню === */
.nr-menu--bottom .nr-link,
.nr-menu--bottom .nr-dropdown__toggle{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: .2px;
}

/* Робимо кнопки візуально як лінки */
.nr-dropdown__toggle{
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 12px;         /* як у .nr-link */
  border-radius: 10px;
}

/* Якщо десь всередині лінку є <strong>, не перетискай шрифт */
.nr-link strong{ font-weight: inherit; }

/* На світлому низі зберігаємо однаковий вигляд hover/active і для кнопок */
.nr-menu--bottom .nr-dropdown__toggle:hover,
.nr-menu--bottom .nr-dropdown__toggle:focus-visible{
  background: var(--light-hover);
  color: var(--light-fg);
}

/* Підкреслення-індикатор для кнопок теж */
.nr-menu--bottom .nr-dropdown__toggle::after{
  content:""; position:absolute; left:10%; right:10%; bottom:-6px; height:3px;
  background: linear-gradient(90deg, var(--ua-blue), var(--ua-yellow));
  border-radius:3px; transform:scaleX(0); transform-origin:center; transition:transform .22s ease;
}
.nr-menu--bottom .nr-dropdown__toggle:hover::after,
.nr-menu--bottom .nr-dropdown__toggle[aria-expanded="true"]::after{ transform:scaleX(1); }



.footer {
    background: linear-gradient(180deg, rgba(0, 0, 0, .12), transparent 40%), #0b1a22;
    color: #8ea0ad;
    border-top: 1px solid #10222b;
}