/* Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins', sans-serif; }
body { background-color:#121212; color:#fff; line-height:1.6; }
a { text-decoration:none; color:inherit; }
header { background:#1DB954; padding:15px 30px; display:flex; justify-content:space-between; align-items:center; }
header nav a { margin-left:20px; font-weight:bold; transition:0.3s; }
header nav a:hover { color:#fff; }
section { padding:60px 20px; max-width:1000px; margin:0 auto; opacity:0; transform:translateY(30px); transition:opacity 0.8s ease-out, transform 0.8s ease-out; }
section.visible { opacity:1; transform:translateY(0); }

/* Hero */
.hero { position:relative; text-align:center; padding:120px 20px; background:linear-gradient(-45deg, #1DB954, #00CFFF, #FF2D55, #1DB954); background-size:400% 400%; animation:gradientBG 15s ease infinite; }
@keyframes gradientBG { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
.hero h1 { font-size:3rem; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.5); margin-bottom:20px; }
.hero p { font-size:1.3rem; color:#eee; margin-bottom:40px; }

/* Buttons */
.button { background: linear-gradient(45deg, #1DB954, #00CFFF); color:#fff; padding:14px 36px; border-radius:50px; font-weight:bold; transition:0.3s; background-size:200% 200%; }
.button:hover { background-position:right center; transform:scale(1.1); box-shadow:0 0 15px rgba(0,255,255,0.5); }

/* Feature cards */
.features { display:flex; flex-wrap:wrap; justify-content:space-around; gap:20px; }
.feature-card { background:linear-gradient(135deg,#1e1e1e,#2a2a2a); border-radius:15px; padding:25px; text-align:center; transition:transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
.feature-card:hover { transform:translateY(-10px) scale(1.05); box-shadow:0 10px 25px rgba(0,255,255,0.2); background:linear-gradient(135deg,#00CFFF,#FF2D55); }

/* Footer Font Awesome icons */
footer { background:#1e1e1e; text-align:center; padding:20px; margin-top:40px; }
footer a { margin:0 15px; color:#1DB954; font-size:2rem; transition:transform 0.3s, color 0.3s; }
footer a:hover { transform:scale(1.3); color:#00CFFF; }

/* Smooth scroll */
html { scroll-behavior:smooth; }