:root {
  --bg: #f4f7fb;
  --paper: #ffffff;
  --ink: #14202e;
  --mute: #5b6b7c;
  --line: #d5deea;
  --blue: #2a5f8f;
  --blue-s: #e6eef6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Outfit", sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0;
}
.mark {
  display: flex; align-items: center; gap: 12px; font-weight: 600;
}
.mbox {
  width: 40px; height: 40px; background: var(--blue); color: #fff;
  display: grid; place-items: center; font-weight: 700; letter-spacing: .04em;
}
.mark small { display: block; font-weight: 400; color: var(--mute); font-size: 12px; }
.nav { display: flex; gap: 22px; color: var(--mute); font-size: 14px; }
.nav a:hover { color: var(--blue); }
.cta {
  background: var(--blue); color: #fff; padding: 10px 16px; font-size: 14px; font-weight: 600;
}

.hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px;
  padding: 36px 0 56px; align-items: end;
}
h1 { font-size: clamp(38px, 5vw, 56px); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.lead { color: var(--mute); font-size: 18px; margin-top: 16px; max-width: 46ch; }
.hero-panel {
  background: var(--paper); border: 1px solid var(--line); padding: 28px;
}
.hero-panel ol { margin-left: 18px; color: var(--mute); }
.hero-panel li { margin: 8px 0; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--paper); }
.metric { padding: 22px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric b { display: block; font-size: 28px; color: var(--blue); font-weight: 600; }
.metric span { font-size: 13px; color: var(--mute); }

section { padding: 56px 0; }
h2 { font-size: 32px; font-weight: 500; margin-bottom: 12px; }
h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.sub { color: var(--mute); max-width: 62ch; margin-bottom: 24px; }

.services { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.svc { background: var(--paper); padding: 24px; border-left: 3px solid var(--blue); }
.svc p { color: var(--mute); }

.article { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.article p { color: #3d4c5c; margin-bottom: 14px; }
.faq details { background: var(--paper); border: 1px solid var(--line); padding: 14px 16px; margin-bottom: 8px; }
.faq summary { cursor: pointer; font-weight: 600; }

form { display: grid; gap: 12px; }
label { font-size: 13px; color: var(--mute); }
input, select, textarea { width: 100%; border: 1px solid var(--line); padding: 11px; font: inherit; background: #fff; }
textarea { min-height: 120px; }
button.cta { border: 0; cursor: pointer; justify-self: start; font: inherit; }
.ok { display: none; color: var(--blue); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.note { background: var(--blue-s); padding: 22px; }

footer { border-top: 1px solid var(--line); padding: 32px 0 48px; font-size: 13px; color: var(--mute); }
.foot { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 20px; }
.legal { display: flex; gap: 14px; margin-top: 8px; }

@media (max-width: 800px) {
  .hero, .services, .article, .split, .foot, .metrics { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--line); }
  .top { flex-wrap: wrap; gap: 12px; }
}