/* Nature theme — calm & elegant */
:root{
  --bg:#f6f7f5;           /* mist gray */
  --surface:#ffffff;       /* clean white */
  --text:#1f2937;          /* slate-800 */
  --muted:#6b7280;         /* slate-500 */
  --edge:#e5e7eb;          /* soft edge */
  --brand:#2f855a;         /* moss green */
  --accent:#4a5568;        /* cool slate */
  --radius:16px;
  --shadow:0 8px 24px rgba(15,23,42,.06);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--text); background:var(--bg); line-height:1.6; }

.container{ width:100%; max-width:980px; margin-inline:auto; padding-inline: clamp(14px, 4vw, 24px); }
.section{ margin-block: clamp(18px, 5vw, 36px); }

/* Header (no nav) */
.site-header{ position:sticky; top:0; z-index:20; background:linear-gradient(180deg,#eef2f1, #ffffff); border-bottom:1px solid var(--edge); }
.header-inner{ display:flex; align-items:center; justify-content:flex-start; gap:12px; padding-block: 14px; }
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand-logo{ width:42px; height:42px; border-radius:12px; background: radial-gradient(120px 120px at 30% 30%, #48bb78, #2f855a); color:#fff; display:grid; place-items:center; font-weight:800; letter-spacing:.5px; }
.brand h1{ font-size: clamp(18px, 4vw, 24px); margin:0; }
.brand .muted{ margin:0; color:var(--muted); font-size: clamp(12px, 3vw, 14px); }

/* Cards & grid */
.grid{ display:grid; gap: clamp(12px, 3vw, 18px); }
.grid-3{ grid-template-columns: 1fr; }
@media (min-width: 640px){ .grid-3{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 980px){ .grid-3{ grid-template-columns: repeat(3,1fr); } }

.card{ background:var(--surface); border:1px solid var(--edge); border-radius: var(--radius); padding: clamp(16px, 3.5vw, 20px); box-shadow: var(--shadow); }
.card h3{ margin:6px 0 4px; font-size: clamp(16px, 3.8vw, 20px); }
.card .badge{ display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px; background:#edf2ee; color:#2f855a; }
.lead{ color:#374151; font-size: clamp(14px, 3.6vw, 16px); margin:8px 0 0 0; }

.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.btn{ display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; border:1px solid var(--edge); color:#1f2937; background:#fff; }
.btn.primary{ background:#2f855a; color:#fff; border-color:#276749; }
.btn.primary:hover{ filter:brightness(.98); }
.btn.alt:hover{ background:#f7faf9; }

/* QR page */
.qr-wrap{ display:grid; place-items:center; padding: clamp(12px, 4vw, 18px); }
.qr-wrap img{ max-width: 84vw; width: 360px; height:auto; border-radius:12px; border:1px solid var(--edge); }

/* Footer */
.site-footer{ border-top:1px solid var(--edge); background:#ffffff; }
.footer-inner{ display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; padding:16px 0; color:#64748b; }
@media (min-width:700px){ .footer-inner{ flex-direction:row; justify-content:space-between; } }

/* Media safety */
img{ max-width:100%; height:auto; border-radius:12px; }