/* =========================================================
LAYOUT
========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:999;
  backdrop-filter:blur(20px);
  background:
    linear-gradient(180deg, rgba(10, 4, 6, 0.94), rgba(24, 7, 10, 0.82)),
    rgba(45,5,10,.76);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 10px 30px rgba(10, 0, 0, 0.24);
}

.site-header-inner{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.site-brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.site-brand-logo{
  width:96px;
  height:auto;
}

.site-brand-copy{
  display:grid;
  gap:2px;
}

.site-brand-copy strong{
  color:#fff7fb;
  font-size:22px;
  font-weight:850;
  letter-spacing:-.03em;
}

.site-brand-copy small{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.main-menu{
  display:flex;
  gap:10px;
  align-items:center;
  flex:1 1 auto;
  justify-content:center;
}

.main-menu a{
  min-height:44px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:var(--muted);
  font-size:14px;
  font-weight:800;
  transition:.2s ease;
}

.main-menu a.active,
.main-menu a:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}

.site-header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.site-header-cta{
  min-height:46px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  color:#fff;
  font-size:14px;
  font-weight:900;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 16px 34px rgba(255, 63, 87, 0.22);
}

@media(max-width:1024px){
  .site-header-inner{
    min-height:78px;
    gap:16px;
  }

  .main-menu{
    gap:8px;
  }

  .main-menu a{
    padding:0 13px;
    font-size:13px;
  }
}

@media(max-width:820px){
  .site-header-inner{
    min-height:74px;
  }

  .main-menu{
    display:none;
  }

  .site-brand-logo{
    width:88px;
  }
}

@media(max-width:560px){
  .site-header-inner{
    min-height:70px;
    gap:12px;
  }

  .site-brand-copy small{
    display:none;
  }

  .site-header-cta{
    min-height:42px;
    padding:0 14px;
    border-radius:14px;
    font-size:13px;
  }
}