feat: implement CS2-inspired design system and UI components

This commit delivers a comprehensive design system and component library
inspired by Counter-Strike 2's tactical aesthetic.

Design System:
- Created docs/DESIGN.md with complete design language documentation
- CS2-inspired color palette: T-side orange (#d4a74a), CT-side blue (#5e98d9)
- Dark-first approach with tactical, data-dense layouts
- Typography scale, spacing system, and animation guidelines

Component Library:
- Button component: 4 variants (primary, secondary, ghost, danger), 3 sizes
- Badge component: 7 variants including team-specific badges
- Card component: 3 variants (default, elevated, interactive)
- Header component: Responsive navigation with mobile menu
- Footer component: Site-wide footer with organized link sections

Pages:
- Redesigned homepage with hero section, featured matches, features grid, CTA
- Created placeholder pages: /matches, /players, /about
- All pages follow CS2 aesthetic with proper component usage

Technical Fixes:
- Fixed Svelte 5 snippet syntax errors (removed incorrect render prop pattern)
- Fixed Card component accessibility (conditional button/div rendering)
- Removed invalid CSS border-border class from app.css
- Ensured zero TypeScript errors and warnings

Build Status: ✓ Verified with 0 errors, 0 warnings

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/lib/components/layout/Footer.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { Github, Heart } from 'lucide-svelte';
+
+	const currentYear = new Date().getFullYear();
+
+	const links = {
+		main: [
+			{ name: 'Home', href: '/' },
+			{ name: 'Matches', href: '/matches' },
+			{ name: 'Players', href: '/players' },
+			{ name: 'API Docs', href: '/docs/api' }
+		],
+		about: [
+			{ name: 'About', href: '/about' },
+			{ name: 'FAQ', href: '/faq' },
+			{ name: 'Privacy', href: '/privacy' },
+			{ name: 'Terms', href: '/terms' }
+		],
+		resources: [
+			{ name: 'GitHub', href: 'https://somegit.dev/CSGOWTF/csgowtf', external: true },
+			{ name: 'Backend', href: 'https://somegit.dev/CSGOWTF/csgowtfd', external: true },
+			{
+				name: 'Donate',
+				href: 'https://liberapay.com/CSGOWTF/',
+				external: true
+			}
+		]
+	};
+</script>
+
+<footer class="border-t border-base-300 bg-base-100">
+	<div class="container mx-auto px-4 py-12">
+		<div class="grid gap-8 md:grid-cols-4">
+			<!-- Brand -->
+			<div class="md:col-span-1">
+				<a href="/" class="mb-4 inline-block text-2xl font-bold">
+					<span class="text-primary">CS2</span><span class="text-secondary">.WTF</span>
+				</a>
+				<p class="mb-4 text-sm text-base-content/60">
+					Statistics for CS2 matchmaking matches. Free and open source.
+				</p>
+				<div class="flex gap-3">
+					<a
+						href="https://somegit.dev/CSGOWTF/csgowtf"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-base-content/60 transition-colors hover:text-primary"
+						aria-label="GitHub"
+					>
+						<Github class="h-5 w-5" />
+					</a>
+					<a
+						href="https://liberapay.com/CSGOWTF/"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-base-content/60 transition-colors hover:text-error"
+						aria-label="Support on Liberapay"
+					>
+						<Heart class="h-5 w-5" />
+					</a>
+				</div>
+			</div>
+
+			<!-- Links -->
+			<div>
+				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-base-content/80">
+					Navigate
+				</h3>
+				<ul class="space-y-2">
+					{#each links.main as link}
+						<li>
+							<a
+								href={link.href}
+								class="text-sm text-base-content/60 transition-colors hover:text-primary"
+							>
+								{link.name}
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
+
+			<div>
+				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-base-content/80">
+					About
+				</h3>
+				<ul class="space-y-2">
+					{#each links.about as link}
+						<li>
+							<a
+								href={link.href}
+								class="text-sm text-base-content/60 transition-colors hover:text-primary"
+							>
+								{link.name}
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
+
+			<div>
+				<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-base-content/80">
+					Resources
+				</h3>
+				<ul class="space-y-2">
+					{#each links.resources as link}
+						<li>
+							<a
+								href={link.href}
+								class="text-sm text-base-content/60 transition-colors hover:text-primary"
+								{...link.external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
+							>
+								{link.name}
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		</div>
+
+		<!-- Bottom -->
+		<div class="mt-12 border-t border-base-300 pt-8 text-center text-sm text-base-content/60">
+			<p>
+				© {currentYear} CSGOW.TF Team. Licensed under
+				<a href="/license" class="hover:text-primary">GPL-3.0</a>
+			</p>
+			<p class="mt-2">
+				Made with <Heart class="inline h-4 w-4 text-error" /> by the community, for the community.
+			</p>
+		</div>
+	</div>
+</footer>