/* Публичный сайт Sitelling. Стиль "стикеры" из макета Figma.
   Сначала телефон (390), с 1200 пикселей раскладка десктопа (1440).
   Тени только сплошные. Наклоны стоят в свойстве rotate, а не в transform, чтобы
   анимации в конце файла (translate, scale, transform) их не ломали. */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/onest-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/onest-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #10233c;
  --navy-70: #5b6b80;
  --cobalt: #2a54e0;
  --white: #fff;
  --blue: #dce6ff;
  --coral: #ffe0da;
  --sand: #fcebcf;
  --lilac: #e4dcff;
  --mint: #d6f2e4;
  --gut: 16px;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--sand);
  color: var(--navy);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.3;
  overflow-x: clip;
  padding-bottom: 84px; /* место под липкую кнопку телефона */
}
body.is-locked { overflow: hidden; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.on-dark :focus-visible, .foot :focus-visible, .sticky :focus-visible { outline-color: var(--blue); }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--white); border: 3px solid var(--navy); border-radius: 12px;
  padding: 10px 16px; font-weight: 700;
}
.skip:focus { top: 8px; }

.wrap { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: var(--gut); }

/* ---------- служебная строка Telegram (скрыта, пока нет канала) ---------- */
.tgbar { background: var(--white); border-bottom: 3px solid var(--navy); }
.tgbar__in {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 8px; font-size: 15px; font-weight: 800;
}
.tgbar__icon {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px;
  background: var(--cobalt); color: var(--white); font-size: 11px;
  border: 2.5px solid var(--navy); border-radius: 999px;
}
.tgbar__btn {
  background: var(--lilac); border: 2.5px solid var(--navy); border-radius: 999px;
  padding: 5px 14px; font-size: 14px; font-weight: 800; white-space: nowrap;
}

/* ---------- бегущая строка ---------- */
.marquee {
  display: flex; align-items: center; height: 44px; overflow: hidden; white-space: nowrap;
  background: var(--navy); color: var(--white);
  font-size: 15px; font-weight: 800; letter-spacing: .02em;
}
.marquee__track { display: flex; flex: none; width: max-content; }
.marquee__grp { display: flex; flex: none; gap: 28px; padding-right: 28px; }
.marquee .b { color: var(--blue); }

/* ---------- шапка ---------- */
.head { padding: 20px 0 8px; }
.head__in { display: flex; align-items: center; justify-content: space-between; }
.logo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px; background: var(--white);
  border: 3px solid var(--navy); border-radius: 14px; box-shadow: 4px 4px 0 var(--navy);
  font-size: 22px; font-weight: 800; letter-spacing: -.02em; rotate: 3deg;
}
.logo img { width: 42px; height: 30px; object-fit: contain; }
.head__nav, .btn.head__cta { display: none; }

.menubtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0;
  background: var(--lilac); border: 3px solid var(--navy); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--navy); rotate: -2deg;
}
.menubtn i { display: block; width: 22px; height: 3.5px; background: var(--navy); border-radius: 2px; }

/* ---------- меню телефона ---------- */
.menu { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--sand); }
.menu__in {
  display: flex; flex-direction: column; min-height: 100%; max-width: 560px; margin-inline: auto;
  padding: 20px var(--gut) 24px;
}
.menu__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; }
.menu__close {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  background: var(--lilac); border: 3px solid var(--navy); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--navy); rotate: -2deg;
  font-size: 26px; font-weight: 800; line-height: 1;
}
.menu__list { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.menu__item {
  display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 22px;
  border: 3.5px solid var(--navy); border-radius: 22px; box-shadow: 5px 5px 0 var(--navy);
  font-size: 24px; font-weight: 800; letter-spacing: -.01em;
}
.menu__item span { font-size: 26px; letter-spacing: 0; }
.menu__item:nth-child(1) { background: var(--lilac); rotate: 1deg; }
.menu__item:nth-child(2) { background: var(--mint); rotate: -1deg; }
.menu__item:nth-child(3) { background: var(--blue); rotate: 1deg; }
.menu__item:nth-child(4) { background: var(--coral); rotate: -1deg; }
.menu__mascot { align-self: flex-end; width: 118px; height: 161px; margin: 24px 4px 0 0; object-fit: contain; }
.menu__btns { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 12px; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 60px; padding: 0 30px; border: 3.5px solid var(--navy); border-radius: 18px;
  box-shadow: 5px 5px 0 var(--navy); font-size: 18px; font-weight: 800; white-space: nowrap;
  background: var(--cobalt); color: var(--white);
}
.btn--ghost { background: var(--white); color: var(--navy); }
.btn:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--navy); }
.btn--wide { width: 100%; }

/* ---------- метки над заголовками ---------- */
.label {
  display: inline-block; align-self: flex-start; padding: 6px 14px;
  border: 2.5px solid var(--navy); border-radius: 999px; background: var(--white);
  font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  rotate: 2deg;
}
.label--plain {
  padding: 0; border: 0; border-radius: 0; background: none; rotate: none;
  font-weight: 600; letter-spacing: .18em; color: var(--cobalt);
}
.on-dark .label--plain { color: var(--blue); }

.h2 { font-size: 38px; line-height: 42px; font-weight: 800; letter-spacing: -.02em; }
.services .h2 { font-size: 44px; line-height: 48px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- первый экран ---------- */
.hero { position: relative; overflow: clip; padding: 20px 0 56px; }
.hero__in { display: flex; flex-direction: column; gap: 24px; }
.hero__sparks { display: none; }
.hero__text { display: contents; }

.cardwrap { order: -1; }
.card {
  --u: calc(100cqw / 358);
  container-type: inline-size; position: relative; width: 100%; max-width: 520px; margin-inline: auto;
  aspect-ratio: 358 / 274; background: var(--white);
  border: 3.5px solid var(--navy); border-radius: 28px; box-shadow: 8px 8px 0 var(--navy);
  rotate: -1.5deg;
}
.card > * { position: absolute; }
.card__mascot {
  --l: 150.5; --t: 14.5; --w: 191; --h: 249;
  left: calc(var(--l) * var(--u)); top: calc(var(--t) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); object-fit: contain;
}
.card__tape {
  --cx: 139.6; --cy: 5.2;
  left: calc(var(--cx) * var(--u)); top: calc(var(--cy) * var(--u));
  width: calc(110 * var(--u)); height: calc(30 * var(--u));
  background: var(--lilac); border: 2.5px solid var(--navy);
  translate: -50% -50%; rotate: 6deg;
}
.card__burst {
  --cx: 287.8; --cy: -5; --bs: 100;
  left: calc(var(--cx) * var(--u)); top: calc(var(--cy) * var(--u));
  width: calc(var(--bs) * var(--u)); height: calc(var(--bs) * var(--u));
  font-size: calc(var(--bs) * var(--u) * .1333); font-weight: 800; letter-spacing: -.01em;
  translate: -50% -50%; rotate: -12deg;
}
.card__burst img { position: absolute; left: 1.25%; top: 0; width: 100.27%; height: 102.78%; max-width: none; }
.card__burst b { position: absolute; left: 15.6%; top: 41.4%; font-weight: 800; white-space: nowrap; }
.pin {
  left: calc(var(--cx) * var(--u)); top: calc(var(--cy) * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: calc(3 * var(--u)) solid var(--navy); border-radius: calc(14 * var(--u));
  box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 var(--navy);
  font-size: calc(var(--fs) * var(--u)); font-weight: 800; letter-spacing: -.01em; white-space: nowrap;
  translate: -50% -50%; rotate: var(--r);
}
.pin--1 { --cx: 88.6; --cy: 58.8; --r: 8deg; --fs: 20; background: var(--lilac); }
.pin--2 { --cx: 74.8; --cy: 247; --r: 5deg; --fs: 16; background: var(--mint); }
.pin--3 { --cx: 69.3; --cy: 135.1; --r: 4deg; --fs: 16; background: var(--blue); }
.pin--4 { display: none; }

.h1 {
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center;
  font-size: clamp(38px, 7vw, 60px); line-height: 1.16; font-weight: 800; letter-spacing: -.02em;
}
.h1 .w {
  padding-inline: .24em; border: 3px solid var(--navy); border-radius: 12px; box-shadow: 4px 4px 0 var(--navy);
  margin-block: 3px;
}
.h1 .w--1 { background: var(--lilac); rotate: 2deg; }
.h1 .w--2 { background: var(--cobalt); color: var(--white); rotate: -1.5deg; }
.h1 .w--3 { background: var(--mint); rotate: 1.5deg; }
.lead-text { font-size: 17px; line-height: 26px; font-weight: 500; }

.lead { display: flex; flex-direction: column; gap: 14px; }
.lead__field {
  display: block; height: 60px; padding: 0 20px; background: var(--white);
  border: 3.5px solid var(--navy); border-radius: 20px; box-shadow: 5px 5px 0 var(--navy);
}
.lead__field input {
  width: 100%; height: 100%; border: 0; padding: 0; background: none; outline: 0;
  font-size: 17px; font-weight: 500;
}
.lead__field:focus-within { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.lead__field input::placeholder { color: var(--navy-70); opacity: 1; }
.lead__note { font-size: 14px; line-height: 20px; color: var(--navy-70); }
.lead__status { font-size: 15px; line-height: 22px; font-weight: 700; }

/* ---------- блоки страницы ---------- */
.block { padding: 56px 0; }
.block__in { display: flex; flex-direction: column; gap: 20px; }
.block__head { display: flex; flex-direction: column; gap: 20px; }
.block__title { display: flex; flex-direction: column; gap: 20px; }
.block__lead { font-size: 17px; line-height: 25px; font-weight: 500; }

/* услуги */
.services { background: var(--navy); color: var(--white); }
.services .block__in { gap: 16px; }
.services__lead { font-size: 16px; line-height: 24px; }
.hint {
  align-self: flex-start; padding: 7px 14px; background: var(--mint); color: var(--navy);
  border: 2.5px solid var(--navy); border-radius: 999px; box-shadow: 3px 3px 0 var(--navy);
  font-size: 14px; font-weight: 800; letter-spacing: .02em; rotate: 1.5deg;
}
.svc-grid { display: none; }
.svc-acc { display: flex; flex-direction: column; gap: 12px; padding-block: 8px; }
.acc {
  --c: var(--lilac);
  background: var(--white); color: var(--navy);
  border: 3px solid var(--navy); border-radius: 24px; box-shadow: 4px 4px 0 var(--cobalt);
}
.acc__row {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none;
}
.acc__row::-webkit-details-marker { display: none; }
.num {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  background: var(--c); border: 2.5px solid var(--navy); border-radius: 999px;
  font-size: 15px; font-weight: 800;
}
.acc__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc__t b { font-size: 19px; line-height: 23px; font-weight: 800; letter-spacing: -.01em; }
.acc__t span { font-size: 16px; font-weight: 800; color: var(--cobalt); }
.plus {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  background: var(--cobalt); color: var(--white); border: 2.5px solid var(--navy); border-radius: 999px;
  font-size: 24px; font-weight: 800; line-height: 1;
}
.plus::before { content: "+"; }
.acc[open] .plus::before { content: "\2212"; }
.acc__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 2px 16px 14px; }
.acc__body p { font-size: 16px; line-height: 24px; color: var(--navy-70); }
.acc__go {
  padding: 10px 18px; background: var(--lilac); border: 2.5px solid var(--navy); border-radius: 999px;
  font-size: 15px; font-weight: 800;
}
.acc--accent { background: var(--cobalt); color: var(--white); box-shadow: 4px 4px 0 var(--blue); }
.acc--accent .num { background: var(--white); color: var(--navy); }
.acc--accent .acc__t span { color: var(--white); }
.acc--accent .plus { background: var(--white); color: var(--cobalt); }
.acc--accent .acc__body p { color: var(--white); }
.acc--accent .acc__go { background: var(--white); color: var(--navy); }
.c-lilac { --c: var(--lilac); } .c-mint { --c: var(--mint); } .c-blue { --c: var(--blue); }
.c-coral { --c: var(--coral); } .c-sand { --c: var(--sand); }

/* шаги */
.steps { background: var(--lilac); }
.steps__list { display: flex; flex-direction: column; gap: 16px; padding: 12px 0 8px; }
.step {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  background: var(--white); border: 3px solid var(--navy); border-radius: 24px; box-shadow: 5px 5px 0 var(--navy);
}
.step__top { display: flex; align-items: center; gap: 12px; }
.step__n {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  background: var(--cobalt); color: var(--white); border: 3px solid var(--navy); border-radius: 999px;
  font-size: 20px; font-weight: 800;
}
.step h3 { font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: -.01em; }
.step p { font-size: 16px; line-height: 24px; color: var(--navy-70); }

/* примеры */
.examples__side { display: flex; align-items: flex-end; gap: 8px; }
.examples__side img { flex: none; width: 82px; height: 112px; object-fit: contain; }
.examples__side p { font-size: 16px; line-height: 24px; font-weight: 500; }
.tiles { display: flex; flex-direction: column; gap: 20px; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px;
  border: 2px dashed var(--navy); border-radius: 28px;
}
.tile:nth-child(1) { background: var(--blue); }
.tile:nth-child(2) { background: var(--mint); }
.tile:nth-child(3) { background: var(--lilac); }
.tile__tag { padding: 6px 12px; background: var(--white); border-radius: 999px; font-size: 14px; font-weight: 600; }
.tile__num { font-size: 64px; line-height: 64px; font-weight: 800; letter-spacing: -.03em; }
.tile p { font-size: 16px; line-height: 24px; font-weight: 500; }

/* кто за этим */
.about { padding: 56px 0; background: var(--blue); }
.about__in { display: flex; flex-direction: column; gap: 20px; }
.photo {
  position: relative; height: 300px; display: grid; place-items: center;
  background: var(--white); border: 3px solid var(--navy); border-radius: 28px; box-shadow: 6px 6px 0 var(--navy);
  font-size: 17px; font-weight: 500; rotate: 1deg;
}
.photo__tape { display: none; }
.about__text { display: flex; flex-direction: column; gap: 20px; }
.about__text p { font-size: 17px; line-height: 26px; }
.facts { display: flex; flex-direction: column; gap: 12px; }
.facts li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 22px; font-weight: 500; }
.facts img { flex: none; width: 12px; height: 12px; margin-top: 5px; }
.about__btns { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }

/* подвал */
.foot { background: var(--navy); color: var(--white); padding: 32px 0 40px; }
.foot__in { display: flex; flex-direction: column; gap: 16px; }
.foot__top { display: flex; flex-direction: column; gap: 12px; }
.foot__logo { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.foot__links { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 22px; }
.foot__cta { display: none; }
.foot__line { height: 1px; background: rgba(255, 255, 255, .2); }
.req { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; font-style: normal; }
.req__row { display: flex; flex-direction: column; gap: 4px; }
.req__dot { display: none; }
.req a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* липкая кнопка телефона */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--navy);
}
.sticky a {
  display: flex; align-items: center; justify-content: center; height: 52px;
  background: var(--cobalt); color: var(--white); border: 3px solid var(--white); border-radius: 18px;
  font-size: 17px; font-weight: 800;
}

/* ============ десктоп, раскладка 1440 ============ */
@media (min-width: 1200px) {
  :root { --gut: 64px; }
  body { padding-bottom: 0; }
  .wrap { max-width: 1440px; }
  .sticky, .menubtn, .menu { display: none !important; }

  .tgbar__in { justify-content: center; gap: 16px; padding-block: 10px; font-size: 17px; }
  .tgbar__icon { width: 28px; height: 28px; font-size: 13px; }
  .tgbar__btn { padding: 6px 18px; font-size: 15px; }

  .marquee { height: 60px; font-size: 22px; }
  .marquee__grp { gap: 36px; padding-right: 36px; }

  .head { padding: 32px 0 20px; }
  .logo {
    gap: 10px; padding: 10px 20px 10px 16px; border-width: 3.5px; border-radius: 18px;
    box-shadow: 6px 6px 0 var(--navy); font-size: 28px;
  }
  .logo img { width: 55px; height: 40px; }
  .head__nav { display: flex; gap: 14px; align-items: center; }
  .head__nav a {
    padding: 10px 18px; border: 2.5px solid var(--navy); border-radius: 999px; box-shadow: 3px 3px 0 var(--navy);
    font-size: 16px; font-weight: 700;
  }
  .head__nav a:nth-child(1) { background: var(--lilac); rotate: 2deg; }
  .head__nav a:nth-child(2) { background: var(--mint); rotate: -2deg; }
  .head__nav a:nth-child(3) { background: var(--blue); rotate: 1.5deg; }
  .head__nav a:nth-child(4) { background: var(--coral); rotate: -2.5deg; }
  .btn.head__cta { display: inline-flex; min-height: 0; padding: 18px 28px; box-shadow: 6px 6px 0 var(--navy); rotate: -2deg; }
  .head__cta:active { transform: translate(2px, 2px); }

  .label {
    padding: 8px 16px; font-size: 15px; letter-spacing: .08em;
  }
  .label--plain { rotate: 2deg; padding: 8px 16px; border: 2.5px solid var(--navy); border-radius: 999px; background: var(--white); font-weight: 800; letter-spacing: .08em; color: var(--navy); }
  .on-dark .label--plain { border-color: var(--white); background: var(--lilac); color: var(--navy); }
  .label--mint { background: var(--mint) !important; }
  .h2 { font-size: clamp(52px, 5.3vw, 64px); line-height: 1.06; letter-spacing: -.03em; }
  .services .h2 { font-size: clamp(56px, 5.6vw, 80px); line-height: 1.05; }
  .block { padding: 96px 0; }
  .block__in { gap: 56px; }
  .block__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
  .block__title { flex: 1; min-width: 0; }
  .block__lead { font-size: 20px; line-height: 30px; flex: none; width: min(420px, 34%); }

  /* первый экран */
  .hero { overflow: visible; overflow-x: clip; padding: 36px 0 72px; }
  .hero__in { flex-direction: row; align-items: center; gap: 32px; }
  .hero__text { display: flex; flex-direction: column; gap: 30px; flex: 1 1 0; min-width: 0; max-width: 720px; }
  .cardwrap { order: 0; flex: none; width: clamp(452px, 39.1vw, 563px); padding: 9px 11.7px; }
  .card {
    --u: calc(100cqw / 540); max-width: none; aspect-ratio: 540 / 680; border-radius: 36px;
    box-shadow: 12px 12px 0 var(--navy); rotate: -2deg;
  }
  .card__mascot { --l: 101.5; --t: 96.5; --w: 411; --h: 535; }
  .card__tape { --cx: 269.1; --cy: 7.2; width: calc(150 * var(--u)); height: calc(38 * var(--u)); }
  .card__burst { --cx: 498.2; --cy: 35.8; --bs: 180; }
  .pin { padding: calc(12 * var(--u)) calc(20 * var(--u)); border-width: calc(3.5 * var(--u)); border-radius: calc(18 * var(--u)); box-shadow: calc(5 * var(--u)) calc(5 * var(--u)) 0 var(--navy); }
  .pin--1 { --cx: 56.6; --cy: 89.3; --fs: 26; }
  .pin--2 { --cx: 90.8; --cy: 618.5; --fs: 24; }
  .pin--3 { --cx: 77; --cy: 445.7; --fs: 24; }
  .pin--4 { display: block; --cx: 434.7; --cy: 627.4; --r: -5deg; --fs: 24; background: var(--blue); }

  .h1 { max-width: 10.4em; gap: 8px 12px; font-size: clamp(50px, 4.86vw, 70px); line-height: 1.115; letter-spacing: -.03em; }
  .h1 .w { border-width: 3.5px; border-radius: 22px; box-shadow: 6px 6px 0 var(--navy); padding-inline: 16px; margin-block: 5px; }
  .lead-text { font-size: 22px; line-height: 32px; }
  .lead {
    flex-direction: row; align-items: center; gap: 8px; padding: 12px 12px 12px 28px;
    background: var(--white); border: 3.5px solid var(--navy); border-radius: 26px; box-shadow: 8px 8px 0 var(--navy);
  }
  .lead__field { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .lead__field input { height: 56px; font-size: 19px; }
  .lead .btn { flex: none; width: auto; min-height: 71px; padding: 0 30px; font-size: 19px; border-radius: 16px; box-shadow: none; }
  .lead .btn:active { box-shadow: none; }
  .lead__note { display: none; }
  .lead__status { grid-column: 1 / -1; }

  .hero__sparks { display: block; }
  .spark { position: absolute; left: calc(50% + var(--x) * 1px); top: calc(var(--y) * 1px); translate: -50% -50%; rotate: var(--r, 0deg); }
  .spark--1 { --x: 4.3; --y: 129.6; --r: -15deg; }
  .spark--2 { --x: 670.7; --y: 396.5; --r: 10deg; }
  .spark--3 { --x: -670; --y: 15.2; --r: -10deg; }
  .spark--4 { --x: -675; --y: 470.8; }
  .spark--5 { --x: 361.8; --y: -62; --r: -20deg; }

  /* услуги */
  .services .block__in { gap: 56px; }
  .services__lead { font-size: 20px; line-height: 30px; }
  .hint, .svc-acc { display: none; }
  .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(318px, auto); gap: 24px; }
  .svc {
    --c: var(--lilac);
    display: flex; flex-direction: column; gap: 16px; padding: 28px;
    background: var(--white); color: var(--navy);
    border: 3.5px solid var(--navy); border-radius: 28px; box-shadow: 6px 6px 0 var(--cobalt);
  }
  .svc__top { display: flex; align-items: center; gap: 14px; }
  .svc .num { width: 46px; height: 46px; font-size: 16px; }
  .svc h3 { font-size: 26px; line-height: 30px; font-weight: 800; letter-spacing: -.01em; }
  .svc p { font-size: 17px; line-height: 26px; color: var(--navy-70); }
  .svc__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
  .svc__price { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
  .svc__go {
    display: grid; place-items: center; flex: none; width: 52px; height: 52px;
    background: var(--cobalt); color: var(--white); border-radius: 999px; font-size: 24px; font-weight: 800;
  }
  .svc--accent { background: var(--cobalt); color: var(--white); box-shadow: 6px 6px 0 var(--blue); }
  .svc--accent .num { background: var(--white); color: var(--navy); }
  .svc--accent p { color: var(--white); }
  .svc--accent .svc__go { background: var(--white); color: var(--cobalt); }

  /* шаги */
  .steps__list { flex-direction: row; gap: 24px; padding: 0; }
  .step { flex: 1; min-width: 0; gap: 16px; padding: 28px; border-width: 3.5px; border-radius: 28px; box-shadow: 6px 6px 0 var(--navy); }
  .step__top { display: block; }
  .step__n { width: 56px; height: 56px; font-size: 24px; }
  .step h3 { font-size: 26px; line-height: 30px; }
  .step p { font-size: 17px; line-height: 26px; }
  .steps__list .step { align-self: stretch; }
  .step { flex-direction: column; }

  /* примеры */
  .examples__side { flex-direction: row-reverse; gap: 12px; }
  .examples__side img { width: 128px; height: 174px; }
  .examples__side p { width: 320px; font-size: 18px; line-height: 26px; }
  .tiles { flex-direction: row; gap: 24px; }
  .tile { flex: 1; min-width: 0; height: 380px; gap: 20px; padding: 32px; border-radius: 32px; }
  .tile__tag { padding: 8px 14px; }
  .tile__num { font-size: clamp(80px, 7.8vw, 112px); line-height: 1.036; letter-spacing: -.04em; }
  .tile p { margin-top: auto; font-size: 17px; line-height: 25px; }

  /* кто за этим */
  .about { padding: 96px 0; }
  .about__in { flex-direction: row; align-items: center; gap: 80px; }
  .photo {
    flex: none; width: 480px; height: 580px; margin: 0 10px; border-width: 3.5px; border-radius: 36px;
    box-shadow: 10px 10px 0 var(--navy); font-size: 18px; rotate: 2deg;
  }
  .photo__tape {
    display: block; position: absolute; left: 50%; top: -30px; width: 150px; height: 38px;
    background: var(--lilac); border: 2.5px solid var(--navy); translate: -50% 0; rotate: -4deg;
  }
  .about__text { flex: 1; min-width: 0; gap: 28px; }
  .about__text .h2 { font-size: clamp(46px, 4.2vw, 60px); line-height: 1.07; }
  .about__text p { font-size: 22px; line-height: 33px; }
  .facts { gap: 14px; }
  .facts li { align-items: center; gap: 14px; font-size: 19px; line-height: 24px; }
  .facts img { width: 14px; height: 14px; margin-top: 0; }
  .about__btns { flex-direction: row; flex-wrap: wrap; gap: 20px; }
  .about__btns .btn { min-height: 0; padding: 20px 30px; font-size: 19px; box-shadow: 6px 6px 0 var(--navy); }
  .about__btns .btn:nth-child(1) { rotate: 1deg; }
  .about__btns .btn:nth-child(2) { rotate: -1.5deg; }

  /* подвал */
  .foot { padding: 48px 0; }
  .foot__in { gap: 28px; }
  .foot__top { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .foot__logo { font-size: 34px; letter-spacing: -.02em; }
  .foot__links { flex-direction: row; gap: 36px; font-size: 16px; }
  .foot__cta { display: inline-flex; min-height: 0; padding: 19px 30px; background: var(--cobalt); border-color: var(--white); box-shadow: 5px 5px 0 var(--blue); }
  .req { font-size: 15px; line-height: 22px; gap: 6px; }
  .req__row { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .req__dot { display: inline; }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .spark--5 { display: none; }
}

/* Низкие окна десктопа, например ноутбук с масштабом 125 процентов, это около
   740 пикселей по высоте. В макете первый экран рассчитан на 900, поэтому форма
   и низ карточки уезжали за край. Здесь первый экран сжимается по высоте окна. */
@media (min-width: 1200px) and (max-height: 820px) {
  .head { padding: 20px 0 8px; }
  .hero { padding: 36px 0 24px; }
  .hero__text { gap: 20px; }
  .h1 { font-size: clamp(46px, 8.4vh, 70px); }
  .lead-text { font-size: 20px; line-height: 30px; }
  .cardwrap { width: clamp(340px, calc((100vh - 232px) * .794 + 24px), 563px); }
  .lead__field input { height: 48px; }
  .lead .btn { min-height: 60px; }
}

/* ============ телефон, узкие экраны ============ */
@media (max-width: 359px) {
  .h1 { font-size: 32px; }
  .btn { padding: 0 16px; font-size: 16px; }
}

/* ============ анимации ============
   Двигаем только transform, opacity, translate, scale и rotate, поэтому страница не
   перерисовывается, а только сдвигается на видеокарте. Всё это работает лишь если у
   человека не включено "уменьшить движение". Стартовые состояния прячут блоки только
   при работающем скрипте (класс js на html), без скрипта всё видно сразу. */
@media (prefers-reduced-motion: no-preference) {

  /* бегущая строка. Внутри две одинаковые половины, сдвиг ровно на половину, шва нет */
  .marquee__track { animation: marquee 26s linear infinite; }
  @keyframes marquee { to { translate: -50% 0; } }

  /* первый экран собирается по словам, слова-стикеры "прилепляются" */
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } }
  @keyframes stamp { from { opacity: 0; transform: scale(1.7) translateY(-12px); } }
  @keyframes pop { from { opacity: 0; transform: scale(.3); } }
  @keyframes cardIn { from { opacity: 0; transform: translateY(44px) scale(.95); } }
  @keyframes slideUp { from { transform: translateY(100%); } }
  @keyframes fadeIn { from { opacity: 0; } }

  .h1 > span { animation: rise .7s cubic-bezier(.2, .8, .2, 1) backwards; }
  .h1 > span:nth-child(1) { animation-delay: .05s; }
  .h1 > span:nth-child(2) { animation-delay: .13s; }
  .h1 > span:nth-child(3) { animation-delay: .21s; }
  .h1 > span:nth-child(4) { animation-delay: .29s; }
  .h1 > span:nth-child(5) { animation-delay: .45s; }
  .h1 > span:nth-child(6) { animation-delay: .53s; }
  .h1 > span:nth-child(7) { animation-delay: .65s; }
  .h1 > span:nth-child(8) { animation-delay: .85s; }
  .h1 .w { animation-name: stamp; animation-duration: .6s; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  .lead-text { animation: rise .7s ease-out .8s backwards; }
  .lead { animation: rise .7s ease-out .95s backwards; }
  .lead__status { animation: rise .3s ease-out; }

  /* карточка с маскотом, за ней по очереди выскакивают стикеры */
  .cardwrap { animation: cardIn .85s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
  .card__tape { animation: pop .45s cubic-bezier(.34, 1.56, .64, 1) .55s backwards; }
  .card__mascot { animation: pop .7s cubic-bezier(.34, 1.56, .64, 1) .35s backwards, float 4.2s ease-in-out 1.1s infinite alternate; }
  .pin { animation: pop .5s cubic-bezier(.34, 1.56, .64, 1) backwards, bob 3.4s ease-in-out var(--bd, 2s) infinite alternate; }
  .pin--1 { animation-delay: .7s, 2s; }
  .pin--3 { animation-delay: .85s, 2.6s; }
  .pin--2 { animation-delay: 1s, 3.1s; }
  .pin--4 { animation-delay: 1.15s, 2.3s; }
  .card__burst { animation: pop .55s cubic-bezier(.34, 1.56, .64, 1) 1.25s backwards, wiggle 5s ease-in-out 1.9s infinite; }
  @keyframes float { to { transform: translateY(-10px); } }
  @keyframes bob { to { transform: translateY(-5px); } }
  @keyframes wiggle { 0%, 100% { rotate: -12deg; } 50% { rotate: -4deg; } }

  /* искры мерцают */
  .spark { animation: twinkle 3.2s ease-in-out infinite; }
  .spark--2 { animation-delay: .6s; }
  .spark--3 { animation-delay: 1.1s; }
  .spark--4 { animation-delay: 1.7s; }
  .spark--5 { animation-delay: 2.2s; }
  @keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .5; } }

  .sticky { animation: slideUp .5s cubic-bezier(.2, .8, .2, 1) 1.2s backwards; }

  /* блоки ниже первого экрана выезжают, когда до них докрутили. Скрипт вешает
     класс reveal и задержку --d, чтобы карточки шли по очереди */
  .js .reveal { opacity: 0; translate: 0 32px; }
  .js .reveal--pop { translate: none; scale: .6; }
  .js .reveal.in {
    opacity: 1; translate: 0 0; scale: 1;
    transition: opacity .6s ease-out var(--d, 0ms), translate .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms),
      scale .55s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0ms), transform .15s ease-out, box-shadow .15s ease-out;
  }

  /* раскрытие строки услуги на телефоне */
  .acc[open] > .acc__body { animation: rise .3s ease-out; }

  /* меню телефона */
  .menu:not([hidden]) { animation: fadeIn .2s ease-out; }
  .menu:not([hidden]) .menu__item { animation: rise .45s cubic-bezier(.2, .8, .2, 1) backwards; }
  .menu__item:nth-child(1) { animation-delay: .05s; }
  .menu__item:nth-child(2) { animation-delay: .11s; }
  .menu__item:nth-child(3) { animation-delay: .17s; }
  .menu__item:nth-child(4) { animation-delay: .23s; }
  .menu:not([hidden]) .menu__mascot { animation: pop .5s cubic-bezier(.34, 1.56, .64, 1) .3s backwards; }

  /* наведение. Всё приподнимается, тень становится длиннее */
  .btn, .head__nav a, .logo, .svc, .step, .tile, .svc__go, .plus {
    transition: transform .15s ease-out, box-shadow .15s ease-out, rotate .15s ease-out;
  }
  @media (hover: hover) {
    .btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--navy); }
    .btn.head__cta:hover, .about__btns .btn:hover { box-shadow: 8px 8px 0 var(--navy); }
    .foot__cta:hover { box-shadow: 7px 7px 0 var(--blue); }
    .lead .btn:hover { box-shadow: none; transform: translateY(-2px); }
    .btn:active, .btn.head__cta:active, .about__btns .btn:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--navy); }
    .foot__cta:active { box-shadow: 3px 3px 0 var(--blue); }
    .lead .btn:active { box-shadow: none; transform: translateY(1px); }
    .head__nav a:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--navy); rotate: 0deg; }
    .logo:hover { transform: translateY(-2px) scale(1.03); rotate: 1deg; }
    .svc:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--cobalt); }
    .svc--accent:hover { box-shadow: 9px 9px 0 var(--blue); }
    .svc:hover .svc__go { transform: translate(2px, -2px) scale(1.12); }
    .step:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--navy); }
    .tile:hover { transform: translateY(-4px); rotate: 1deg; }
    .acc__row:hover .plus { transform: scale(1.12); }
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}