/* ===== Header (glass) ===== */
.site-header{
  position:fixed;
  top:16px;
  left:0;
  width:100%;
  z-index:60;
  pointer-events:none;
}
.header-inner{
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
  height:70px;
  padding:0 18px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.30);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 80px rgba(0,0,0,.30);
  pointer-events:auto;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand img{
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:14px;
  padding:6px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.brand span{
  font-weight:800;
  letter-spacing:.6px;
  white-space:nowrap;
}

.nav{
  display:flex;
  gap:18px;
  align-items:center;
}
.nav a{
  font-size:13px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted2);
  transition: color .25s ease, transform .25s ease;
  position:relative;
}
.nav a:hover{ color:rgba(255,255,255,.95); transform: translateY(-1px); }
.nav a.active{ color:rgba(255,255,255,.95); }
.nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:2px;
  border-radius:2px;
  background:rgba(0,229,255,.85);
  box-shadow:0 0 22px rgba(0,229,255,.25);
}

/* ===== Side nav (desktop) ===== */
.side-nav{
  position:fixed;
  left:18px;
  top:50%;
  transform: translateY(-50%);
  z-index:55;
  display:none;
  flex-direction:column;
  gap:10px;
  padding:8px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 980px){
  .side-nav{ display:flex; }
  body{ padding-left: 92px; }
}

.side-nav a{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.78);
  font-weight:800;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.side-nav a:hover{
  transform: translateX(1px);
  border-color: rgba(0,229,255,.45);
  color: rgba(255,255,255,.95);
}
.side-nav a.active{
  border-color: rgba(0,229,255,.75);
  background: rgba(0,229,255,.10);
  color: rgba(255,255,255,.98);
}

/* ===== Buttons / chips ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.9rem 1.05rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  font-weight:750;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(0,229,255,.55); box-shadow: 0 0 0 1px rgba(0,229,255,.16) inset; }
.btn.primary{
  border-color: rgba(0,229,255,.55);
  background: linear-gradient(90deg, rgba(0,229,255,.20), rgba(255,255,255,.03));
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.24);
  color: rgba(255,255,255,.80);
  font-weight:750;
  font-size:.9rem;
}

/* ===== Reveal ===== */
.js .reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in{ opacity:1; transform: translateY(0); }