:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-tertiary: #1a1a24;
  --border-primary: #2a2a35;
  --text-primary: #e4e4e7;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --accent-primary: #6366f1;
  --accent-tennis: #CCFF00;
  --accent-padel: #FFD600;
  --accent-pickleball: #E8A900;
  --accent-success: #10b981;
  --gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,0.15), transparent);
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg-primary); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 680px; margin: 0 auto; padding: 0 24px; }
h1 { font-size: clamp(28px, 5vw, 48px); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; font-weight: 700; }
p { color: var(--text-secondary); }
a { color: var(--accent-primary); text-decoration: none; }
.text-center { text-align: center; }
.text-muted { color: var(--text-tertiary); }
.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mb-2 { margin-bottom: 16px; } .mb-4 { margin-bottom: 32px; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.badge { display: inline-block; padding: 6px 14px; border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 600; background: var(--bg-tertiary); border: 1px solid var(--border-primary); color: var(--text-secondary); }
.btn { display: inline-block; padding: 12px 24px; border-radius: var(--radius-md); font-weight: 700; text-decoration: none; cursor: pointer; border: none; font-size: 0.9375rem; transition: opacity 0.2s, transform 0.1s; }
.btn:hover { opacity: 0.9; } .btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent-primary); color: white; }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.card { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 24px; }
.section { padding: 80px 0; }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap { gap: 16px; } .flex-wrap { flex-wrap: wrap; }