:root { --bg: #0a0a0a; --accent: #00d4ff; --text: #e0e0e0; --card: #141414; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; margin: 0; text-align: center; }
header { padding: 80px 20px; border-bottom: 1px solid #222; background: linear-gradient(180deg, #111, #0a0a0a); }
h1 { color: var(--accent); letter-spacing: 5px; font-size: 2.5rem; text-transform: uppercase; }
.grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; padding: 60px 20px; max-width: 1200px; margin: auto; }
.card { background: var(--card); border: 1px solid #333; padding: 30px; width: 280px; border-radius: 12px; transition: 0.4s; text-decoration: none; color: inherit; }
.card:hover { border-color: var(--accent); transform: translateY(-8px); box-shadow: 0 10px 30px rgba(0,212,255,0.15); }
.card h3 { color: var(--accent); margin-top: 0; font-size: 1.2rem; }
.card p { font-size: 0.9rem; color: #888; line-height: 1.6; }
.cta { display: inline-block; margin-top: 20px; font-weight: bold; color: var(--accent); }
nav { padding: 20px; border-top: 1px solid #222; }
nav a { color: #555; text-decoration: none; margin: 0 15px; font-size: 0.8rem; letter-spacing: 2px; }
nav a:hover { color: var(--accent); }