/* ─────────────────────────────────────────────────────────────
   SHARED CHROME — single source of truth for the palette, the top
   bar and the buttons. Every page links this file, so the nav can
   never drift in size or alignment between pages. Edit here only.
   ───────────────────────────────────────────────────────────── */

html { scrollbar-gutter: stable; }

:root {
  --bg:        #0A0A0B;
  --bg2:       #141416;
  --card:      #17171A;
  --border:    rgba(255,255,255,0.08);
  --border2:   rgba(255,255,255,0.14);
  --ink:       #F5F4F2;
  --ink2:      #C4C2C8;
  --muted:     #6C6A72;
  --green:     #FFFFFF;
  --green-bg:  rgba(255,255,255,0.07);
  --nav-bg:    rgba(10,10,11,0.85);
  --shadow:    0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.25);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.45), 0 8px 40px rgba(0,0,0,0.35);
  --r:         14px;
  --r-sm:      8px;
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
  --cta-bg:    #F5F4F2;
  --cta-ink:   #0A0A0B;
  color-scheme: dark;
}
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.2px;
  /* pinned so the logo doesn't ride lower on pages whose body sets a
     different line-height */
  line-height: 1;
}
.logo-mark { color: var(--ink); flex-shrink: 0; border-radius: 6px; display: block; object-fit: cover; }
.nav-center {
  display: flex;
  gap: 2px;
}
.nav-link {
  /* pinned for the same reason as the logo: the surrounding line-height
     otherwise changes the nav row height from page to page */
  line-height: 1;
  font-size: 13px;
  font-weight: 450;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
.nav-link:hover { color: var(--ink); background: var(--border); }
.nav-link.current { color: var(--ink); background: var(--border); }
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  /* buttons and links must measure the same: without this, <a class="btn">
     inherits body line-height (1.6) and renders ~5px taller than
     <button class="btn">, so the bar changed height between pages */
  line-height: 1;
  border: 1px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  /* the hover glow below is absolutely positioned against this element;
     without these it escapes and paints across the whole fixed nav */
  position: relative;
  overflow: hidden;
}

/* hover glow — shared so every page's buttons behave identically */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; transform: scale(1.4); }
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-ghost {
  background: transparent;
  border-color: var(--border2);
  color: var(--ink2);
}
.btn-ghost:hover { background: var(--bg2); color: var(--ink); transform: translateY(-1px); }
.btn-solid {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-solid:hover { opacity: 0.85; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-lg {
  padding: 11px 22px;
  font-size: 14px;
  border-radius: 10px;
}
.icon-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.icon-btn:hover { background: var(--bg2); color: var(--ink); }
.icon-btn svg { width: 15px; height: 15px; }
.ca-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition), background var(--transition);
}
.ca-pill:hover { border-color: var(--green); background: rgba(255,255,255,0.06); }
.ca-pill .ca-label { color: var(--muted); font-weight: 500; }
.ca-pill .ca-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}
.ca-pill .ca-dot.off { background: var(--muted); box-shadow: none; }

/* ── PAGE ENTRANCE ── shared so every page animates in on load ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.enter   { animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) both; }
.enter-1 { animation-delay: 0.05s; }
.enter-2 { animation-delay: 0.15s; }
.enter-3 { animation-delay: 0.25s; }
.enter-4 { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
  .btn::after { display: none; }
  .btn-ghost:hover, .btn-solid:hover { transform: none; }
}