:root {
            --bg-dark: #0f0
518;
            --accent-purple: #9d4edd;
            --accent-pink: #ff
007f;
            --text-light: #ffffff;
            --text-dim: #b3
b3b3;
            --card-bg: rgba(255, 255, 255
, 0.05);
        }
        body { margin: 0; font-family: 'Segoe
 UI', Roboto, sans-serif; background-color: var(--bg-dark); color: var(--text-light); line
-height: 1.6; }
        .container { max-width: 1200px; margin:
 0 auto; padding: 0 20px; }
        header { padding: 20px 
0; display: flex; justify-content: space-between; align-items: center; }
        .nav-links
 { display: flex; gap: 0; }
        .nav-links a { color: var(--text-light);
 text-decoration: none; padding: 0 15px; transition: 0.3s; }

        .hero { padding: 100px 0; text-align: center; background: radial
-gradient(circle at center, #2d1b4e 0%, #0f0518 
70%); }
        h1 { font-size: 3rem; margin-bottom: 20
px; background: linear-gradient(90deg, #fff, #9d4edd); -webkit-background-clip:
 text; -webkit-text-fill-color: transparent; }
        .btn-primary { background: var
(--accent-pink); color: white; padding: 12px 30px; border-radius: 50px
; text-decoration: none; display: inline-block; transition: 0.3s; }
        
.btn-primary:hover { transform: scale(1.05); box-shadow: 0 0 2
0px var(--accent-pink); }
        .grid { display: grid; grid-template-columns: repeat(auto-fit
, minmax(300px, 1fr)); gap: 30px; padding: 50px 0;
 }
        .card { background: var(--card-bg); padding: 30px; border-radius
: 20px; border: 1px solid rgba(255,255,255,0
.1); }
        footer { padding: 40px 0; text-align: center; border
-top: 1px solid rgba(255,255,255,0.1
); color: var(--text-dim); }
        .form-group { margin-bottom: 15px; }
        
input, select, textarea { width: 100%; padding: 10px; background: #222; border
: 1px solid #444; color: white; border-radius: 5px; }