feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup

- Sidebar: dynamic brand-accent colors, brainstorm section restyled
- AI chat general: popup panel with expand/collapse, hides when contextual AI open
- AI chat contextual: tabs reordered (Actions first), X close button, height fix
- Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.)
- Global color cleanup: emerald/orange hardcoded → brand-accent dynamic
- Brainstorm page: orange → brand-accent throughout
- PageEntry animation component added to key pages
- Floating AI button: bg-brand-accent instead of hardcoded black
- i18n: all 15 locales updated with new AI/billing keys
- Billing: freemium quota tracking, BYOK, stripe subscription scaffolding
- Admin: integrated into new design
- AGENTS.md + CLAUDE.md project rules added

.agent/skills/wds-1-project-brief/data/vision-explore.md

@@ -0,0 +1,75 @@
+# Substep 2: Explore Vision
+
+## Task
+
+Listen for signals and ask follow-up questions until you capture the essence of what they're building.
+
+## Instructions
+
+### 1. Use Conversational Follow-Up Patterns
+
+Reference: `src/data/agent-guides/saga/conversational-followups.md`
+
+Listen for signals and respond:
+
+**If they mention USERS:**
+- "Tell me more about them - who are they?"
+- "What frustrates them today?"
+
+**If they mention BUSINESS VALUE:**
+- "How do you see that translating to revenue/efficiency/growth?"
+- "What would success look like in 6 months?"
+
+**If they mention a FEATURE:**
+- "What problem does that solve?"
+- "Why is that important to you?"
+
+**If they're VAGUE:**
+- "Can you paint me a picture - what does that actually look like?"
+- "Give me a specific example"
+
+### 2. Know When to Stop
+
+You're ready when you can answer:
+- ✅ What are they building?
+- ✅ Why does it matter?
+- ✅ Who is it for?
+- ✅ What makes it different?
+
+**Don't over-explore.** 5-10 minutes usually enough.
+
+---
+
+## Example
+
+**User:** "Tourists in summer drive me crazy - they break down and need help NOW."
+
+**Agent:** "Tell me about the tourist situation - what time of year, what's typical?"
+
+**User:** "Summer, June to August. Northern Öland, we're basically the only option. They break down, they're stressed, they call everyone. Half the time it's a car I can't take because we're full."
+
+**Agent:** "So the website would help them understand if you can help them, before they call?"
+
+**User:** "Exactly! And show we're legit - we're AutoExperten certified, been here 20 years."
+
+**Agent:** "What about the 'basic stuff' calls you mentioned?"
+
+**User:** "People asking if we do X type of vehicle. We do EVERYTHING. Lawnmowers to tour buses. I want that clear right away."
+
+**Agent:** "Got it. So showing that breadth is important. How do you want to show it?"
+
+**User:** "Maybe pictures of all the different types? So they see we're serious."
+
+**Agent thinks:**
+- ✅ What: Professional website showing service breadth
+- ✅ Why: Reduce unnecessary calls, show credibility
+- ✅ Who: Summer tourists (stressed, need fast answers)
+- ✅ Different: Full range lawnmowers→tour buses, AutoExperten certified
+
+**Ready for reflection.**
+
+---
+
+## Next
+
+Once essence is captured, load and execute: `03-reflect-confirm.md`