.site-header {
  position: relative; z-index: 20; display: grid;
  grid-template-columns: minmax(220px, .8fr) auto 52px; align-items: center;
  gap: 48px; min-height: 112px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand { display: inline-flex; width: min(310px, 100%); }
.brand img { width: 100%; height: auto; }
.desktop-nav { display: flex; justify-content: flex-end; gap: clamp(26px, 3.5vw, 58px); font-size: 16px; font-weight: 600; }
.desktop-nav a { position: relative; padding: 12px 0; color: rgba(255,255,255,.82); }
.desktop-nav a::after {
  position: absolute; right: 0; bottom: 3px; left: 0; height: 2px; content: "";
  background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); }
.header-play {
  display: grid; width: 48px; height: 48px; place-items: center;
  border: 1.5px solid var(--cyan); border-radius: 50%; color: var(--cyan);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.header-play:hover, .header-play:focus-visible { background: var(--cyan); color: var(--navy); transform: scale(1.04); }
.mobile-menu { display: none; }

@media (max-width: 1180px) {
  .site-header { gap: 28px; }
  .desktop-nav { gap: 24px; font-size: 14px; }
}

@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr 48px 46px; min-height: 94px; }
  .brand { width: 260px; }
  .desktop-nav { display: none; }
  .mobile-menu { position: relative; display: block; }
  .mobile-menu summary { display: flex; width: 46px; height: 46px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; cursor: pointer; list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary span { width: 18px; height: 1.5px; background: var(--white); }
  .mobile-menu nav { position: absolute; top: 56px; right: 0; display: flex; width: 230px; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid rgba(var(--cyan-rgb),.28); border-radius: 18px; background: rgba(var(--navy-deep-rgb),.97); box-shadow: 0 24px 50px rgba(0,0,0,.34); }
  .mobile-menu nav a { padding: 11px; border-radius: 8px; color: rgba(255,255,255,.78); font-size: 14px; font-weight: 700; }
}

@media (max-width: 640px) {
  .site-header { grid-template-columns: 1fr 42px 42px; gap: 10px; min-height: 82px; }
  .brand { width: min(210px,100%); }
  .header-play, .mobile-menu summary { width: 42px; height: 42px; }
}