/* ===== RESET ===== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== BASE VARS ===== */
:root {
  --white: #fff;
  --off: #f9f9f9;
  --text: #0a0a0a;
  --sub: #6b6b6b;
  --border: rgba(0,0,0,0.08);
  --display: 'Bricolage Grotesque', sans-serif;
  --body: 'DM Sans', sans-serif;
  --radius: 16px;
}

/* ===== BODY ===== */
body { background: var(--off); color: var(--text); font-family: var(--body); min-height: 100vh; }

/* ===== NAV ===== */
nav {
  background: rgba(255,255,255,0.9); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border); padding: 0 2.5rem; height: 54px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.logo {
  font-family: var(--display); font-size: 1.1rem; font-weight: 800;
  color: var(--text); text-decoration: none; letter-spacing: -0.04em;
  display: flex; align-items: center; gap: 0.45rem;
}
.logo-mark {
  width: 26px; height: 26px; background: var(--text); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem;
}
.back { font-size: 0.82rem; font-weight: 500; color: var(--sub); text-decoration: none; transition: color 0.15s; }
.back:hover { color: var(--text); }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== SPINNER ===== */
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; }