/* Material copied from the supplied liquid-glass.snippet.html. */
@layer components {
  /* ── 1. СТЕКЛО ─────────────────────────────────────────────── */
  .nav.liquid-glass::before {
    --lg-bg: rgba(255, 255, 255, 0.42);
    --lg-radius: 999px;
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    pointer-events: none;
    background: var(--lg-bg);
    border: 1px solid rgba(21, 20, 15, 0.08);
    border-radius: var(--lg-radius);
    /* fallback для браузеров без url() в backdrop-filter: */
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    /* настоящий liquid glass: преломление фона + блюр + сочность: */
    backdrop-filter: var(--lg-filter, url(#lg-filter) blur(7px) saturate(1.4));
    opacity: 0;
    transform: translateY(-5px);
    transition:
      opacity 360ms var(--ease),
      transform 450ms var(--ease);
    box-shadow:
      inset 0 0 2px 1px rgba(255, 255, 255, 0.55),
      inset 0 0 10px 4px rgba(255, 255, 255, 0.22),
      0 6px 24px rgba(17, 17, 26, 0.06),
      0 12px 40px rgba(17, 17, 26, 0.05);
  }
  /* Тёмный вариант: */
  .nav.liquid-glass--dark::before {
    --lg-bg: rgba(20, 18, 20, 0.45);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 0 12px 4px rgba(255, 255, 255, 0.05),
      0 12px 40px rgba(0, 0, 0, 0.35);
  }

  .nav.liquid-glass {
    position: fixed;
    isolation: isolate;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav.liquid-glass.is-scrolled::before {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shared navigation geometry; the original glass material above is unchanged. */
@layer components {
  .nav .menu-toggle {
    order: initial;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  .nav > .button {
    gap: 12px;
  }
  .nav .cta-label {
    display: inline;
  }
  .nav .brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav nav a {
    min-height: 44px;
    text-underline-offset: 5px;
  }
  .nav nav a:hover {
    text-decoration: underline;
  }
  .nav nav a[aria-current="page"] {
    text-decoration: underline;
  }
}
@layer responsive {
  @media (min-width: 761px) {
    .nav > nav:not(#mobile-menu) {
      display: flex;
    }
    .nav .menu-toggle {
      display: none;
    }
    .nav > .button {
      margin-left: 0;
    }
  }
  @media (max-width: 760px) {
    .nav.liquid-glass::before {
      -webkit-backdrop-filter: blur(16px) saturate(1.2);
      backdrop-filter: blur(16px) saturate(1.2);
    }
    .nav {
      width: calc(100% - 24px);
      top: 12px;
      padding: 6px 8px 6px 14px;
      gap: 8px;
    }
    .nav .brand {
      font-size: 16px;
    }
    .nav > nav:not(#mobile-menu) {
      display: none;
    }
    .nav .menu-toggle {
      display: block;
    }
    .nav > .button {
      margin-left: auto;
      font-size: 12px;
      min-height: 44px;
      padding: 10px;
      white-space: nowrap;
    }
    .nav > .button .cta-label {
      display: inline;
    }
    .nav > .button .cta-free,
    .nav > .button > span[aria-hidden] {
      display: none;
    }
  }
  @media (max-width: 350px) {
    .nav {
      padding-left: 10px;
      gap: 4px;
    }
    .nav .brand {
      font-size: 15px;
    }
  }
}