
:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #183128;
  background: #f5f8f5;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; }
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px clamp(16px, 4vw, 56px);
  background: rgba(255,255,255,.96); border-bottom: 1px solid #dfe9e1;
}
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; }
.brand-mark {
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:#187447; color:white; font-weight:800;
}
.brand strong { display:block; font-size:18px; }
.brand small { display:block; color:#668174; font-size:11px; }
nav { display:flex; gap:18px; }
nav a { text-decoration:none; font-weight:700; font-size:14px; }
main { min-height: calc(100vh - 150px); }
footer { padding:30px; text-align:center; color:#6b7f74; font-size:13px; }
.hero {
  min-height: 70vh; display:grid; place-items:center; text-align:center;
  padding: 60px 20px;
  background: radial-gradient(circle at top right, #dff3e6, transparent 40%),
              linear-gradient(160deg, #f8fbf8, #edf5ef);
}
.hero-inner { max-width: 850px; }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:#187447; font-weight:800; }
h1 { font-size:clamp(35px, 7vw, 68px); line-height:1.03; margin:12px 0 18px; }
h2 { margin: 0 0 12px; }
.lead { font-size:clamp(17px, 2.5vw, 22px); color:#536b5e; }
.actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }
.button, button {
  border:0; border-radius:10px; padding:13px 18px; font:inherit; font-weight:800;
  cursor:pointer; text-decoration:none; display:inline-flex; justify-content:center; align-items:center;
}
.primary { background:#187447; color:white; }
.secondary { background:white; color:#187447; border:1px solid #b9d1c1; }
button:disabled { opacity:.55; cursor:not-allowed; }
.page { width:min(1100px, calc(100% - 28px)); margin:36px auto; }
.narrow { width:min(650px, calc(100% - 28px)); margin:36px auto; }
.panel {
  background:white; border:1px solid #dce8df; border-radius:16px;
  padding:clamp(18px, 4vw, 34px); box-shadow:0 8px 30px rgba(27,73,49,.06);
}
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
label { display:flex; flex-direction:column; gap:7px; font-weight:700; font-size:14px; }
input, select, textarea {
  width:100%; border:1px solid #bfd0c4; border-radius:9px; padding:12px;
  font:inherit; background:white; color:#183128;
}
textarea { resize:vertical; }
.full { grid-column:1/-1; }
.form-stack { display:grid; gap:16px; }
.check { flex-direction:row; align-items:flex-start; font-weight:500; }
.check input { width:auto; margin-top:3px; }
.status { margin-top:16px; padding:12px 14px; border-radius:9px; background:#edf6ef; }
.error { background:#fff0f0; color:#8a2525; }
.tabs { display:flex; gap:8px; margin:20px 0; }
.tabs button.active { background:#187447; color:white; }
.filters { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:12px; align-items:end; }
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; }
.card { background:white; border:1px solid #dce8df; border-radius:14px; padding:20px; }
.card h3 { margin:8px 0; font-size:22px; }
.meta { color:#61786b; font-size:14px; }
.badge { display:inline-block; padding:5px 9px; border-radius:999px; background:#e9f5ed; color:#17663f; font-size:12px; font-weight:800; text-transform:capitalize; }
.muted { color:#6a7f73; }
.product-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.dashboard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.stat { padding:18px; border-radius:12px; background:#f2f7f3; }
.stat strong { display:block; font-size:28px; }
@media (max-width:760px) {
  .brand small { display:none; }
  .form-grid, .cards, .dashboard-grid { grid-template-columns:1fr; }
  .filters { grid-template-columns:1fr; }
  .full { grid-column:auto; }
  nav { gap:10px; }
}
