:root {
  --night: #1d3129;
  --pine: #2a453e;
  --forest: #3d6159;
  --olive: #829447;
  --maroon: #631726;
  --peach: #f0caa4;
  --snow: #f4f8f5;
  --sage: #a9c3b6;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: #1e293b; font-family: Inter, sans-serif; }
.font-display { font-family: Marcellus, Georgia, serif; }
.site-nav { background: rgba(29,49,41,.97); }
.hero { background: var(--night); }
.hero-art { background: linear-gradient(110deg, rgba(29,49,41,.94), rgba(42,69,62,.74)), url('images/hero-africa.jpg') center/cover; }
.btn-brand { background: linear-gradient(92deg, var(--olive), var(--forest)); color: #fff; transition: transform .2s ease, filter .2s ease; }
.btn-brand:hover { transform: translateY(-2px); filter: brightness(1.08); }
.grad-text { background: linear-gradient(92deg, var(--olive), var(--peach), #26abe0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker { color: var(--forest); letter-spacing: .26em; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.surface { border: 1px solid #e2e8f0; box-shadow: 0 15px 45px -30px rgba(15,23,42,.35); }
.surface:hover { border-color: rgba(130,148,71,.55); }
footer { background: var(--night); color: var(--sage); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--forest); outline-offset: 2px; }