/* "Contact us" in the site navigation: a small panel with email and phone. Shared by all pages. */
.contact { position: relative; }
.contact__btn { all: unset; cursor: pointer; color: #9aaac3; font: 500 14px/1 Inter, system-ui, sans-serif; transition: color .2s; }
.contact__btn:hover, .contact__btn[aria-expanded="true"] { color: #eef6ff; }
.contact__btn:focus-visible { outline: 2px solid #b9efff; outline-offset: 6px; border-radius: 4px; }
.contact__panel { position: absolute; right: 0; top: calc(100% + 16px); z-index: 60; width: 270px; padding: 8px; border-radius: 14px; border: 1px solid rgba(156, 206, 244, .18); background: rgba(7, 18, 33, .94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s, transform .2s; }
.contact__panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.contact__panel a { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 4px 10px; padding: 10px; border-radius: 10px; color: #eef6ff; text-decoration: none; transition: background .2s; }
.contact__panel a:hover, .contact__panel a:focus-visible { background: rgba(101, 200, 241, .1); outline: none; }
.contact__panel svg { grid-row: span 2; width: 32px; height: 32px; padding: 7px; border-radius: 8px; background: rgba(101, 200, 241, .12); color: #65c8f1; }
.contact__panel small { color: #9aaac3; font-size: 12px; }
.contact__panel strong { font: 600 14px Inter, system-ui, sans-serif; }
@media (max-width: 980px) {
  .nav .contact .signin, .contact .f5signin { display: inline-block; }
  .contact__btn .long { display: none; }
  .contact__panel { position: fixed; left: 16px; right: 16px; top: 78px; width: auto; }
}