/* =========================
   HEADER / NAV
========================= */
.nav{
  position:sticky;
  top:0;
  z-index:50;

  background:rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;

  font-weight:900;
  letter-spacing:.2px;
}

.logo{
  width:36px;
  height:36px;
  border-radius:10px;

  display:grid;
  place-items:center;

  border:1px solid var(--border);
  box-shadow:0 6px 16px rgba(0,0,0,.06);

  font-size:18px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-variant-emoji: emoji;
}


/* optional links in header */
.nav-links{
  display:flex;
  align-items:center;
  gap:14px;
}

.nav-links a{
  padding:8px 10px;
  border-radius:12px;
  font-weight:700;
}

.nav-links a:hover{background:#f4f4f4}


/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 14px;
  border-radius:14px;

  border:1px solid var(--border);
  background:#fff;

  font-weight:800;
  line-height:1;

  box-shadow:0 8px 18px rgba(0,0,0,.05);
  transition: transform .15s ease;
  cursor:pointer;
}

.btn:hover{transform:translateY(-1px)}

.btn-primary{
  background:#0b0b0b;
  color:#fff;
  border-color:#0b0b0b;
}


/* icons */
.icon{
  width:18px;
  height:18px;
  display:block;

  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.icon-white{stroke:#fff}


/* icon-only button (header) */
.icon-btn{
  width:52px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:16px;
  background:#0b0b0b;
  border:1px solid #0b0b0b;

  box-shadow:0 10px 22px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.icon-btn:hover{
  transform: translateY(-1px);
  box-shadow:0 16px 32px rgba(0,0,0,.16);
  opacity:.95;
}


/* responsive (header only) */
@media (max-width:900px){
  .nav-links{display:none}
}


/* =========================
   FOOTER
========================= */
footer{
  margin-top:auto;
  padding:26px 0;

  border-top:1px solid var(--border);
  color:var(--muted);

  font-weight:700;
  font-size:13px;
}