:root {
  color-scheme: light dark;
  --bg: #0e1110;
  --panel: #161b18;
  --accent: #9e7d4a;
  --green: #488f54;
  --text: #f5f7f5;
  --muted: #a3aba5;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, #1e2e22 0, transparent 34rem),
    radial-gradient(circle at 95% 20%, #2e2418 0, transparent 30rem),
    var(--bg);
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
.shell { width: min(740px, calc(100% - 36px)); margin: 0 auto; padding: 48px 0 80px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.2rem; }
.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.mark {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  font-weight: 900; color: #fff; background: linear-gradient(145deg, #488f54, #9e7d4a);
}
.hero { padding: 60px 0 32px; }
.eyebrow { color: var(--green); letter-spacing: .12em; font-size: .8rem; font-weight: 700; text-transform: uppercase; }
h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); font-weight: 800; line-height: 1.1; margin: 16px 0 20px; }
h2 { margin-top: 2em; font-size: 1.4rem; color: var(--text); }
p, li { color: var(--muted); }
.lead { font-size: 1.2rem; max-width: 620px; color: var(--text); }
.card {
  margin-top: 24px; padding: 24px; border: 1px solid #ffffff12; border-left: 3px solid var(--green);
  border-radius: 16px; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px);
}
.nav { display: flex; gap: 16px; margin-top: 32px; font-size: .95rem; }
.footer { margin-top: 60px; padding-top: 24px; border-top: 1px solid #ffffff12; font-size: .85rem; color: var(--muted); }