:root {
  --color-bg-main: #1a1c1f;
  --color-bg-secondary: #2a2d31;
  --color-accent-primary: #e67e22;
  --color-accent-secondary: #ffb347;
  --color-accent-soft: #f4a261;
  --color-highlight: #7fd1e8;
  --color-highlight-strong: #a8e6ff;
  --color-text-main: #f5f5f5;
  --color-text-muted: #c7c7c7;
  --color-text-dark: #121212;
  --color-border: #3a3f45;
  --color-shadow: rgba(0, 0, 0, 0.5);
  --gradient-sunset: linear-gradient(135deg, #1a1c1f 0%, #2a2d31 30%, #e67e22 70%, #ffb347 100%);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--color-bg-main);
  color: var(--color-text-main);
  font-family: "Segoe UI", system-ui, sans-serif;
  margin: 0;
}

.hero {
  background: var(--gradient-sunset);
  color: var(--color-text-main);
  padding: 4rem 2rem;
  text-align: center;
  box-shadow: 0 10px 30px var(--color-shadow);
}

.card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 8px 20px var(--color-shadow);
}

.button {
  background: var(--color-accent-primary);
  color: var(--color-text-dark);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.button:hover { background: var(--color-accent-secondary); }

.button-outline {
  background: transparent;
  color: var(--color-highlight);
  border: 2px solid var(--color-highlight);
}

.button-outline:hover {
  background: var(--color-highlight);
  color: var(--color-text-dark);
}

a {
  color: var(--color-highlight);
  text-decoration: none;
}

a:hover { color: var(--color-highlight-strong); }

.text-muted { color: var(--color-text-muted); }

.glow {
  color: var(--color-highlight);
  text-shadow:
    0 0 5px var(--color-highlight),
    0 0 10px var(--color-highlight),
    0 0 20px var(--color-highlight);
}