@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url("fonts/roboto-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url("fonts/roboto-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url("fonts/roboto-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url("fonts/roboto-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Roboto Slab"; font-weight: 700; font-display: swap; src: url("fonts/roboto-slab-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto Slab"; font-weight: 700; font-display: swap; src: url("fonts/roboto-slab-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

:root {
  --red: #d50910;
  --red-dark: #b01f24;
  --ink: #102136;
  --text: #2a2b2d;
  --muted: #55606e;
  --line: #e7ebee;
  --soft: #f3f5f7;
  --white: #ffffff;
  --gutter: 20px;
  --slab: "Roboto Slab", Georgia, serif;
  --body: "Roboto", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--white);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}

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

a { color: var(--red-dark); text-underline-offset: 0.18em; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2 { color: var(--ink); font-family: var(--slab); font-weight: 700; text-wrap: balance; }

.wrap { width: min(100%, 1040px); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { width: min(100%, 760px); }

.top { padding-block: 14px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--slab);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.brand img { width: 42px; height: 42px; }

.hero__photo { width: 100%; aspect-ratio: 900 / 617; object-fit: cover; }

.hero__text { padding-block: 28px 36px; }

.hero h1 { font-size: clamp(30px, 8.2vw, 50px); line-height: 1.12; }

.hero__lead { margin-top: 14px; font-size: 19px; }

.way { padding-block: 36px; border-top: 1px solid var(--line); }

.way h2 { font-size: clamp(25px, 6.4vw, 32px); line-height: 1.2; }

.way__body { margin-top: 12px; }

.way__body p + p { margin-top: 12px; }

.way--first { background: var(--soft); border-top: 0; }

.way--dark { background: var(--ink); border-top: 0; color: #dfe6ee; }
.way--dark h2 { color: var(--white); }

.button {
  display: block;
  margin-top: 22px;
  padding: 15px 12px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.button:hover { background: var(--red-dark); }

.way--dark .button:focus-visible { outline-color: var(--white); }

.foot { padding-block: 28px 36px; background: var(--soft); font-size: 15px; }

.foot__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; }

.page { padding-block: 16px 56px; }

.back { display: inline-block; padding-block: 6px; font-size: 16px; }

.page h1 { margin-top: 10px; font-size: clamp(30px, 8vw, 44px); line-height: 1.14; }

.page__intro { margin-top: 14px; }
.page__intro p + p { margin-top: 12px; }

.draft {
  margin-top: 24px;
  padding: 12px 16px;
  border-left: 4px solid var(--red);
  background: var(--soft);
  font-size: 16px;
}

.group { margin-top: 34px; }

.group h2 { padding-bottom: 8px; border-bottom: 2px solid var(--ink); font-size: 23px; line-height: 1.25; }

.questions { counter-reset: none; padding: 0; list-style: none; }

.questions li {
  position: relative;
  padding: 13px 0 13px 40px;
  border-bottom: 1px solid var(--line);
}

.questions li::before {
  counter-increment: question;
  content: counter(question);
  position: absolute;
  left: 0;
  top: 13px;
  width: 30px;
  color: var(--muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  line-height: 1.8;
}

.upitnik { counter-reset: question; }

.question { color: var(--ink); font-weight: 500; }

.meta { color: var(--muted); font-size: 15px; }

.options { margin-top: 4px; font-size: 16px; }

.field { margin-top: 20px; padding: 0; border: 0; }

.field legend { padding: 0; }

.field > label, .field legend { color: var(--ink); font-weight: 500; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid #8a94a3;
  border-radius: 6px;
  background: var(--white);
  color: var(--text);
  font: inherit;
}

.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }

.field > .choice, .field > label.choice { font-weight: 400; color: var(--text); }

.choice { display: flex; align-items: flex-start; gap: 10px; padding-block: 7px; }

.choice input { flex: none; width: 20px; height: 20px; margin-top: 4px; accent-color: var(--red); }

.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

form .button { border: 0; width: 100%; cursor: pointer; font-family: inherit; }

.prose h2 { margin-top: 28px; font-size: 22px; line-height: 1.25; }

.prose p { margin-top: 8px; }

.account { margin-top: 18px; padding: 18px; background: var(--soft); }

.account__label { color: var(--muted); font-size: 15px; }

.account__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }

.account__number {
  color: var(--ink);
  font-family: var(--slab);
  font-size: clamp(21px, 6vw, 26px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.copy {
  padding: 8px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.copy:hover { background: var(--ink); color: var(--white); }

.recipient { margin-top: 24px; }
.recipient strong { color: var(--ink); font-weight: 500; }

.note { margin-top: 24px; }

@media (min-width: 720px) {
  :root { --gutter: 32px; }

  .button { display: inline-block; padding-inline: 30px; }

  form .button { width: auto; }

  .hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }

  .hero picture { order: 2; }

  .hero__text { width: min(100%, 520px); margin: 0 0 0 auto; padding-block: 32px; }

  .hero h1 { font-size: clamp(30px, 3.6vw, 46px); }

  .way { padding-block: 52px; }

  .way h2, .way__body { max-width: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}