* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, sans-serif; background: #0f0f23; color: #e0e0e0; min-height: 100vh; }
header { text-align: center; padding: 60px 20px 40px; background: linear-gradient(135deg, #1a1a2e, #16213e); }
header h1 { font-size: 2.5rem; margin-bottom: 10px; color: #fff; }
header p { font-size: 1.1rem; color: #aaa; }
main { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
.hero { text-align: center; margin-bottom: 50px; }
.hero h2 { font-size: 1.8rem; margin-bottom: 15px; color: #B9EFF7; }
.hero p { font-size: 1.1rem; color: #bbb; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.card { background: #1a1a2e; border-radius: 12px; padding: 30px; border: 1px solid #333; transition: transform 0.2s; }
.card:hover { transform: translateY(-4px); border-color: #8B1A2B; }
.card h3 { font-size: 1.3rem; margin-bottom: 10px; color: #fff; }
.card p { color: #aaa; }
footer { text-align: center; padding: 30px; color: #666; border-top: 1px solid #222; margin-top: 60px; }