/* =========================
   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;
  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-header.is-scrolled{
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  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;
}
.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 Alternates",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; }

.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:20px; 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, 28px);
}
.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 Alternates", 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 ================== */
@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 Alternates", 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); }







/* =========================
   НАРОДНА РАДА — 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);
  }
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg); font-size:var(--fs-body); line-height:1.55;
}

/* утиліти */
img{ max-width:100%; display:block }
a{ text-decoration:none; color:inherit }
.container{ width:var(--container-w); margin:0 auto }

/* ---------- Кнопки (єдині) ---------- */
.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(180deg,color-mix(in oklab,var(--accent),#fff 8%),var(--accent));
  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:clamp(24px,4vw,48px) 0;
  padding:clamp(16px,3.5vw,32px) 0;
  background:#0f1115;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 6px 24px rgba(0,0,0,.25), 0 16px 32px rgba(2,6,23,.20);
  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:#f6f8ff; 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 }
.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);
}
.quicklinks-band::before{ top:-12px; background:radial-gradient(60% 100% at 50% 0%, rgba(15,23,42,.14), transparent 70%) }
.quicklinks-band::after{ bottom:-12px; background:radial-gradient(60% 100% at 50% 100%, rgba(15,23,42,.14), transparent 70%) }

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

.home-news{ padding:18px 0 6px; 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;
  box-shadow:0 10px 24px rgba(2,6,23,.35);
}
.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:28px 0 40px; background:#fafcff; border-top:1px solid #eef2fb }
.gov-links h2{ margin:0 0 14px; font-family:"Unbounded"; font-weight:900; 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:.9rem;
  background:linear-gradient(90deg,#1f6fff,#ffd33d); color:#0b1522;
}

/* ---------- 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 }
.muted{ color:var(--muted) }

/* ---------- Хедер: повністю без підкреслюючої лінії ---------- */
.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 }





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