*{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);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}.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:background 0.3s}.menu a:hover{background:rgba(255,255,255,0.2)}.hero{background:linear-gradient(135deg,rgba(138,87,255,0.1),rgba(255,77,150,0.1));padding:4rem 1rem;text-align:center}.hero h2{font-size:2rem;margin-bottom:1rem;color:#333}.hero p{font-size:1.1rem;color:#666;margin-bottom:2rem}.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}.btn-primary{background:#8a57ff;color:#fff}.btn-primary:hover{background:#7340ea;transform:translateY(-2px)}.btn-secondary{background:#fff;color:#8a57ff;border:2px solid #8a57ff}.btn-secondary:hover{background:#8a57ff;color:#fff}.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}.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}.card:hover{transform:translateY(-5px);box-shadow:0 5px 20px rgba(0,0,0,0.15)}.card-img{width:100%;height:180px;object-fit:cover;display:block}.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}}