.hx__menu-msg img{width:18px;height:18px;border-radius:4px}
.hx .cp::after{bottom:auto;top:calc(100% + 10px);translate:-50% -4px}
/* тексты и логотип на наклейках «Видов» (SVG) */
.hx{position:fixed;z-index:60;left:0;right:0;top:0;pointer-events:none;transform:translateY(calc(-100% - 24px));transition:transform .45s cubic-bezier(.2,1,.3,1)}
.hx.is-on{transform:none}
/* поясок — рамкой, а не тенью-кольцом: у кольца между фоном и тенью на скруглении оставалась щель в долю пикселя, над тёмными блоками она просвечивала тёмной линией. Рамка рисуется вместе с фоном — щели нет */
.hx__in{pointer-events:auto;display:flex;align-items:center;gap:11px;box-sizing:border-box;width:min(700px,calc(100% - 14px));height:60px;margin:8px auto 0;padding:0 7px 0 16px;
    border:4px solid #fbfbfa;border-radius:99px;background:linear-gradient(128deg,#fff 0%,#f6f6f5 35%,#fff 52%,#f8f8f7 100%) padding-box,#fbfbfa border-box;
    box-shadow:0 0 0 1px rgba(20,18,18,.1),0 22px 40px -22px rgba(20,18,18,.5)}
.hx__logo{display:flex;flex:none;padding:6px 0}
.hx__lg{display:block;height:19px;width:auto}
.hx__act{display:flex;align-items:center;gap:4px;margin-left:auto}
.hx__ic,.hx__tel{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;border-radius:99px;color:var(--ink);text-decoration:none;transition:background .2s}
.hx__ic{width:36px}
.hx__tel{padding:0 11px;font-size:13px;font-weight:600;white-space:nowrap}
.hx__ic img{width:20px;height:20px;border-radius:5px}
.hx__tel svg{width:16px;height:16px;fill:currentColor}
.hx__ic:hover,.hx__tel:hover{background:var(--panel)}
.hx__ic:focus-visible,.hx__tel:focus-visible,.hx__sec:focus-visible,.hx__logo:focus-visible{outline:3px solid var(--y);outline-offset:2px}
.hx__cta{margin-left:4px}
.hx .hx__cta.btn--go{height:38px;padding:0 4px 0 16px;gap:12px;font-size:13px}
.hx .hx__cta.btn--go::after{width:30px;height:30px;background-size:14px}
.hx__cta-s{display:none}
.hx__nav{position:relative}
.hx__sec{all:unset;display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 11px 0 13px;border-radius:99px;cursor:pointer;
    font-family:var(--font-head);font-weight:800;font-size:16px;text-transform:uppercase;line-height:1;color:var(--ink);background:var(--panel);transition:background .2s}
.hx__sec:hover,.hx__sec[aria-expanded=true]{background:#e6e2da}
.hx__sec svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.hx__sec[aria-expanded=true] svg{transform:rotate(180deg)}
.hx__menu{position:absolute;left:-10px;top:calc(100% + 11px);min-width:210px;margin:0;padding:3px;list-style:none;border:4px solid #fbfbfa;border-radius:24px;background:#fff;
    box-shadow:0 0 0 1px rgba(20,18,18,.1),0 24px 44px -20px rgba(20,18,18,.45);animation:hxMenu .25s cubic-bezier(.2,1,.3,1)}
.hx__menu a{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.hx__menu a:hover,.hx__menu a:focus-visible{background:var(--panel);outline:none}
.hx__menu a[aria-current]{font-weight:700}
.hx__menu a[aria-current]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--y);margin-left:-4px}
.hx__menu-msg{display:none;gap:6px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.hx__menu-msg a{flex:1;justify-content:center;background:var(--panel);font-weight:600}
.hx__menu-tel{display:none!important}
.hx__menu-tel svg{width:16px;height:16px;fill:currentColor}
@media(max-width:860px){
  /* якоря не уезжают под шапку */
  .hx__tel span{display:none}
  .hx__tel{width:36px;padding:0}
}
@media(max-width:560px){
  .hx__in{width:calc(100% - 10px);height:54px;margin-top:5px;padding:0 5px 0 10px;gap:6px}
  .hx__lg{height:16px}
  .hx__act{gap:2px}
  .hx__ic,.hx__tel{width:34px;height:34px}
  .hx__msg{display:none}
  .hx__menu-msg{display:flex}
  /* мессенджеры — в меню: в пилюле на телефоне тесно */
  .hx__cta-l{display:none}
  .hx__cta-s{display:inline}
  .hx .hx__cta.btn--go{height:36px;margin-left:3px;padding:0 14px;font-size:13px}
  .hx .hx__cta.btn--go::after{display:none}
  /* без круга со стрелкой — иначе не влезает */
  .hx__sec{height:34px;padding:0 9px 0 10px;font-size:15px}
  .hx__menu{position:fixed;left:5px;right:5px;top:66px;min-width:0;max-height:calc(100dvh - 90px);overflow:auto}
}
@media(max-width:374px){
  /* 320–374: телефон из пилюли уходит в меню, иначе «Рассчитать» не влезает */
  .hx__tel{display:none}
  .hx__menu-tel{display:flex!important}
  .hx__menu-msg{flex-wrap:wrap}
  .hx__menu-msg a{flex:1 1 40%}
  .hx__menu-tel{flex-basis:100%!important}
  .hx__sec{font-size:14px;padding:0 7px 0 9px}
}
@media(prefers-reduced-motion:reduce){
  .hx{transition:none}
  .hx__menu{animation:none}
}
@keyframes hxMenu{from{opacity:0;transform:translateY(-6px)}}