:root {
  --bg: #f7f5ef;
  --primary: #c69a1a;
  --secondary: #32373c;
  --accent: #e0d7c6;
  --light: #ffffff;
  --radius: 16px;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial; background: var(--bg); color: var(--secondary); line-height:1.4; }
header {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--light);
  padding: 2rem 1rem;
  text-align:center;
}
header h1 { margin:0; font-size:2.2rem; }
header p { margin:0.5rem 0 0; font-size:1.1rem; opacity:0.85; }
.container { max-width:1100px; margin:auto; padding:1rem; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:1rem; }
.card { background: var(--light); border:1px solid #e5ded0; border-radius: var(--radius); box-shadow: var(--shadow); padding:1rem 1.2rem; display:flex; flex-direction:column; gap:0.6rem; }
.card h3 { margin:0; font-size:1.4rem; color: var(--primary); }
.card p { margin:0; font-size:0.95rem; color: var(--secondary); }
.card .actions { margin-top:auto; display:flex; gap:0.6rem; flex-wrap:wrap; }
.button { padding:0.5rem 0.8rem; border:none; border-radius: var(--radius); background: var(--secondary); color: var(--light); text-decoration:none; font-size:0.9rem; }