@font-face { font-family: FiraLight; src: url('/fonts/FiraSans-Light.woff') format('woff'); font-display: swap; }
@font-face { font-family: FiraBook; src: url('/fonts/FiraSans-Book.woff') format('woff'); font-display: swap; }
@font-face { font-family: FiraMedium; src: url('/fonts/FiraSans-Medium.woff') format('woff'); font-display: swap; }
@font-face { font-family: MuseoSansBold; src: url('/fonts/MuseoSans_700.woff') format('woff'); font-display: swap; }
@font-face { font-family: MuseoSansMedium; src: url('/fonts/MuseoSans_500.woff2') format('woff2'); font-display: swap; }

:root {
  --ft-green-dark: hsl(162, 100%, 23%);
  --ft-green-bright: hsl(161, 100%, 50%);
  --ft-green-bright-hover: hsl(161, 100%, 43%);
  --ft-ink: hsl(138, 83%, 5%);
  --ft-black: hsl(0, 0%, 0%);
  --ft-gray-90: hsl(0, 0%, 90%);
  --ft-gray-83: hsl(0, 0%, 83%);
  --ft-gray-47: hsl(0, 0%, 47%);
  --ft-gray-30: hsl(0, 0%, 30%);
  --ft-gray-20: hsl(0, 0%, 20%);
  --ft-gray-95: hsl(0, 0%, 95%);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: FiraBook, sans-serif; background: hsl(0, 0%, 100%); color: var(--ft-black); }
a { color: var(--ft-green-dark); }
a:hover { color: var(--ft-green-bright-hover); }
input::placeholder, textarea::placeholder { color: var(--ft-gray-47); }
input:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--ft-green-bright); }

.page { min-height: 100vh; display: flex; flex-direction: column; }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px; background: var(--ft-gray-95); border-bottom: 1px solid var(--ft-gray-90);
}
.site-header img { height: 28px; }
.site-brand { display: flex; align-items: center; gap: 10px; }
.version-badge {
  font-family: FiraBook, sans-serif; font-size: 0.75rem; color: var(--ft-gray-47);
  padding: 2px 8px; border: 1px solid var(--ft-gray-90); border-radius: 999px;
}
.site-nav { display: flex; align-items: center; gap: 28px; }

.btn {
  font-family: MuseoSansMedium, sans-serif; font-size: 0.875rem; letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none; border-radius: 6px; cursor: pointer;
  display: inline-block;
}
.btn-nav { padding: 10px 20px; }
.btn-lg { padding: 12px 24px; text-transform: none; letter-spacing: normal; }
.btn-primary { background: var(--ft-green-bright); color: hsl(164, 100%, 3%); border: 2px solid var(--ft-green-bright); }
.btn-outline { border: 2px solid var(--ft-black); color: var(--ft-black); }

.hero {
  max-width: 1536px; margin: 0 auto; width: 100%;
  padding: 96px 48px 72px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
.eyebrow {
  font-family: MuseoSansMedium, sans-serif; font-size: 0.875rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ft-green-dark);
}
.hero-title {
  font-family: MuseoSansBold, sans-serif; font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.2;
  margin: 0; max-width: 780px; color: var(--ft-ink);
  font-weight: normal;
}
.hero-lead { font-family: FiraLight, sans-serif; font-size: 1.125rem; line-height: 1.6; max-width: 640px; margin: 0; color: var(--ft-gray-20); }
.hero-actions { display: flex; gap: 16px; margin-top: 8px; }

.capabilities {
  max-width: 1536px; margin: 0 auto; width: 100%;
  padding: 8px 48px 96px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.capability-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 8px; border: 1px solid var(--ft-gray-90); }
.capability-icon { width: 24px; height: 24px; color: var(--ft-green-dark); stroke-width: 1.5; }
.capability-title { font-family: MuseoSansBold, sans-serif; font-size: 1.125rem; color: var(--ft-ink); }
.capability-body { font-family: FiraBook, sans-serif; font-size: 0.9375rem; line-height: 1.5; color: var(--ft-gray-30); }

.request-section {
  background: var(--ft-gray-95); border-top: 1px solid var(--ft-gray-90); flex: 1;
  padding: 72px 48px; display: flex; justify-content: center;
}
.request-card-wrap { max-width: 560px; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.request-title { font-family: MuseoSansBold, sans-serif; font-size: 1.75rem; 
  margin: 0 0 4px; color: var(--ft-ink); 
  font-weight: normal;
}
.request-lead { font-family: FiraBook, sans-serif; font-size: 0.9375rem; line-height: 1.5; margin: 0 0 24px; color: var(--ft-gray-30); }

.card { padding: 32px; background: hsl(0, 0%, 100%); border-radius: 8px; border: 1px solid var(--ft-gray-90); }
.request-success { display: flex; flex-direction: column; gap: 8px; }
.request-success-title { font-family: MuseoSansBold, sans-serif; font-size: 1.25rem; color: var(--ft-ink); }
.request-success-body { font-family: FiraBook, sans-serif; font-size: 0.9375rem; line-height: 1.5; color: var(--ft-gray-30); }

.request-form { display: flex; flex-direction: column; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field span { font-family: FiraMedium, sans-serif; font-size: 0.875rem; color: var(--ft-black); }
.form-field input, .form-field textarea {
  font-family: FiraBook, sans-serif; font-size: 0.9375rem; padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--ft-gray-83); background: transparent;
}
.form-field textarea { resize: vertical; }
.form-error { color: hsl(0, 65%, 45%); font-size: 0.8125rem; margin: 0; }
.form-submit { align-self: flex-start; border: none; }

.site-footer {
  padding: 24px 48px; background: var(--ft-gray-95); border-top: 1px solid var(--ft-gray-90);
  display: flex; justify-content: space-between; align-items: center;
}
.site-footer span { font-family: FiraBook, sans-serif; font-size: 0.8125rem; color: var(--ft-gray-47); }
.site-footer a { font-family: FiraBook, sans-serif; font-size: 0.8125rem; text-decoration: none; }