:root {
  --primary: #059669;
  --background: #fefefe;
  --text: #1f2937;
  --accent: #059669;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--background); color: var(--text); line-height: 1.6; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; border-bottom: 1px solid rgba(128,128,128,.2); }
.site-header .brand { font-weight: 700; font-size: 1.25rem; color: var(--primary); text-decoration: none; }
.site-header nav a { margin-left: 1rem; color: var(--text); text-decoration: none; }
main { max-width: 960px; margin: 0 auto; padding: 2rem; }
.hero h1 { color: var(--primary); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.card { display: block; padding: 1rem; border: 1px solid rgba(128,128,128,.25); border-radius: 8px; text-decoration: none; color: var(--text); }
.card:hover { border-color: var(--accent); }
article h1 { color: var(--primary); }
.featured-summary { border-collapse: collapse; margin: 1rem 0; }
.featured-summary td { border: 1px solid rgba(128,128,128,.25); padding: .5rem 1rem; }
.site-footer { text-align: center; padding: 2rem; opacity: .7; font-size: .875rem; }

.card {
  background: #fefefe;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.1);
}
.btn {
  background: linear-gradient(135deg, #059669, #047857);
  border-radius: 8px;
  color: #fefefe;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn:hover {
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}