/* Mobile drawer + burger button — shared by marketing pages */

.nav-actions { display: inline-flex; align-items: center; gap: 10px; }

.burger-btn {
  display: none;
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center;
  background: rgba(20,30,55,.5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: #fff; cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.burger-btn:hover { background: rgba(20,30,55,.75); border-color: rgba(255,255,255,.18); }
.burger-btn:focus-visible { outline: 2px solid #2EE6B0; outline-offset: 2px; }

.mobile-drawer {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 15, 30, .96);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 240ms ease, visibility 240ms ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mobile-drawer-inner {
  min-height: 100%;
  padding: 18px 20px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; }
.mobile-drawer-close {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20,30,55,.5);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: #fff; cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.mobile-drawer-close:hover { background: rgba(20,30,55,.75); border-color: rgba(255,255,255,.18); }
.mobile-drawer-close:focus-visible { outline: 2px solid #2EE6B0; outline-offset: 2px; }

.mobile-drawer-list { display: flex; flex-direction: column; gap: 2px; }

.m-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: 14px;
  font: 400 17px/1.2 var(--font-sans, system-ui, sans-serif);
  color: #C8D4E8; text-decoration: none;
  letter-spacing: -0.01em;
  transition: background 160ms ease, color 160ms ease;
}
.m-link:hover { background: rgba(255,255,255,.04); color: #fff; }
.m-link.active { background: rgba(46,230,176,.12); color: #2EE6B0; }

details.m-group { border-radius: 14px; }
details.m-group > summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; cursor: pointer;
  font: 400 17px/1.2 var(--font-sans, system-ui, sans-serif);
  color: #C8D4E8;
  border-radius: 14px;
  transition: background 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
details.m-group > summary::-webkit-details-marker { display: none; }
details.m-group > summary::marker { content: ''; }
details.m-group > summary:hover { background: rgba(255,255,255,.04); color: #fff; }
details.m-group > summary .chev { transition: transform 220ms ease; opacity: .55; flex: 0 0 auto; }
details.m-group[open] > summary { color: #fff; background: rgba(255,255,255,.04); }
details.m-group[open] > summary .chev { transform: rotate(180deg); opacity: 1; }

.m-sub { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 8px 6px; }
.m-sub a {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: #fff;
  transition: background 160ms ease;
}
.m-sub a:hover { background: rgba(46,230,176,.08); }
.m-sub a.active { background: rgba(46,230,176,.12); }
.m-sub a.active .m-sub-title { color: #2EE6B0; }

.m-sub-icon {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(46,230,176,.12);
  border: 1px solid rgba(46,230,176,.25);
  display: flex; align-items: center; justify-content: center;
  color: #2EE6B0;
}
.m-sub-text { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
.m-sub-title { font: 500 14px/1.3 var(--font-sans, system-ui, sans-serif); color: #fff; letter-spacing: -0.005em; }
.m-sub-desc { font: 400 12px/1.4 var(--font-sans, system-ui, sans-serif); color: #93A3BD; margin-top: 2px; letter-spacing: -0.005em; }

.m-sub-all {
  display: flex !important; align-items: center; justify-content: space-between;
  padding: 12px !important; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.06);
  font: 500 13px/1 var(--font-sans, system-ui, sans-serif);
  color: #2EE6B0 !important;
  border-radius: 0 !important;
}
.m-sub-all svg { transition: transform 160ms ease; }
.m-sub-all:hover svg { transform: translateX(4px); }

.m-cta {
  display: inline-flex; justify-content: center; align-items: center; gap: 10px;
  margin-top: 8px;
  background: #2EE6B0; color: #052A20;
  padding: 16px 22px; border-radius: 999px;
  font: 500 15px/1 var(--font-sans, system-ui, sans-serif);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background 160ms ease, transform 160ms ease;
}
.m-cta:hover { background: #4DF2C0; }
.m-cta:active { transform: translateY(1px); }

body.mobile-drawer-open { overflow: hidden; }
body.mobile-drawer-open .mobile-drawer {
  opacity: 1; visibility: visible; pointer-events: auto;
}

@media (max-width: 1024px) {
  .burger-btn { display: inline-flex; }
}
@media (max-width: 720px) {
  .burger-btn { width: 36px; height: 36px; }
  .burger-btn svg { width: 18px; height: 18px; }
  .nav-actions { gap: 8px; }
}
/* On small phones the "Запланировать звонок" pill steals room from the burger;
   hide it — the same CTA is reachable from inside the drawer. */
@media (max-width: 480px) {
  .nav-actions .cta-pill { display: none; }
}