:root { --bg: #1A1A1A; --text: #EEEEEE; --primary: #00CFC1; --accent: #FF6E5A; }
* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: Arial, sans-serif; background: var(--bg); color: var(--text); }
.container { max-width:1000px; margin:auto; padding:20px; }
nav { background:#111; padding:10px; }
nav a { color:var(--text); margin:0 15px; text-decoration:none; font-weight:bold; }
nav a:hover { color:var(--primary); }
header { text-align:center; padding:60px 20px; background:#111; }
header h1 { font-size:2.5rem; color:var(--primary); }
.header p { font-size:1.2rem; margin-top:10px; }
.section { margin:40px 0; }
.section h2 { color:var(--primary); margin-bottom:16px; }
.button { display:inline-block; background:var(--accent); color:#fff; padding:12px 24px; margin-top:20px; border-radius:6px; text-decoration:none; position:relative; overflow:hidden; }
.button:hover { background:#e6554b; }
.cards { display:flex; flex-wrap:wrap; gap:20px; }
.card { background:#222; padding:20px; border-radius:8px; flex:1 1 250px; }
footer { background:#111; color:var(--text); text-align:center; padding:20px; }
footer a { color:var(--text); margin:0 10px; text-decoration:none; }
footer a:hover { color:var(--primary); }
/* Cursor trail */
#trail { position: fixed; pointer-events: none; width:10px; height:10px; background:var(--accent); border-radius:50%; transition:transform 0.1s ease-out; z-index:9999; }
/* Ripple */
.ripple { position:absolute; background:rgba(255,255,255,0.7); border-radius:50%; transform:scale(0); animation:ripple 0.6s linear; }
@keyframes ripple { to { transform:scale(20); opacity:0; } }