:root {
  --nav-bg: #2c3e50;
  --accent: #f39c12;
  --bg-light: #f9f9f9;
  --text-dark: #333;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial, sans-serif; background: var(--bg-light); color: var(--text-dark); }
nav { background: var(--nav-bg); padding: 10px 20px; }
nav a { color: white; margin-right: 15px; text-decoration: none; font-weight: bold; }
.hero { height: 50vh; background: var(--nav-bg); color: white; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero h1 { font-size: 2.5rem; max-width: 800px; }
.container { max-width: 960px; margin: 40px auto; padding: 0 20px; }
.button { display: inline-block; background: var(--accent); color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px; margin: 10px 5px; }
.section h2 { margin-bottom: 15px; color: var(--nav-bg); }
.section h3 { margin-top: 20px; }
footer { background: var(--nav-bg); color: white; text-align: center; padding: 20px; margin-top: 40px; }
footer a { color: white; margin: 0 10px; text-decoration: none; }
ul { margin-left: 20px; margin-bottom: 20px; }
ol { margin-left: 20px; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }