@layer components {
/* Header — Frosted Terminal Pill (гибрид Basel + Контейнер) — fixed, фон hero под header */
.tm-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  box-shadow:none;
  padding:10px var(--space-5) 0;
  pointer-events:none;
}
.tm-header__inner{
  pointer-events:auto;
  display:flex; align-items:center;
  gap:var(--space-4);
  max-width:var(--container-width);
  margin:0 auto;
  padding:8px 10px 8px 20px;
  background:hsla(0,0%,100%,.78);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(26,26,26,.08);
  border-radius:var(--radius-pill);
  box-shadow:0 4px 20px rgba(26,26,26,.08);
  transition:padding .18s ease-out, background .2s ease-out, box-shadow .2s ease-out;
}
@supports not (backdrop-filter:blur(12px)){
  .tm-header__inner{ background:var(--color-surface-alt); }
}
.admin-bar .tm-header{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .tm-header{ top:5px; } }

@media (max-width:1023px){
  .tm-header{ padding:4px 12px 0; }
  .tm-header__inner{ padding:6px 8px 6px 14px; gap:var(--space-3); overflow:hidden; }
  .tm-main{ padding-top:60px; }
  .tm-hero{ margin-top:-60px; }
}

.tm-logo{
  display:flex; align-items:center;
  max-width:168px; height:auto; flex-shrink:0;
  transition:max-width .18s ease-out;
}
/* header fixed — no scroll change */
.tm-logo img{ width:100%; height:auto; display:block; }

.tm-header__divider{
  width:1px; height:32px; background:var(--color-border);
  flex-shrink:0; align-self:center;
}

.tm-nav{ flex:1; display:flex; justify-content:center; min-width:0; }
.tm-nav__list{ display:flex; align-items:center; justify-content:center; gap:var(--space-4); flex-wrap:wrap; }
.tm-nav__list > li{ position:relative; }
.tm-nav__list > li.menu-item-has-children > a::after{
  content:''; display:inline-block; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); margin-left:4px; margin-top:-2px;
  transition:transform .22s ease-out; opacity:.7;
}
.tm-nav__list > li.menu-item-has-children:hover > a::after{ transform:rotate(-135deg); margin-top:2px; }
.tm-nav__list a{
  display:flex; align-items:center; gap:4px;
  font-size:16px; font-weight:600; color:var(--color-ink);
  padding:var(--space-2) var(--space-4);
  position:relative; z-index:0;
  border-radius:var(--radius-pill);
  transition:color .16s ease-out;
}
.tm-nav__list a::after{ content:none; }
.tm-nav__list a::before{
  content:''; position:absolute; inset:0; z-index:-1;
  border-radius:var(--radius-pill);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  opacity:0;
  transition:opacity .16s ease-out;
}
.tm-nav__list a:hover,
.tm-nav__list a:focus-visible{ color:var(--color-primary); }
.tm-nav__list a:hover::before,
.tm-nav__list a:focus-visible::before{ opacity:1; }
.tm-nav__list .current-menu-item > a,
.tm-nav__list .current-menu-parent > a{ color:var(--color-ink); font-weight:600; }
.tm-nav__list .current-menu-item > a::before,
.tm-nav__list .current-menu-parent > a::before{ opacity:1; }
.tm-nav__list .sub-menu{
  position:absolute; top:100%; left:0;
  background:var(--color-surface-alt);
  border:none;
  border-radius:var(--radius-sm);
  padding:var(--space-2);
  min-width:220px;
  box-shadow:0 2px 8px rgba(26,26,26,.06);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s ease-out, transform .24s ease-out, visibility .22s;
}
.tm-nav__list > li:hover .sub-menu,
.tm-nav__list > li:focus-within .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.tm-nav__list .sub-menu a{
  display:block; padding:var(--space-2) var(--space-3);
  font-size:var(--text-body); color:var(--color-ink-secondary);
  border-radius:var(--radius-sm);
}
.tm-nav__list .sub-menu a::before{ display:none; }
.tm-nav__list .sub-menu a:hover{ background:var(--color-surface); color:var(--color-primary); }

/* Terminal Block — right dark module */
.tm-header__contact-block{
  display:flex; align-items:center; gap:var(--space-4);
  background:var(--color-ink);
  border-radius:var(--radius-pill);
  padding:6px 6px 6px var(--space-4);
  flex-shrink:0;
  transition:padding .18s ease-out;
}
/* header fixed — no scroll change */
.tm-header__contact-block--mobile{ display:none; }
.tm-header__phones{
  display:flex; align-items:center; flex-shrink:0;
}
.tm-header__phones-numbers{ display:flex; flex-direction:column; gap:1px; }
.tm-header__phones-numbers a{
  font-weight:600; color:var(--color-surface-alt); white-space:nowrap; font-size:var(--text-body-sm);
  line-height:1.2; transition:color .16s ease-out, opacity .16s;
}
.tm-header__phones-numbers a:hover{ color:var(--color-brand-to); }
.tm-header__phone--secondary{ opacity:.72; font-weight:500; }
.tm-header__phone--secondary:hover{ opacity:1; }
.tm-header__cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 var(--space-4);
  background:var(--color-brand-to); color:var(--color-ink);
  border-radius:var(--radius-pill);
  font-size:var(--text-body-sm); font-weight:700;
  border:1px solid transparent;
  white-space:nowrap; flex-shrink:0;
  transition:background .16s ease-out, color .16s ease-out;
}
.tm-header__cta:hover{ background:var(--color-brand-from); color:var(--color-ink); }
.tm-header__cta:focus-visible{ outline:2px solid var(--color-surface-alt); outline-offset:2px; }
.tm-header__contact-block .tm-header__phones-numbers a:focus-visible{ outline:2px solid var(--color-surface-alt); outline-offset:2px; border-radius:2px; }

@media (max-width:1180px) and (min-width:1024px){
  .tm-header__inner{ gap:var(--space-4); }
.tm-nav__list{ gap:var(--space-3); }
  .tm-nav__list a{ font-size:15px; }
  .tm-logo{ max-width:148px; }
  .tm-header__contact-block{ gap:var(--space-3); padding-left:var(--space-3); }
  .tm-header__phones-numbers a{ font-size:13px; }
}
.tm-nav-toggle{ display:none; }
@media (min-width:1024px){
  .tm-mobile-menu{ display:none; }
}
@media (max-width:1023px){
  .tm-logo{ max-width:128px; }
  .tm-nav{ display:none; }
  .tm-header__divider{ display:none; }
  .tm-header__contact-block{ display:none; }
  .tm-header__contact-block--mobile{
    display:inline-flex; align-items:center; justify-content:center;
    height:40px; padding:0 var(--space-3);
    background:var(--color-ink); color:var(--color-surface-alt);
    border-radius:var(--radius-pill);
    font-size:var(--text-body-sm); font-weight:700;
    white-space:nowrap; flex-shrink:0;
    margin-left:auto;
    transition:background .16s;
  }
  .tm-header__contact-block--mobile:hover{ background:var(--color-primary-hover); color:var(--color-surface-alt); }
  .tm-header__contact-block--mobile:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }
.tm-nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; flex-shrink:0; border:1px solid var(--color-border);
    border-radius:var(--radius-pill);
    background:var(--color-surface-alt); color:var(--color-ink); margin-left:auto;
    padding:0;
    transition:background-color .16s ease-out, transform .16s ease-out, box-shadow .16s ease-out;
  }
  .tm-nav-toggle:active{
    transform:scale(.92);
    background:var(--color-surface);
    box-shadow:0 0 0 3px rgba(26,26,26,.12);
  }
  .tm-nav-toggle__icon{ display:block; width:20px; height:20px; }
  .tm-nav-toggle__icon line{ stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
  .tm-mobile-menu{
    position:fixed; top:0; left:0; bottom:0;
    width:100vw; max-width:320px; max-height:100vh;
    z-index:99;
    display:flex; align-items:stretch;
    visibility:hidden; pointer-events:none;
    transition:visibility .3s ease-out;
  }
  .tm-mobile-menu.is-open{
    visibility:visible; pointer-events:auto;
  }
  .tm-mobile-menu__backdrop{
    position:absolute; top:0; right:0; bottom:0;
    left:320px;
    opacity:0; visibility:hidden;
    transition:opacity .25s ease-out, visibility .25s;
  }
  .tm-mobile-menu.is-open .tm-mobile-menu__backdrop{
    opacity:1; visibility:visible;
  }

  .tm-mobile-menu__panel{
    position:relative; z-index:1;
    background:var(--color-surface-alt);
    padding:var(--space-5);
    overflow-y:auto; overflow-x:hidden;
    transform:translateX(-100%);
    transition:transform .3s ease-out;
    display:flex; flex-direction:column;
  }
  .tm-mobile-menu.is-open .tm-mobile-menu__panel{
    transform:translateX(0);
    box-shadow:0 4px 12px rgba(0,0,0,.08);
  }

  .tm-mobile-menu__list{
    display:flex; flex-direction:column; gap:var(--space-2);
    margin-bottom:var(--space-5);
  }
  .tm-mobile-menu__list > li > a{
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--space-2) var(--space-3); font-size:16px; font-weight:600; color:var(--color-ink);
    position:relative; z-index:0; border-radius:var(--radius-pill);
    transition:color .16s ease-out;
  }
  .tm-mobile-menu__list > li > a::before{
    content:''; position:absolute; inset:0; z-index:-1; border-radius:var(--radius-pill);
    background:var(--color-surface); border:1px solid var(--color-border);
    opacity:0; transition:opacity .16s ease-out;
  }
  .tm-mobile-menu__list > li > a:hover,
  .tm-mobile-menu__list > li > a:focus-visible{ color:var(--color-primary); }
  .tm-mobile-menu__list > li > a:hover::before,
  .tm-mobile-menu__list > li > a:focus-visible::before{ opacity:1; }
  .tm-mobile-menu__list .current-menu-item > a,
  .tm-mobile-menu__list .current-menu-parent > a{ color:var(--color-ink); font-weight:700; }
  .tm-mobile-menu__list .current-menu-item > a::before,
  .tm-mobile-menu__list .current-menu-parent > a::before{ opacity:1; }
  .tm-mobile-menu__list .sub-menu{
    max-height:0; opacity:0; overflow:hidden; padding-left:var(--space-4);
    transition:max-height .3s ease-out, opacity .25s ease-out;
  }
  .tm-mobile-menu__list .sub-menu.is-open{
    max-height:500px; opacity:1;
  }
  .tm-mobile-menu__list .sub-menu a{
    display:block; padding:var(--space-1) 0; font-size:15px; font-weight:500; color:var(--color-ink-secondary);
  }
  .tm-mobile-menu__list .sub-menu a:hover{ color:var(--color-primary); }
  .tm-mobile-menu__list .menu-item-has-children > a::after{
    content:''; display:inline-block; width:8px; height:8px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); transition:transform .25s ease-out;
  }
  .tm-mobile-menu__list .menu-item-has-children > a.is-open::after{ transform:rotate(-135deg); }

}
}