:root{--text:#e7eef7;--muted:#a0b1c2;--brand:#6aa6ff;--brand-strong:#3b82f6;--border:#223041}

.site-header{position:sticky;top:0;z-index:1000;background:rgba(17,22,28,.85);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(34,48,65,.7)}
.nav-wrap{max-width:1200px;margin:0 auto;padding:10px 16px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px}

.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand__logo{height:45px;width:auto;display:block;object-fit:contain}

.nav--desktop{display:none;gap:16px;align-items:center}
.nav__link{text-decoration:none;color:var(--muted);font-weight:500;padding:8px 10px;border-radius:10px}
.nav__link:hover{color:var(--text);background:rgba(255,255,255,.04)}
.nav__link.is-active{color:var(--text);background:rgba(106,166,255,.12)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:14px;text-decoration:none;font-weight:600;border:1px solid rgba(34,48,65,.7)}
.btn--ghost{color:var(--text)} .btn--ghost:hover{background:rgba(255,255,255,.04)}
.btn--primary{background:var(--brand);color:#0b1020;border-color:transparent}
.btn--primary:hover{background:var(--brand-strong)}

.hamburger{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(34,48,65,.7);background:rgba(255,255,255,.02);cursor:pointer}
.hamburger svg path{stroke:#fff}

.drawer{position:fixed;left:12px;right:12px;top:60px;background:rgba(17,22,28,.96);
  border:1px solid rgba(34,48,65,.8);border-radius:16px;padding:10px;display:none;flex-direction:column;gap:4px}
.drawer__link{padding:12px 10px;border-radius:12px;color:var(--text);text-decoration:none}
.drawer__link:hover{background:rgba(255,255,255,.04)}
.drawer__actions{display:flex;flex-direction:column;gap:8px;padding:8px}
.btn--full{width:100%}

@media (min-width:992px){
  .nav-wrap{grid-template-columns:auto 1fr}
  .hamburger{display:none}
  .nav.nav--desktop{display:inline-flex;justify-self:end}
  .drawer{display:none!important}
}
/* --- Mobile drawer behavior & layering --- */
.site-header { z-index: 1000; }
.drawer{
  position: fixed;
  left: 12px; right: 12px; top: 60px;
  background: rgba(17,22,28,.96);
  border: 1px solid rgba(34,48,65,.8);
  border-radius: 16px;
  padding: 10px;
  display: flex;              /* keep layout ready */
  flex-direction: column; gap: 4px;
  pointer-events: none;       /* hidden by default */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1100;              /* above header */
}
.drawer.open{
  pointer-events: auto;
  opacity: 1;
  transform: none;
}

body.no-scroll{ overflow: hidden; }

@media (min-width:992px){
  .drawer{ display: none !important; }  /* desktop me hide */
}
/* === Mobile drawer: force visibility via class === */
.site-header { z-index: 1000; position: sticky; top: 0; }

.site-header .drawer{
  position: fixed;
  left: 12px; right: 12px; top: 60px;
  background: rgba(17,22,28,.96);
  border: 1px solid rgba(34,48,65,.8);
  border-radius: 16px;
  padding: 10px;
  display: flex !important;          /* layout ready */
  flex-direction: column; gap: 4px;
  opacity: 0;                        /* hidden by default */
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1100;                     /* above header */
}
.site-header .drawer.open{
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

body.no-scroll{ overflow: hidden; }

/* Desktop: drawer must be hidden completely */
@media (min-width: 992px){
  .site-header .drawer{ display: none !important; }
}

/* Make sure the burger is clickable above any overlays */
.site-header .hamburger{ position: relative; z-index: 1200; }