:root {
  --bg: #FAFAF7;
  --bg-warm: #F5F2EB;
  --bg-card: #FFFFFF;
  --bg-dark: #141210;
  --text: #1C1A16;
  --text-mid: #5C564A;
  --text-soft: #9B9385;
  --text-faint: #C5BDB0;
  --accent: #D95030;
  --accent-dark: #C24528;
  --accent-hover: #C24528;
  --accent-light: rgba(217,80,48,0.06);
  --green: #2B8C4E;
  --green-light: rgba(43,140,78,0.06);
  --green-check: #34A85A;
  --blue: #3574C4;
  --blue-light: rgba(53,116,196,0.06);
  --mango: #E5993E;
  --mango-light: rgba(229,153,62,0.06);
  --purple: #7B5EA7;
  --purple-light: rgba(123,94,167,0.06);
  --border: #E6E1D6;
  --border-light: #F0ECE3;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.12);
  --r: 16px;
  --r-sm: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  font-family: 'Nunito Sans', sans-serif;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}

/* ═══ NAV ═══ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.3s;
}
nav.scrolled {
  background: rgba(250,250,247,0.92);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-light);
}
body.nav-on-dark nav:not(.scrolled) .nav-logo {
  color: rgba(255,255,255,0.95);
}
body.nav-on-dark nav:not(.scrolled) .nav-link {
  color: rgba(255,255,255,0.78);
}
body.nav-on-dark nav:not(.scrolled) .nav-link:hover {
  color: white;
  background: rgba(255,255,255,0.12);
}
body.nav-on-dark nav:not(.scrolled) .nav-btn {
  background: rgba(255,255,255,0.94);
  color: var(--text);
}
body.nav-on-dark nav:not(.scrolled) .nav-btn:hover {
  background: white;
}
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text);
}
.nav-logo-dot {
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.nav-logo-text {
  font-family: 'Fraunces', serif; font-weight: 800;
  font-size: 18px; letter-spacing: -0.5px;
}
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-link {
  padding: 8px 16px; font-size: 14px; font-weight: 600;
  color: var(--text-mid); text-decoration: none;
  border-radius: 100px; transition: all 0.15s;
}
.nav-link:hover { color: var(--text); background: var(--bg-warm); }
.nav-btn {
  padding: 8px 18px; border-radius: 100px;
  font-family: 'Nunito Sans'; font-size: 14px; font-weight: 700;
  background: var(--text); color: white;
  border: none; cursor: pointer; transition: all 0.15s;
}
.nav-btn:hover { background: #2A2720; }

/* ═══ TOAST ═══ */
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--text); color: white;
  padding: 12px 24px; border-radius: 100px;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-xl);
  z-index: 200; white-space: nowrap;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.4s;
  opacity: 0; pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 600px) {
  .nav-link { display: none; }
}