body{margin:0;font-family:-apple-system,Segoe UI;background:#fff;color:#111;text-align:center}
header{padding:20px;font-size:20px}
nav{background:#f5f5f7;padding:10px}
nav a{margin:0 10px;text-decoration:none;color:#000}
.hero{padding:100px 20px}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:20px; padding:40px;}
img{width:100%;height:200px;object-fit:cover;border-radius:12px;cursor:pointer;transition:0.3s}
img:hover{transform:scale(1.08)}
#modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);justify-content:center;align-items:center}
#modal img{max-width: 90%; max-height: 90%; width: auto; height: auto; object-fit: contain;}
.card{padding:20px;margin:20px auto;max-width:500px;background:#f5f5f7;border-radius:12px}
.fade{animation:fadein 1s}
@keyframes fadein{from{opacity:0;transform:translateY(20px)}to{opacity:1}}
form{display:flex;flex-direction:column;gap:10px;max-width:300px;margin:auto}
input,textarea{padding:10px;border-radius:8px;border:1px solid #ccc}
button{padding:10px;background:black;color:white;border:none;border-radius:10px}
footer{padding:20px;color:gray}