/* твой контейнер */
.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    
    padding-left: 24px;
    padding-right: 24px;
  }
  
  @media (max-width: 1024px) {
    .container { padding-left: 20px; padding-right: 20px; }
  }
  
  @media (max-width: 768px) {
    .container { padding-left: 16px; padding-right: 16px; }
  }
  
  /* NAV */
  .site-nav {
    position: fixed;
    overflow: visible;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 60; /* Выше мобильного меню, чтобы кнопка toggle оставалась видимой */
    padding-right: var(--scrollbar-compensation, 0px);
  
    background: transparent; /* Убираем фон, он будет в псевдоэлементе */
  }
  
  /* Фон контейнера - ограничен по ширине как линии с затуханием по краям */
  .site-nav::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc((100% - 1320px) / 2 - 30px);
    right: calc((100% - 1320px) / 2 - 30px);
    top: -20px; /* Расширяем вверх, чтобы заблюрить промежуток до края экрана */
    bottom: 0;
  
    /* Прозрачная верхняя часть (только blur), полупрозрачный фон для панели */
    background: linear-gradient(to bottom, transparent 0, transparent 20px, rgba(250, 248, 244, 0.8) 20px, rgba(250, 248, 244, 0.8) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    
    /* Затухание по краям через mask */
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 5%,
        rgba(0, 0, 0, 1) 15%,
        rgba(0, 0, 0, 1) 85%,
        rgba(0, 0, 0, 0.3) 95%,
        transparent 100%
      );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 5%,
        rgba(0, 0, 0, 1) 15%,
        rgba(0, 0, 0, 1) 85%,
        rgba(0, 0, 0, 0.3) 95%,
        transparent 100%
      );
  }
  
  /* Толстая золотая полоса сверху с затуханием по краям */
  .nav-top-line {
    position: absolute;
    z-index: 1;
    left: calc((100% - 1320px) / 2 - 30px);
    right: calc((100% - 1320px) / 2 - 30px);
    top: 0;
    height: 2px;
    background: linear-gradient(
        to bottom,
        var(--gold-main, #C9A45C) 0%,
        rgba(201, 164, 92, 0.75) 100%
      );
    
    /* Затухание по горизонтали */
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 8%,
        rgba(0, 0, 0, 1) 15%,
        rgba(0, 0, 0, 1) 85%,
        rgba(0, 0, 0, 0.3) 92%,
        transparent 100%
      );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 8%,
        rgba(0, 0, 0, 1) 15%,
        rgba(0, 0, 0, 1) 85%,
        rgba(0, 0, 0, 0.3) 92%,
        transparent 100%
      );
  }
  
  /* Тонкая полупрозрачная линия снизу с затуханием по краям */
  .site-nav::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: calc((100% - 1320px) / 2 - 30px);
    right: calc((100% - 1320px) / 2 - 30px);
    bottom: 0;
  
    height: 1px;
    background: var(--gold-main, #C9A45C);
    opacity: 0.55;            /* "полупрозрачная" */
    
    /* Затухание по горизонтали */
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 8%,
        rgba(0, 0, 0, 1) 15%,
        rgba(0, 0, 0, 1) 85%,
        rgba(0, 0, 0, 0.3) 92%,
        transparent 100%
      );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 8%,
        rgba(0, 0, 0, 1) 15%,
        rgba(0, 0, 0, 1) 85%,
        rgba(0, 0, 0, 0.3) 92%,
        transparent 100%
      );
  }
  
  .nav-row {
    position: relative;
    padding: 12px 24px 12px 24px; /* Добавлен отступ сверху и небольшой снизу */
    z-index: 2;
    height: 72px;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    min-width: 0;
    align-items: center;
    gap: 72px;
  }
  
  /* brand */
  .nav-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    user-select: none;
    flex-shrink: 0;
    min-width: 170px;
    transform: translateY(-15%); /* Приподнимаем логотип на 15% */
  }
  
  .nav-brand img {
    width: 170px; /* подгони по факту логотипа */
    height: auto;
    display: block;
    flex-shrink: 0;
    min-width: 170px;
  }
  
  /* center links */
  .nav-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 72px;
  }
  
.nav-link {
    color: var(--text-main) !important;
    text-decoration: none;
    font-weight: 200;
    font-size: 24px;
    line-height: 1;

    padding: 6px 0;
    position: relative;
    user-select: none;
    display: inline-block;
    pointer-events: auto;
    transition: color 180ms ease;
  }
  
  /* тонкий "дорогой" hover, без зелёного */
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 1px;
    background: var(--gold-light, #E6D3A3);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
  }
  
.nav-link:hover { 
    color: var(--gold-main, #C9A45C) !important; 
}
.nav-link:hover::after { 
    transform: scaleX(1); 
}

/* Активная страница: тот же эффект, что и на hover */
.nav-link.is-active {
    color: var(--gold-main, #C9A45C) !important;
}
.nav-link.is-active::after {
    transform: scaleX(1);
}
  
  /* right zone */
  .nav-right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }
  
  /* CTA button like in visualization (outlined, calm) */
  .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    height: 36px;
    padding: 20px 24px;
  
    border: 1px solid rgba(201, 164, 92, 0.55);
    border-radius: 5px;
  
    background: transparent;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 200;
    font-size: 24px;
  
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
  }
  
  .nav-cta:hover {
    border-color: rgba(201, 164, 92, 0.95);
    color: var(--gold-dark);
    background: rgba(230, 211, 163, 0.18);
  }

  .nav-cta.is-active {
    border-color: rgba(201, 164, 92, 0.95);
    color: var(--gold-dark);
    background: rgba(230, 211, 163, 0.18);
  }
  
  /* burger (hidden on desktop) */
  .nav-burger {
    display: none;
    position: relative;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--text-main);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 44px;
  }
  
  .nav-burger i {
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  
  .nav-burger .icon-close {
    opacity: 0;
    transform: rotate(-90deg);
    pointer-events: none;
  }
  
  .nav-burger.is-open .icon-burger {
    opacity: 0;
    transform: rotate(90deg);
    pointer-events: none;
  }
  
  .nav-burger.is-open .icon-close {
    opacity: 1;
    transform: rotate(0);
    pointer-events: auto;
  }
  
  .nav-burger:hover { color: var(--gold-main); }
  
  /* Responsive */
  @media (max-width: 900px) {
    .nav-row { 
      height: 72px;
      padding: 12px 16px 4px 16px; /* Сохраняем отступ сверху и снизу на мобильных */
      grid-template-columns: max-content 1fr; /* Только две колонки: логотип и бургер */
      gap: 0; /* Убираем gap, чтобы бургер был по правому краю */
    }
  
    .nav-brand img { width: 150px; min-width: 150px; }
    .nav-brand { min-width: 150px; }
  
    /* center links hidden, burger shown */
    .nav-center { display: none; }
    .nav-cta { display: none; }
    .nav-burger { 
      display: inline-flex;
      align-items: center;
      justify-self: end; /* Выравниваем бургер по правому краю колонки */
    }
    
    /* nav-right занимает всю оставшуюся ширину и выравнивает содержимое по правому краю */
    .nav-right {
      justify-content: flex-end;
    }
  }

  /* Мобильное меню — плавное открытие и закрытие */
  .mobile-menu {
    background-color: rgba(250,246,239, 0.8);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  }

  .mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Hover с gold-line-sides для пунктов мобильного меню */
  .mobile-menu a {
    position: relative;
    padding-left: 56px;
    padding-right: 56px;
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .mobile-menu a:hover {
    color: var(--gold-main, #C9A45C);
  }

  .mobile-menu a.is-active {
    color: var(--gold-main, #C9A45C);
  }

  .mobile-menu a::before,
  .mobile-menu a::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 1px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 1;
  }

  .mobile-menu a::before {
    left: 0;
    background: linear-gradient(
      to left,
      var(--gold-main, #C9A45C) 0%,
      rgba(201, 164, 92, 0.7) 30%,
      rgba(201, 164, 92, 0.3) 70%,
      rgba(201, 164, 92, 0) 100%
    );
  }

  .mobile-menu a::after {
    right: 0;
    background: linear-gradient(
      to right,
      var(--gold-main, #C9A45C) 0%,
      rgba(201, 164, 92, 0.7) 30%,
      rgba(201, 164, 92, 0.3) 70%,
      rgba(201, 164, 92, 0) 100%
    );
  }

  .mobile-menu a:hover::before,
  .mobile-menu a:hover::after,
  .mobile-menu a.is-active::before,
  .mobile-menu a.is-active::after {
    opacity: 1;
  }