:root {
  --industrial-gray: #4D4D4D;
  --white: #FFFFFF;
  --accent-red: #E63946;
  --accent-mint: #A8DADC;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--industrial-gray); background: var(--white); }
nav { background: var(--industrial-gray); padding: 10px 20px; }
nav a { margin-right: 15px; color: var(--white); text-decoration: none; font-weight: bold; }
nav a:hover { color: var(--accent-mint); }
header.hero { background: var(--industrial-gray); color: var(--white); text-align: center; padding: 80px 20px; }
header.hero h1 { font-size: 2.5rem; margin-bottom: 10px; }
header.hero p { font-size: 1.2rem; margin-bottom: 20px; }
header.hero .cta { background: var(--accent-red); color: var(--white); padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; margin: 5px; }
.container { max-width: 1000px; margin: 40px auto; padding: 0 20px; }
.section { margin-bottom: 40px; }
.section h2 { color: var(--accent-red); margin-bottom: 15px; }
.list { margin-left: 20px; }
.card { background: var(--accent-mint); padding: 20px; border-radius: 6px; margin-bottom: 20px; }
footer { background: var(--industrial-gray); color: var(--white); text-align: center; padding: 15px; }
footer a { color: var(--accent-mint); margin: 0 10px; text-decoration: none; }
footer a:hover { text-decoration: underline; }