* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #1a1a2e; color: #eee; line-height: 1.6; }
header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem 0; text-align: center; }
header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
nav { background: #16213e; padding: 1rem; text-align: center; }
nav a { color: #eee; text-decoration: none; margin: 0 1rem; transition: 0.3s; }
nav a:hover { color: #667eea; }
main { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
.hero { text-align: center; padding: 4rem 2rem; background: linear-gradient(135deg, #0f3443 0%, #34e89e 100%); border-radius: 10px; margin-bottom: 2rem; }
.hero h2 { font-size: 2rem; margin-bottom: 1rem; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 3rem 0; }
.feature { background: #16213e; padding: 2rem; border-radius: 10px; border-left: 4px solid #667eea; }
.feature h3 { color: #667eea; margin-bottom: 1rem; }
footer { background: #16213e; text-align: center; padding: 2rem; margin-top: 4rem; }
footer a { color: #667eea; text-decoration: none; }