:root{ --dark:#021526; --blue:#3972FE; --white:#fff; --muted:#5c6b7a; --radius:8px; --primary-600: #2f5cf0; }

.nav-wrap{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif; z-index: 999;}
@font-face{
  font-family:"DM-Sans";
  src:url("../fonts/DMSans-VariableFont.ttf") format("truetype-variations");
  font-weight:100 1000; font-style:normal; font-display:swap;
}

/* верхние вкладки */
.audience-bar{background:var(--dark); color:#cfe0ff}
.audience-tabs{margin:0 auto; height:40px; display:flex; align-items:flex-end; justify-content:center; gap:48px}
.audience-tabs .tab{padding:10px 14px 8px; color:#cfe0ff; text-decoration:none; opacity:.75; border-bottom:3px solid transparent; transition:.2s; font-size: 14px;}
.audience-tabs .tab strong{color:#fff}
.audience-tabs .tab:hover{opacity:1}
.audience-tabs .tab.active{opacity:1; color:#fff; border-bottom-color:#fff}


.main-bar{
margin:0 auto;
    height:80px; padding:0 16px;
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; background:var(--white);
    position: relative;        
    z-index: 999;               
  }
  
  .main-bar::after{
    content:"";
    position:absolute; left:50%; bottom:0;
    transform:translateX(-50%);
    height:1px;
    background:#eef2f7;
    width: calc(100vw - (100vw - 100%));
  }

  @supports (width: 100dvw){
    .main-bar::after{ width:100dvw; }
  }
.brand{display:flex; align-items:end; gap:10px; text-decoration:none}
.logo{width:40px}
.brand-name{font-family:'DM-Sans',sans-serif; font-weight:700; font-size:36px; color:var(--blue)}

.menu{display:flex; gap:24px}
.menu a{color:#0b1420; text-decoration:none; padding:8px 0; font-size: 16px;}
.menu a:hover{color:var(--blue)}

.lang-switch{margin-left:8px}
.lang-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:none; background:transparent; cursor:pointer;
  font: 16px/1 Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:#0b1420; padding-right:16px; text-transform:lowercase;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'><path d='M5 7l5 5 5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 0.1rem center;
}
.lang-select:focus{outline:none}

.actions{display:flex; align-items:center; gap:12px}
.nav-btn-check{
  background:var(--blue); color:#fff; font-weight:600;
  height:40px; padding:0 18px; border-radius:8px; border:1px solid transparent;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:16px;
  box-shadow:0 6px 20px rgba(57,114,254,.25);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 28px;
  text-decoration:none; font-weight:500; font-size:16px;border-radius: var(--radius); border:1px solid transparent;
}
.btn-outline{border-color:var(--blue); color:var(--blue); background:#fff}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 6px 20px rgba(57,114,254,.25)}

.burger{
  display:none;              /* на десктопе скрыт */
  position:relative;
  width:32px; height:24px;
  border:0; background:transparent; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.burger .burger-line,
.burger::before,
.burger::after{
  content:"";
  position:absolute; left:5px; right:5px;
  height:2px; background:#0b1420; border-radius:2px;
}
.burger .burger-line{ top:50%; transform:translateY(-50%); } 
.burger::before{ top:4px; }                               
.burger::after{ bottom:4px; }                               

/* мобильная панель */
.mobile-menu{
  position:fixed; top:0; right:0; height:100dvh; width:320px; max-width:85%;
  background:#fff; box-shadow:-8px 0 24px rgba(2,21,38,.15);
  transform:translateX(100%); transition:transform .25s ease; z-index:1001;
  display:flex; flex-direction:column; padding:16px;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.mobile-title{font-weight:700; font-size:18px}
.mobile-close{border:none; background:transparent; font-size:28px; line-height:1; cursor:pointer}
.mobile-nav{display:flex; flex-direction:column; gap:8px; padding:12px 0}
.mobile-nav a{padding:10px 6px; text-decoration:none; color:#0b1420;  font-weight:600}
.mobile-nav a:hover{background:#f5f8ff; color:var(--blue)}
.mobile-lang{margin-top:auto; padding-top:8px; border-top:1px solid #eef2f7}
.mobile-actions{display:flex; gap:10px; margin-top:10px}

.backdrop{
  position:fixed; inset:0; background:rgba(2,21,38,.35);
  opacity:0; visibility:hidden; transition:.2s; z-index:1000;
}
.backdrop.show{opacity:1; visibility:visible}

/* адаптив */
@media (max-width:1024px){
  .menu, .actions, .lang-switch{display:none}
  .burger{display:block}
  .logo{width:32px}
  .brand-name{font-size:24px}
  .audience-tabs{gap:24px; height:36px}
  .audience-tabs .tab{padding:8px 10px 6px; font-size:14px}
}
@media (max-width:480px){
  .mobile-menu{width:100%; max-width:none}
}

 .menu .navlink,
 .mobile-nav .navlink,
 .mobile-nav .m-item{
   color:#0b1420; text-decoration:none; padding:8px 0; font-weight:400;
 }
 .menu .navlink.active,
 .mobile-nav .navlink.active,
 .mobile-nav .m-item.active{
   color: var(--blue);
   font-weight: 500;
 }
:root{
  --nav-max: 1240px;                 /* базовый кап */
  --page-pad: clamp(16px, 4vw, 64px); /* боковые поля на широких экранах */
}

/* снимаем жёсткий max-width и задаём ширину как min(...) */
.audience-tabs,
.main-bar{
  max-width: none; /* <-- важно: иначе 1200px продолжит ограничивать */
  width: min(var(--nav-max), 100% - var(--page-pad)*2);
  margin-inline: auto;
}

/* увеличиваем кап на больших экранах */
@media (min-width: 1440px){ :root{ --nav-max: 1320px; } }
@media (min-width: 1680px){ :root{ --nav-max: 1400px; } }
@media (min-width: 1920px){ :root{ --nav-max: 1480px; } }
@media (min-width: 2560px){ :root{ --nav-max: 1680px; } }

/* (опционально) вместо брейкпоинтов можно одной строкой сделать флюидный кап:
:root{ --nav-max: clamp(1200px, 72vw, 1680px); }
*/

.account-menu {
  position: relative;
  display: inline-block;
}

.account-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.avatar-circle {
  width: 36px;
  height: 36px;
  background-color: #124265;
  color: white;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-dropdown {
  position: absolute;
  top: 48px;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 12px;
  min-width: 200px;
  display: none;
  z-index: 1000;
}

.account-dropdown a {
  display: block;
  padding: 6px 0;
  color: #124265;
  text-decoration: none;
}
.btn-outline:hover{ background: #f4f7ff; color: var(--blue); border-color: #3972FE; }
.account-dropdown a:hover {
  text-decoration: underline;
}
.btn-primary:hover{background:var(--primary-600); color: white;}


.account-info {
  margin-bottom: 8px;
  font-size: 14px;
}

.checks-info {
  font-size: 14px;
  color: #124265;
  background-color: #EDFAFF;
  padding: 10px;
  border-radius: 8px;
}
.checks-count {
  font-weight: 600;
  color: var(--blue);
  font-size: 16px;
}