.site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: saturate(160%) blur(10px);
      -webkit-backdrop-filter: saturate(160%) blur(10px);
      border-bottom: 1px solid rgba(34, 197, 94, 0.12);
    }
    .site-header__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 14px 24px;
      display: flex;
      align-items: center;
      gap: 28px;
    }
    .site-header__logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: #2e0547;
      font-weight: 800;
      font-size: 18px;
      letter-spacing: 0.01em;
    }
    .site-header__logo img {
      width: 40px;
      height: auto;
      display: block;
    }
    .site-header__nav {
      display: flex;
      align-items: center;
      gap: 28px;
      margin-left: 24px;
    }
    .site-header__nav a {
      color: #4a4750;
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      padding: 6px 0;
      position: relative;
      transition: color 0.15s;
    }
    .site-header__nav a:hover,
    .site-header__nav a.active {
      color: var(--green-deep);
    }
    .site-header__nav a.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -2px;
      height: 2px;
      background: var(--green-text);
      border-radius: 2px;
    }
    .site-header__spacer { flex: 1; }
    .site-header__login {
      display: inline-flex;
      align-items: center;
      padding: 9px 22px;
      border-radius: 6px;
      border: 1.5px solid var(--green-deep);
      color: var(--green-deep);
      background: transparent;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      transition: background 0.15s, color 0.15s;
    }
    .site-header__login:hover {
      background: var(--green-deep);
      color: #ffffff;
    }
    .site-header__hamburger {
      display: none;
      width: 44px;
      height: 44px;
      border: 0;
      background: transparent;
      padding: 0;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      color: #2e0547;
    }
    .site-header__hamburger:hover { background: rgba(34, 197, 94, 0.08); }
    .site-header__hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
      position: relative;
    }
    .site-header__hamburger span::before,
    .site-header__hamburger span::after {
      content: "";
      position: absolute;
      left: 0;
      width: 22px;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
    }
    .site-header__hamburger span::before { top: -7px; }
    .site-header__hamburger span::after  { top: 7px; }
    @media (max-width: 820px) {
      .site-header__nav { display: none; }
      .site-header__spacer { display: none; }
      .site-header__inner { gap: 12px; padding: 12px 18px; }
      .site-header__login { margin-left: auto; margin-right: auto; }
      .site-header__hamburger { display: inline-flex; }
    }

    /* ─── mobile menu overlay ─── */
    .mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(46, 5, 71, 0.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    .mobile-menu.is-open {
      opacity: 1;
      pointer-events: auto;
    }
    .mobile-menu__panel {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: min(320px, 86vw);
      background: #ffffff;
      box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
      transform: translateX(100%);
      transition: transform 0.25s ease;
      display: flex;
      flex-direction: column;
      padding: 20px 22px 32px;
    }
    .mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
    .mobile-menu__close {
      align-self: flex-end;
      width: 40px;
      height: 40px;
      border: 0;
      background: transparent;
      cursor: pointer;
      font-size: 26px;
      color: #2e0547;
      line-height: 1;
      border-radius: 8px;
    }
    .mobile-menu__close:hover { background: rgba(34, 197, 94, 0.08); }
    .mobile-menu__nav {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .mobile-menu__nav a {
      padding: 14px 8px;
      color: #2e0547;
      text-decoration: none;
      font-size: 17px;
      font-weight: 600;
      border-bottom: 1px solid #f0f0f4;
    }
    .mobile-menu__nav a.active { color: var(--green-deep); }


.site-header { --green-deep:#16a34a; --green-text:#22c55e; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.site-header__inner,.mobile-menu__panel { box-sizing:border-box; }
.site-header__logo,.site-header__login { flex-shrink:0; }
.site-header__nav a { white-space:nowrap; padding:10px 12px; border-radius:7px; }
.site-header__nav { gap:6px; margin-left:12px; }
.site-header__nav a:hover,.site-header__nav a.active { background:#edf9f0; color:#15803d; }
.site-header__login { background:linear-gradient(180deg,#22c55e,#16a34a); color:white; box-shadow:0 2px 5px #16a34a26; }
.site-header a:focus-visible,.site-header button:focus-visible,.mobile-menu a:focus-visible,.mobile-menu button:focus-visible { outline:3px solid #22c55e; outline-offset:3px; }
.mobile-menu { --green-deep:#16a34a; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.mobile-menu:not(.is-open) { visibility:hidden; }
.mobile-menu__nav a:hover,.mobile-menu__nav a.active { background:#edf9f0; border-radius:7px; }
@media(max-width:1000px) { .site-header__nav,.site-header__spacer {display:none;} .site-header__inner {gap:12px;padding:12px 18px;} .site-header__login {margin-left:auto;margin-right:0;} .site-header__hamburger {display:inline-flex;} }
@media(max-width:360px) { .site-header__logo {font-size:15px;gap:6px;} .site-header__logo img {width:32px;} .site-header__login {padding:9px 12px;} }