:root { --primary: #bf40bf; --bg: #0
a0a0c; --text: #e0e0e0; --card: #1616
1a; --accent: #ff00ff; }
        * { box-sizing: border-box; margin:
 0; padding: 0; }
        body { font-family: 'Segoe UI', Roboto, sans-serif; background
-color: var(--bg); color: var(--text); line-height: 1.6; }

        .container { max-width: 1200px; margin: 0 auto; padding: 
0 20px; }
        header { padding: 20px 0; border-bottom: 1
px solid #333; }
        nav { display: flex; align-items: center; justify-content
: space-between; }
        .nav-links { display: flex; gap: 0; }
        .nav
-links a { color: #fff; text-decoration: none; padding: 10px 15px; font-
size: 14px; }
        .btn { display: inline-block; padding: 12px
 24px; border-radius: 4px; background: var(--primary); color: #fff; text
-decoration: none; transition: 0.3s; }
        .hero { padding: 80px 0; text
-align: center; background: radial-gradient(circle at center, #2a0a2a, #0a
0a0c); }
        .hero h1 { font-size: 3rem; margin-bottom: 20
px; background: linear-gradient(to right, #ff00ff, #00ffff); -webkit-background-clip:
 text; -webkit-text-fill-color: transparent; }
        .grid { display: grid; grid
-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2
0px; margin: 40px 0; }
        .card { background: var(--card); padding
: 25px; border-radius: 12px; border: 1px solid #333; }

        footer { padding: 40px 0; background: #000; text-align: center;
 }
        @media (max-width: 768px) { .nav-links { display: none; } }