/* Shared public-site header — used by index.html, docs.html, and any other public
   marketing/info page via js/header.js. Deliberately self-contained (no CSS custom
   properties, no dependency on Tailwind or any page's own :root vars) so it renders
   identically no matter what styling system the rest of that page uses. */

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(8,9,14,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid #1e2038;
  font-family:'Inter',system-ui,sans-serif;
}
.site-header *{box-sizing:border-box}
.site-header-bar{max-width:1180px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:14px}

.site-header-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;text-decoration:none;color:#e2e8f0;flex-shrink:0;min-width:0}
.site-header-logo-icon{width:32px;height:32px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(99,102,241,.35);flex-shrink:0}
.site-header-logo-text{white-space:nowrap}

.site-header-links{display:flex;align-items:center;gap:22px}
.site-header-links a{font-size:13.5px;font-weight:500;color:#8892a4;text-decoration:none;transition:color .15s;white-space:nowrap}
.site-header-links a:hover{color:#e2e8f0}
.site-header-links a.is-active{color:#a5b4fc}

.site-header-cta{display:flex;align-items:center;gap:12px}
.site-header-cta a{font-size:13.5px;text-decoration:none}
.site-header-signin{color:#8892a4;font-weight:500;transition:color .15s}
.site-header-signin:hover{color:#e2e8f0}
.site-header-getstarted{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff!important;padding:9px 18px;border-radius:9px;font-weight:600;box-shadow:0 3px 12px rgba(99,102,241,.3);transition:box-shadow .2s,transform .2s}
.site-header-getstarted:hover{box-shadow:0 6px 20px rgba(99,102,241,.45);transform:translateY(-1px)}

/* Mobile-only controls — hidden on desktop */
.site-header-hamburger{display:none;width:36px;height:36px;background:#151624;border:1px solid #1e2038;border-radius:9px;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;flex-shrink:0}
.site-header-hamburger span{width:16px;height:2px;background:#e2e8f0;border-radius:2px;transition:transform .25s,opacity .25s}
.site-header-hamburger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-header-hamburger.is-open span:nth-child(2){opacity:0}
.site-header-hamburger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.site-header-mobile{display:none;flex-direction:column;gap:2px;background:#0f1018;border-bottom:1px solid #1e2038;padding:8px;box-shadow:0 16px 28px rgba(0,0,0,.45)}
.site-header-mobile.is-open{display:flex}
.site-header-mobile a{padding:12px 14px;border-radius:8px;font-size:14.5px;font-weight:500;color:#8892a4;text-decoration:none}
.site-header-mobile a:hover,.site-header-mobile a:active{background:rgba(99,102,241,.08);color:#e2e8f0}
.site-header-mobile a.is-active{color:#a5b4fc}
.site-header-mobile-signin{border-top:1px solid #1e2038;margin-top:4px;padding-top:12px!important}

@media(max-width:860px){
  .site-header-bar{padding:12px 16px}
  .site-header-links{display:none}
  .site-header-cta .site-header-signin{display:none}
  .site-header-hamburger{display:flex}
}