:root{--c:#198754;--c2:#146c43;--bd:#e8ebf2}
header{background:var(--c);color:#fff}
.topbar{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 14px}
.brand{font-weight:800;text-decoration:none;font-size:clamp(16px,3.5vw,20px);color:#fff}
.mainnav{display:flex}
.menu{display:flex;list-style:none;margin:0;padding:0;gap:10px}
.menu a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;color:#fff}
.menu a:hover{background:#ffffff1a}
.navbtn{display:none;background:#0000;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer}
@media (max-width:720px){
  .mainnav{display:none;position:absolute;top:54px;right:10px;left:10px;background:#fff;color:#111;border:1px solid var(--bd);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.08); z-index:50}
  .mainnav.open{display:block}
  .menu{flex-direction:column}
  .menu a{color:#111}
  .navbtn{display:block}
}