/* ============================================================
   COMPONENT — Site header / navigation
   Sticky, translucent header with logo, nav links and CTAs.
   Collapses into a slide-down mobile menu under 720px.
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,245,241,0.86);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-light);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}

.brand{display:flex; align-items:center; gap:9px; font-family:var(--ff-display); font-weight:800; font-size:20px;}
.brand .mark{height:36px; width:auto; display:block;}
.brand-name{color:var(--ink);}
.brand-name span{color:var(--orange-600);}

.main-nav{display:flex; align-items:center; gap:32px;}
.main-nav a{font-size:14.5px; font-weight:600; color:var(--ink-soft); transition:color .15s ease;}
.main-nav a:hover{color:var(--ink);}

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

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--line-light);
  background:transparent; align-items:center; justify-content:center;
}
.nav-toggle svg{width:20px; height:20px;}

/* ---- responsive ---- */
@media (max-width:720px){
  .main-nav{
    position:fixed; inset:64px 16px auto 16px; background:var(--white); border:1px solid var(--line-light);
    border-radius:16px; flex-direction:column; align-items:flex-start; padding:18px 20px; gap:6px;
    box-shadow:var(--shadow-lg);
    transform-origin:top; transform:scaleY(0); opacity:0; pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
  }
  .main-nav.open{transform:scaleY(1); opacity:1; pointer-events:auto;}
  .main-nav a{padding:10px 4px; width:100%; border-bottom:1px solid var(--line-light);}
  .main-nav a:last-child{border-bottom:none;}
  .nav-toggle{display:flex;}
  .header-actions .btn-sm span{display:none;}
}