*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;line-height:1.7;color:#2d3436;background:#fefefe}
header{background:#fff;border-bottom:1px solid #eee;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between}
header h1{font-size:1.4rem;color:#2d3436}
header nav a{margin-left:1.5rem;color:#636e72;text-decoration:none;font-size:.95rem}
header nav a:hover{color:#e17055}
.hero{background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);padding:4rem 2rem;text-align:center}
.hero h2{font-size:2.2rem;margin-bottom:1rem;color:#2d3436}
.hero p{font-size:1.1rem;color:#636e72;max-width:600px;margin:0 auto}
main{max-width:900px;margin:2rem auto;padding:0 2rem}
article{margin-bottom:3rem}
article h2{font-size:1.8rem;margin-bottom:1rem;color:#2d3436}
article h3{font-size:1.3rem;margin:1.5rem 0 .75rem;color:#e17055}
article p{margin-bottom:1rem;color:#444}
article ul,article ol{margin:1rem 0 1rem 2rem}
article li{margin-bottom:.5rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin:2rem 0}
.card{border:1px solid #eee;border-radius:12px;overflow:hidden;transition:transform .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,.08)}
.card img{width:100%;height:200px;object-fit:cover}
.card-body{padding:1.2rem}
.card-body h3{font-size:1.1rem;margin-bottom:.5rem}
.card-body p{font-size:.9rem;color:#636e72}
footer{text-align:center;padding:2rem;color:#b2bec3;font-size:.85rem;border-top:1px solid #eee;margin-top:3rem}
@media(max-width:600px){.hero{padding:2rem 1rem}.hero h2{font-size:1.6rem}main{padding:0 1rem}}