/* ==============================
   ZOO SITE — GLOBAL HEADER
   ============================== */

:root{
  --bg:#0b0b0b;
  --bg-soft:#111;
  --ink:#eaeaea;
  --ink-dim:#bdbdbd;
  --accent:#f9b300;
  --accent-dark:#c78f00;
  --stroke:rgba(255,255,255,.08);
  --shadow:0 12px 30px rgba(0,0,0,.35);
}

/* safety reset */
*{ box-sizing:border-box }

/* ===== HEADER SHELL ===== */
header.site-top{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(8px);
  background:rgba(11,11,11,.75);
  border-bottom:1px solid var(--stroke);
}

/* inner row */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:.8rem 0;
}

/* width control */
.container{
  width:min(1200px, 92vw);
  margin-inline:auto;
}

/* ===== BRAND ===== */
.brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex:0 0 auto;
}
.brand img{
  height:48px;
  width:auto;
  display:block;
}

/* ===== NAV ===== */
nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex:1 1 auto;
  white-space:nowrap;
}
nav a{
  font-weight:600;
  color:var(--ink-dim);
  text-decoration:none;
}
nav a:hover{ color:var(--ink) }
nav a.active{ color:var(--accent) }

/* ===== CTA BUTTONS ===== */
.cta-row{
  display:flex;
  gap:.6rem;
  flex:0 0 auto;
  white-space:nowrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.6rem 1.05rem;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.3px;
  background:var(--accent);
  color:#111;
  border:none;
  cursor:pointer;
  box-shadow:var(--shadow);
  text-decoration:none;
}
.btn:hover{
  background:var(--accent-dark);
}

.btn--ghost{
  background:transparent;
  color:var(--accent);
  border:2px solid var(--accent);
  box-shadow:none;
}
.btn--ghost:hover{
  background:rgba(249,179,0,.1);
}

/* ===== MOBILE ===== */
@media (max-width: 900px){
  nav{ display:none; }
}