.site_header {
  position: relative;
  z-index: 50;
  background: #091426;

  @media (max-width: 1050px) {
    position: sticky;
    top: 0;
  }

  .wrap {
    margin: 0 auto;
    padding: 0 40px;
    max-width: 1600px;
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 36px;

    @media (max-width: 1200px) { padding: 0 28px; gap: 25px; }
    @media (max-width: 1050px) { min-height: 70px; }
    @media (max-width: 600px) { padding: 0 18px; min-height: 64px; gap: 8px; }
  }

  .brand {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    white-space: nowrap;
    font-family: var(--font-en);
    font-size: 17px;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: .3em;

    @media (max-width: 1200px) { font-size: 14px; letter-spacing: .2em; }
    @media (max-width: 600px) { gap: 8px; font-size: 12px; letter-spacing: .1em; }
  }

  .mark {
    width: 27px;
    display: grid;
    gap: 4px;
    transform: skewX(-35deg);

    i {
      width: 25px;
      height: 8px;
      background: linear-gradient(100deg, #38c5ee, #5474ff);

      &:last-child { margin-left: 7px; background: linear-gradient(100deg, #6377ff, #a15aff); }
    }

    @media (max-width: 600px) {
      width: 20px;
      gap: 3px;
      i { width: 18px; height: 6px; &:last-child { margin-left: 5px; } }
    }
  }

  .nav {
    display: flex;
    align-items: center;
    gap: 27px;

    a {
      white-space: nowrap;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4em;
      letter-spacing: .04em;
      transition: color .2s;
      &:hover, &:focus-visible { color: #8dc7ff; }
    }

    @media (max-width: 1200px) { gap: 17px; a { font-size: 12px; } }
    @media (max-width: 1050px) { display: none; }
  }

  .portal {
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    border-bottom: 1px solid #679bd080;
    color: #b4daff;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4em;
    transition: color .2s, border-color .2s;

    span { font-size: 15px; font-weight: 400; }
    &:hover, &:focus-visible { border-color: #a5d6ff; color: #fff; }
    @media (max-width: 600px) { display: none; }
  }

  .contact {
    padding: 12px 21px;
    min-width: 140px;
    border-radius: 50px;
    font-size: 13px;

    @media (max-width: 1050px) { margin-left: auto; }
    @media (max-width: 600px) { display: none; }
  }

  .toggle {
    display: none;

    @media (max-width: 1050px) {
      padding: 0;
      width: 48px;
      height: 48px;
      display: grid;
      align-content: center;
      justify-content: center;
      gap: 5px;
      border: 0;
      color: #fff;
      background: transparent;
      cursor: pointer;

      span {
        width: 24px;
        height: 2px;
        display: block;
        border-radius: 2px;
        background: currentColor;
        transition: opacity .25s ease, transform .32s cubic-bezier(.22, .61, .36, 1);
      }

      &[aria-expanded="true"] {
        span:first-child { transform: translateY(7px) rotate(45deg); }
        span:nth-child(2) { opacity: 0; }
        span:last-child { transform: translateY(-7px) rotate(-45deg); }
      }

      &:focus-visible { outline: 2px solid #8dc7ff; outline-offset: 2px; }
    }

    @media (prefers-reduced-motion: reduce) {
      span { transition: none; }
    }
  }

}