:root{
  --bg:#0A1120;
  --panel:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.10);
  --brand:#6C4AFF;
  --brand2:#7C3AED;
  --text:#E5E7EB;
  --muted:#A7B2C3;
  --glass:blur(12px) saturate(120%);
}

/* Page base (keeps your Tailwind look; this only polishes) */
html,body{background:var(--bg);color:var(--text)}
img{max-width:100%;height:auto}

/* ---------- Header (drop-in across pages) ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:var(--glass);
  background:linear-gradient(180deg, rgba(10,17,32,.75), rgba(10,17,32,.55));
  border-bottom:1px solid var(--border);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.65rem 1rem; max-width:1200px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text);
}
.brand img{
  width:34px;height:34px;border-radius:.5rem;
  box-shadow:0 0 0 2px rgba(108,74,255,.6), 0 0 0 4px rgba(10,17,32,.9);
}
.brand strong{font-weight:800;letter-spacing:.2px}

/* Nav */
.nav{
  display:flex; align-items:center; gap:.35rem; flex-wrap:wrap;
}
.nav a, .nav button{
  padding:.55rem .7rem; border-radius:.6rem; font-weight:600;
  color:var(--text); text-decoration:none; border:1px solid transparent;
  transition:transform .14s ease, background-color .14s ease, border-color .14s ease;
  cursor:pointer;
}
.nav a:hover, .nav button:hover{ background:rgba(255,255,255,.06); border-color:var(--border); transform:translateY(-1px) }
.nav .cta{
  background-image:linear-gradient(45deg,var(--brand),var(--brand2)); color:#fff; border-color:transparent;
}
.nav .cta:hover{ filter:brightness(1.06) }

/* Dropdowns */
.menu{
  position:relative;
}
.menu[aria-expanded="true"] > .menu-panel{ display:block }
.menu-toggle{ display:inline-flex; align-items:center; gap:.35rem }
.menu-panel{
  display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:240px;
  padding:.5rem; border-radius:.8rem; border:1px solid var(--border);
  background:rgba(12,16,28,.85); backdrop-filter:var(--glass);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.menu-panel a{
  display:flex; align-items:center; gap:.55rem; padding:.5rem .6rem; border-radius:.55rem; color:var(--text);
}
.menu-panel a:hover{ background:rgba(255,255,255,.06) }

/* Mobile */
.hamburger{ display:none }
@media (max-width: 900px){
  .hamburger{ display:inline-flex; align-items:center; justify-content:center;
    width:40px;height:40px; border-radius:.6rem; border:1px solid var(--border); background:rgba(255,255,255,.03) }
  .nav{ display:none }
  .nav.open{ display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; left:0; right:0; top:58px; padding:10px; gap:6px;
    background:rgba(10,17,32,.92); backdrop-filter:var(--glass); border-bottom:1px solid var(--border) }
  .menu-panel{ position:relative; top:auto; left:auto; width:100% }
}

/* Utilities */
.btn{ cursor:pointer }
.kbd{ font:600 12px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background:rgba(255,255,255,.06); border:1px solid var(--border); padding:.15rem .4rem; border-radius:.35rem; color:var(--muted)}