@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Source+Sans+Pro:wght@400;600;700&display=swap');

:root {
  --sl-ink: #0f1a14;
  --sl-forest: #1f3b28;
  --sl-field: #3f6b45;
  --sl-meadow: #8fb37a;
  --sl-straw: #f3e7cf;
  --sl-cream: #fbf8f2;
  --sl-sun: #e4a63a;
  --sl-rust: #b4632b;
  --sl-sky: #8fb6c8;
  --sl-shadow: rgba(4, 19, 12, 0.14);
  --sl-shell: 1180px;
}

.sl-page {
  margin: 0;
  font-family: 'Source Sans Pro', system-ui, sans-serif;
  color: var(--sl-ink);
  background: radial-gradient(circle at 18% 22%, rgba(143, 182, 200, 0.14), transparent 26%),
              radial-gradient(circle at 82% 14%, rgba(143, 179, 122, 0.12), transparent 22%),
              var(--sl-cream);
  line-height: 1.65;
}

img { max-width: 100%; display: block; }

.sl-shell { width: min(var(--sl-shell), 94%); margin: 0 auto; padding: 0 14px; }

.sl-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 248, 242, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 26, 20, 0.06);
}

.sl-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.sl-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: 0.01em; color: var(--sl-forest); }
.sl-mark { width: 52px; height: 52px; border-radius: 16px; background: #fff; box-shadow: 0 18px 38px -22px var(--sl-shadow); display: grid; place-items: center; border: 1px solid rgba(15, 26, 20, 0.08); overflow: hidden; }
.sl-mark img { width: 40px; height: 40px; object-fit: contain; }
.sl-nav__links { display: flex; gap: 12px; flex-wrap: wrap; }
.sl-nav__links a { color: var(--sl-ink); font-weight: 600; padding: 10px 14px; border-radius: 12px; transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease; }
.sl-nav__links a:hover, .sl-nav__links a:focus-visible { background: rgba(31, 59, 40, 0.1); color: var(--sl-forest); transform: translateY(-1px); }

.sl-hero { padding: 76px 0 56px; display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; }
.sl-eyebrow { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-field); font-weight: 700; }
.sl-hero__text h1 { font-family: 'Fraunces', 'Source Sans Pro', serif; font-weight: 700; font-size: clamp(34px, 5vw, 58px); line-height: 1.05; margin: 12px 0 14px; color: var(--sl-forest); }
.sl-hero__text p { margin: 0 0 18px; max-width: 680px; }
.sl-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

.sl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; border-radius: 14px; font-weight: 700; border: 1px solid transparent; background: linear-gradient(135deg, var(--sl-field), var(--sl-forest)); color: #fff; box-shadow: 0 16px 34px -20px var(--sl-shadow); text-decoration: none; transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.sl-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.sl-btn--ghost { background: transparent; color: var(--sl-forest); border-color: rgba(31, 59, 40, 0.3); }

.sl-hero__figure { position: relative; }
.sl-frame { background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 18px 42px -22px var(--sl-shadow); border: 1px solid rgba(15, 26, 20, 0.06); }
.sl-frame img { border-radius: 12px; }
.sl-tag { position: absolute; bottom: -12px; left: 18px; background: var(--sl-straw); color: var(--sl-forest); padding: 8px 12px; border-radius: 12px; box-shadow: 0 10px 24px -18px var(--sl-shadow); font-weight: 600; }

.sl-section { padding: 64px 0; border-top: 1px solid rgba(15, 26, 20, 0.06); }
.sl-section:first-of-type { border-top: none; }
.sl-section h2 { font-family: 'Fraunces', 'Source Sans Pro', serif; font-size: clamp(26px, 3vw, 40px); color: var(--sl-forest); margin: 0 0 10px; }
.sl-lede { font-size: 18px; max-width: 780px; color: rgba(15, 26, 20, 0.82); margin: 0 0 16px; }

.sl-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.sl-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: center; }

.sl-card { background: linear-gradient(180deg, #fff, #fdfaf5); border-radius: 16px; padding: 18px 18px 16px; box-shadow: 0 16px 36px -26px var(--sl-shadow); border: 1px solid rgba(15, 26, 20, 0.08); }
.sl-card h3 { margin: 0 0 8px; font-size: 18px; color: var(--sl-forest); }
.sl-card p { margin: 0 0 10px; }
.sl-list { list-style: disc; padding-left: 20px; margin: 10px 0 0; }
.sl-tagline { font-weight: 700; color: var(--sl-field); margin: 8px 0 0; }

.sl-mosaic { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.sl-mosaic figure { margin: 0; background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 14px 32px -22px var(--sl-shadow); border: 1px solid rgba(15, 26, 20, 0.06); }
.sl-mosaic img { border-radius: 10px; }

.sl-cta-panel { background: linear-gradient(135deg, rgba(63, 107, 69, 0.12), rgba(228, 166, 58, 0.16)); border: 1px solid rgba(15, 26, 20, 0.08); border-radius: 16px; padding: 18px 18px 14px; }

.sl-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.sl-table th, .sl-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(15, 26, 20, 0.08); }
.sl-table th { font-weight: 700; color: var(--sl-forest); }

.sl-footer { padding: 48px 0 64px; background: var(--sl-straw); color: rgba(15, 26, 20, 0.82); margin-top: 40px; }
.sl-footer .sl-shell { display: grid; gap: 10px; }

@media (max-width: 720px) {
  .sl-nav { flex-direction: column; align-items: flex-start; }
  .sl-nav__links { width: 100%; }
}