.header {

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding: calc(16px + var(--safe-top)) 0 16px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 300ms var(--ease-out),
    border-color 300ms var(--ease-out),
    backdrop-filter 300ms var(--ease-out),
    -webkit-backdrop-filter 300ms var(--ease-out),
    transform 250ms ease-out;

}

.header--scrolled {

  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);

}

.header--hidden {

  transform: translateY(-100%);
  transition:
    background 300ms var(--ease-out),
    border-color 300ms var(--ease-out),
    backdrop-filter 300ms var(--ease-out),
    -webkit-backdrop-filter 300ms var(--ease-out),
    transform 220ms ease-in;

}

.header__inner {

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

}

/* ── ЛОГОТИП ──────────────────────────── */
.header__logo {

  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;

}

.header__logo-mark {

  flex-shrink: 0;
  height: 36px;
  width: 47px;
  object-fit: contain;
  transition: transform var(--transition-spring);

}

.header [data-lucide],
.header__phone i,
.header__cta i,
.header__burger-lines {
  display: inline-flex;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

.header__logo:hover .header__logo-mark {

  transform: scale(1.03);

}

.header__logo-wordmark {

  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;

}

.header__logo-wordmark-primary {

  font-weight: 500;
  color: color-mix(in srgb, var(--color-dark) 72%, transparent);

}

.header__logo-wordmark-accent {

  margin-inline-start: 0.15em;
  font-weight: 700;
  color: var(--color-gold);
  text-shadow: 0 0 20px color-mix(in srgb, var(--color-gold) 25%, transparent);

}

/* ── НАВИГАЦИЯ — пилюля ───────────────── */
.header__nav {

  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(28, 25, 23, 0.05);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 5px;

}

.header__nav-link {
padding: 7px 16px;
  border-radius: var(--radius-full);
  
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.header__nav-link:hover {

  color: var(--color-text);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-xs);

}

.header__nav-link.active {

  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);

}

/* ── ПРАВАЯ ЧАСТЬ ─────────────────────── */
.header__actions {

  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;

}

.header__phone {
display: flex;
  align-items: center;
  gap: 6px;
  
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.header__phone:hover {

  color: var(--color-text);

}

.header__phone-text {

  white-space: nowrap;

}

.header__cta-group {

  display: flex;
  align-items: center;
  gap: 8px;

}

.header__cta {
padding: 10px 20px;
}

.header__cta-secondary {
padding: 10px 16px;
  
  white-space: nowrap;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* Короткая подпись CTA — только планшет широкий (responsive.css) */
.header__cta-label--short {
  display: none;
}

.header__cta[hidden],
.header__cta-secondary[hidden] {

  display: none;

}

/* Компактная CTA + бургер — телефон и планшет узкий (responsive.css) */
.header__mobile-bar {

  display: none;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;

}

.header__mobile-cta {

  display: none;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 36px;
  padding: 8px 14px;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;

}

/* ── БУРГЕР ───────────────────────────── */
.header__burger {

  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);

}

.header__burger:hover {

  background: var(--color-surface-muted);

}

.header__burger-lines {

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;

}

.header__burger-line {

  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-dark);
  border-radius: 1px;
  transform-origin: center;
  transition:
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 250ms cubic-bezier(0.16, 1, 0.3, 1);

}

.header__burger.active .header__burger-line:nth-child(1) {

  transform: translateY(7px) rotate(45deg);

}

.header__burger.active .header__burger-line:nth-child(2) {

  opacity: 0;
  transform: scaleX(0);

}

.header__burger.active .header__burger-line:nth-child(3) {

  transform: translateY(-7px) rotate(-45deg);

}

@media (prefers-reduced-motion: reduce) {

  .header__burger-line {

    transition: none;

  }

}

/* ── OVERLAY МОБИЛЬНОГО МЕНЮ ──────────── */
.mobile-menu-overlay {

  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-overlay);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);

}

.mobile-menu-overlay.is-open {

  opacity: 1;
  pointer-events: auto;

}

/* ── BOTTOM DRAWER ─────────────────────── */
.mobile-menu {

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-mobile-menu);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-light);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: flex;
  flex-direction: column;
  padding: 24px 24px calc(24px + var(--safe-bottom));
  transform: translateY(100%);
  transition: transform 320ms var(--ease-out);

}

.mobile-menu.is-open {

  transform: translateY(0);

}

.mobile-menu.is-dragging {

  transition: none;
  touch-action: none;

}

.mobile-menu__handle {

  flex-shrink: 0;
  width: 36px;
  height: 4px;
  margin: 0 auto 20px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  cursor: grab;

}

.mobile-menu__inner {

  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;

}

.mobile-menu__nav {

  display: flex;
  flex-direction: column;
  gap: 4px;

}

.mobile-menu__link {

  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.03em;
  color: var(--color-text);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-fast);
  line-height: 1.05;

}

.mobile-menu__link::before {

  content: attr(data-num);
  font-weight: 600;
  font-style: normal;
  color: var(--color-text-subtle);
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  margin-bottom: 2px;

}

.mobile-menu__link:hover {

  color: var(--color-text);
  padding-left: 8px;

}

.mobile-menu__link.active {

  color: var(--color-text);

}

.mobile-menu__divider {

  border: none;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin: 8px 0 16px;

}

.mobile-menu__contacts {

  display: flex;
  flex-direction: column;
  gap: 12px;

}

.mobile-menu__contact {

  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  padding: 12px 0;
  transition: background 120ms var(--ease-out);

}

.mobile-menu__contact:active {

  background: rgba(0, 0, 0, 0.04);

}

.mobile-menu__contact i {

  flex-shrink: 0;
  color: var(--color-text-muted);

}

/* ── Focus states ─────────────────────── */
.header__logo:focus-visible,
.header__nav-link:focus-visible,
.header__phone:focus-visible,
.header__mobile-cta:focus-visible,
.header__cta:focus-visible,
.header__cta-secondary:focus-visible,
.header__burger:focus-visible,
.mobile-menu__link:focus-visible,
.mobile-menu__contact:focus-visible,
.mobile-menu .btn:focus-visible {

  outline: none;
  box-shadow: 0 0 0 2px var(--color-gold);
  border-radius: 4px;

}

/* ── Reduced motion ───────────────────── */
@media (prefers-reduced-motion: reduce) {

  .header,
  .header__logo-mark,
  .header__nav-link,
  .header__burger,
  .mobile-menu-overlay,
  .mobile-menu,
  .mobile-menu__link,
  .mobile-menu__contact {
    transition: none;
  }

}



/* Tablet + desktop typography */
@media (min-width: 768px) and (max-width: 1199px) {
  .header__nav-link { font-size: 13px; }
  .header__phone { font-size: 13px; }
  .header__cta { font-size: 12px; }
  .header__cta-secondary { font-size: 12px; }
  .mobile-menu__link { font-size: 40px; }
  .mobile-menu__link::before { font-size: 12px; }
}

@media (min-width: 1200px) {
  .header__nav-link { font-size: 13px; }
  .header__phone { font-size: 13px; }
  .header__cta { font-size: 12px; }
  .header__cta-secondary { font-size: 12px; }
  .mobile-menu__link { font-size: 40px; }
  .mobile-menu__link::before { font-size: 12px; }
}