@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes slideInLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:#f5f5f5;color:#333;line-height:1.6}.header{background:linear-gradient(135deg,#ff4d96,#8a57ff,#00bfff);background-size:200% 200%;animation:gradientShift 8s ease infinite;color:#fff;padding:1.5rem;box-shadow:0 2px 10px rgba(0,0,0,0.1)}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.logo{font-size:1.5rem;font-weight:bold;text-decoration:none;color:#fff;transition:transform 0.3s}.logo:hover{transform:scale(1.1);animation:pulse 1s ease infinite}.menu{list-style:none;display:flex;gap:1rem;flex-wrap:wrap}.menu a{color:#fff;text-decoration:none;padding:0.5rem 1rem;border-radius:5px;transition:all 0.3s;position:relative}.menu a::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:#fff;transition:all 0.3s;transform:translateX(-50%)}.menu a:hover{background:rgba(255,255,255,0.2);transform:translateY(-2px)}.menu a:hover::after{width:80%}.hero{background:linear-gradient(135deg,rgba(138,87,255,0.1),rgba(255,77,150,0.1));padding:4rem 1rem;text-align:center;animation:fadeInUp 0.8s ease}.hero h2{font-size:2rem;margin-bottom:1rem;color:#333;animation:slideInLeft 0.6s ease}.hero p{font-size:1.1rem;color:#666;margin-bottom:2rem;animation:slideInRight 0.6s ease 0.2s backwards}.btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:0.75rem 2rem;border-radius:25px;text-decoration:none;font-weight:600;transition:all 0.3s;position:relative;overflow:hidden}.btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.3);transition:width 0.6s,height 0.6s,top 0.6s,left 0.6s;transform:translate(-50%,-50%)}.btn:hover::before{width:300px;height:300px}.btn-primary{background:#8a57ff;color:#fff}.btn-primary:hover{background:#7340ea;transform:translateY(-2px) scale(1.05);box-shadow:0 10px 25px rgba(138,87,255,0.3)}.btn-secondary{background:#fff;color:#8a57ff;border:2px solid #8a57ff}.btn-secondary:hover{background:#8a57ff;color:#fff;transform:translateY(-2px) scale(1.05);box-shadow:0 10px 25px rgba(138,87,255,0.2)}.section{padding:3rem 1rem;background:#fff}.section:nth-child(even){background:#f9f9f9}.section h2{text-align:center;font-size:1.8rem;margin-bottom:2rem;color:#333;position:relative;display:inline-block;width:100%}.section h2::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:80px;height:4px;background:linear-gradient(90deg,#ff4d96,#8a57ff,#00bfff);border-radius:2px;animation:pulse 2s ease infinite}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem}.card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.1);transition:transform 0.3s,box-shadow 0.3s;opacity:0;animation:fadeInUp 0.6s ease forwards}.card:nth-child(1){animation-delay:0.1s}.card:nth-child(2){animation-delay:0.2s}.card:nth-child(3){animation-delay:0.3s}.card:nth-child(4){animation-delay:0.4s}.card:nth-child(5){animation-delay:0.5s}.card:nth-child(6){animation-delay:0.6s}.card:hover{transform:translateY(-10px) rotate(2deg);box-shadow:0 15px 35px rgba(138,87,255,0.3)}.card-img{width:100%;height:180px;object-fit:cover;display:block;transition:transform 0.5s}.card:hover .card-img{transform:scale(1.1)}.card-body{padding:1.5rem}.card h3{color:#8a57ff;margin-bottom:0.5rem}.card p{color:#666;font-size:0.9rem;margin-bottom:1rem}.card-meta{display:flex;justify-content:space-between;font-size:0.8rem;color:#999}.footer{background:#1f2937;color:#9ca3af;padding:2rem 1rem;text-align:center}.footer p{margin:0}@media(max-width:768px){.nav{flex-direction:column}.menu{flex-direction:column;width:100%}.hero h2{font-size:1.5rem}.grid{grid-template-columns:1fr}}