/* SYNTONIA — спільна шапка, бічне меню й смужка «Програма ГО». Витягнуто з index.html, підключається на всіх сторінках. */
:root{
    --navy:#16395B; --teal:#5CB4A8; --teal-dk:#2E7D8A; --warm:#C98B3E; --warm-dk:#8A5A1E;
    --bg:#FAF8F3; --paper:#FFFFFF; --tint:#F2EFE7; --ink:#1B2530; --ink2:#3F4A56; --mute:#6B6760; --line:#E3DED3; --alert:#b0473e;
    --serif:'Lora',Georgia,'Times New Roman',serif;
    --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
    --maxw:1160px;
  }
.wrap{max-width:var(--maxw,1180px);margin:0 auto;padding:0 28px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:0.9688rem;border-radius:999px;padding:13px 24px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .2s}
@keyframes dIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:999;background:#fff;padding:8px 14px;border-radius:8px}
.btn-pri{background:var(--navy);color:#fff}
.btn-pri:hover{background:#0f2b46}
.endorse{background:var(--navy);color:#cdd6df;font-size:0.8125rem}
.endorse .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:36px}
.endorse a{color:#fff;text-decoration:none;font-weight:600;white-space:nowrap}
.endorse a:hover{text-decoration:underline}
.endorse .er{display:flex;gap:20px}
header.site{position:sticky;top:0;z-index:100;background:rgba(250,248,243,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .bar{display:flex;align-items:center;gap:28px;min-height:70px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.logo svg{width:34px;height:34px}
.logo b{font-family:var(--sans);font-weight:800;letter-spacing:.14em;color:var(--navy);font-size:1rem}
.links{display:flex;gap:24px}
.links a{font-size:0.9062rem;font-weight:500;color:var(--ink2);text-decoration:none;white-space:nowrap}
.links a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:6px}
header.site .btn{padding:10px 18px;font-size:0.9062rem}
@media(max-width:1080px){.links,header.site .bar>.btn{display:none}header.site.open .links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:6px 28px 18px}header.site.open .links a{padding:12px 0;border-bottom:1px solid var(--line);font-size:1rem}}
@media(max-width:640px){.endorse .er a:not(.keep){display:none}}
footer .logo b{color:#fff}
footer .logo{margin-bottom:14px}
header.site{transition:box-shadow .3s}
header.site.scrolled{box-shadow:0 6px 24px rgba(22,57,91,.08)}
.links a{position:relative;text-decoration:none!important}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--teal-dk);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.links a:hover::after{transform:scaleX(1)}
.menu-btn{display:inline-flex;align-items:center;gap:9px;background:none;border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;font:600 .9063rem var(--sans);color:var(--navy);cursor:pointer;transition:border-color .2s,background .2s}
.menu-btn:hover{border-color:var(--navy);background:#fff}
.menu-btn i{width:16px;height:10px;position:relative;border-top:1.6px solid currentColor;border-bottom:1.6px solid currentColor}
.menu-btn i::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:1.6px solid currentColor}
@media(max-width:1180px){.links{display:none!important}.menu-btn span{display:none}.menu-btn{padding:0 12px}}
@media(max-width:560px){header.site .bar>.btn{display:none}}
.drawer{position:fixed;inset:0;z-index:300}
.drawer-bg{position:absolute;inset:0;background:rgba(15,30,50,.4);opacity:0;transition:opacity .3s}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--bg);overflow:auto;padding:22px 30px 32px;transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.7,.2,1);box-shadow:-20px 0 60px rgba(15,30,50,.18)}
.drawer.on .drawer-bg{opacity:1}
.drawer.on .drawer-panel{transform:none}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.drawer-brand{font-weight:800;letter-spacing:.14em;color:var(--navy)}
.drawer-x{background:none;border:none;font-size:2.125rem;line-height:1;color:var(--navy);cursor:pointer;padding:0 4px}
.drawer-cta{width:100%;justify-content:center;margin-bottom:10px}
.dgroup{margin-top:22px}
.dgroup h2{font-family:var(--sans);font-size:0.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dk);margin-bottom:6px}
.dgroup ul{list-style:none;border-top:1px solid var(--line)}
.dgroup a{display:block;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--navy)}
.dgroup a b{font-weight:600;font-size:1rem}
.dgroup a span{display:block;font-size:0.8438rem;color:var(--mute)}
.dgroup a:hover b{text-decoration:underline;text-underline-offset:4px}
.drawer.on .dgroup{animation:dIn .45s both}
.drawer.on .dgroup:nth-of-type(2){animation-delay:.06s}
.drawer.on .dgroup:nth-of-type(3){animation-delay:.12s}
.drawer.on .dgroup:nth-of-type(4){animation-delay:.18s}
.drawer.on .dgroup:nth-of-type(5){animation-delay:.24s}
.drawer-foot{margin-top:26px;font-size:0.9062rem;color:var(--mute)}
.drawer-foot a{color:var(--navy);font-weight:600}
.drawer-foot p{margin-top:8px}
.btn:hover{transform:translateY(-1px)}
.lang{display:inline-flex;align-items:center;gap:2px;height:38px;padding:3px;border:1.5px solid var(--line);border-radius:999px;background:rgba(255,255,255,.6)}
.lang a{border-radius:999px!important;display:inline-flex;align-items:center;justify-content:center;height:100%;min-width:36px;padding:0 10px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-decoration:none;color:var(--mute);line-height:1;transition:background .2s,color .2s}
.lang a[aria-current]{background:var(--navy);color:#fff;box-shadow:0 1px 3px rgba(22,57,91,.25)}
.lang a:not([aria-current]):hover{color:var(--navy);background:var(--tint)}
.menu-btn{height:38px;padding:0 16px}
header.site .bar{gap:14px}
header.site .links{margin-right:14px}
.logo{margin-right:auto}
@media(max-width:420px){.lang a{min-width:32px;padding:0 7px}}