/* =============================================================
   HEADER + MOBILE NAV
   ============================================================= */

header {
  position:        fixed;
  top: 0; left: 0; right: 0;
  z-index:         500;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px var(--page-px);
  backdrop-filter: blur(12px);
  background:      rgba(13, 13, 13, 0.7);
  border-bottom:   1px solid rgba(255, 255, 255, 0.05);
  transition:      padding 0.3s;
  height:          var(--header-h);
}

/* LOGO */
.logo {
  display:     flex;
  align-items: center;
  gap:         14px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo img {
  width:      44px;
  height:     44px;
  object-fit: contain;
}
.logo-text {
  font-family:    var(--font-display);
  font-size:      22px;
  letter-spacing: 0.08em;
  color:          var(--white);
}

/* DESKTOP NAV */
nav {
  display:     flex;
  align-items: center;
  gap:         40px;
}

nav a {
  font-family:    var(--font-body);
  font-size:      13px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition:     color 0.2s;
  position:       relative;
  cursor:         none;
}

nav a::after {
  content:          '';
  position:         absolute;
  bottom: -4px; left: 0; right: 0;
  height:           1px;
  background:       var(--accent);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform 0.25s ease;
}

nav a:hover        { color: var(--white); }
nav a:hover::after { transform: scaleX(1); }

nav a.active        { color: var(--white); }
nav a.active::after { transform: scaleX(1); }

/* CTA в хедере */
.nav-cta {
  font-size:      13px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--accent) !important;
  border:         1px solid var(--accent);
  padding:        10px 24px;
  transition:     background 0.2s, color 0.2s !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover  { background: var(--accent); color: var(--bg) !important; }

/* BURGER */
.burger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           36px;
  height:          36px;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         4px;
  z-index:         600;
  flex-shrink:     0;
}
.burger span {
  display:    block;
  width:      100%;
  height:     1px;
  background: var(--white);
  transition: transform 0.3s, opacity 0.3s, width 0.3s;
  transform-origin: center;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* MOBILE NAV */
.mobile-nav {
  position:   fixed;
  inset:      0;
  top:        var(--header-h);
  background: rgba(13, 13, 13, 0.97);
  backdrop-filter: blur(16px);
  z-index:    499;
  display:    flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:        40px;

  opacity:    0;
  pointer-events: none;
  transform:  translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-nav[aria-hidden="false"] {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
}

.mobile-nav a {
  font-family:    var(--font-display);
  font-size:      clamp(36px, 8vw, 52px);
  letter-spacing: 0.06em;
  color:          rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition:     color 0.2s;
  cursor:         pointer;
}
.mobile-nav a:hover,
.mobile-nav a.active { color: var(--white); }

.nav-cta-mobile {
  font-family:    var(--font-body) !important;
  font-size:      13px !important;
  font-weight:    700;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color:          var(--accent) !important;
  border:         1px solid var(--accent);
  padding:        14px 36px;
  margin-top:     8px;
  transition:     background 0.2s, color 0.2s !important;
}
.nav-cta-mobile:hover { background: var(--accent); color: var(--bg) !important; }


/* =============================================================
   АДАПТИВ
   ============================================================= */
@media (max-width: 1024px) {
  nav { gap: 28px; }
}

@media (max-width: 768px) {
  nav    { display: none; }
  .burger { display: flex; }

  .logo img   { width: 36px; height: 36px; }
  .logo-text  { font-size: 18px; }
}