/* IBM Plex Sans 400/500/600 — self-hosted через Encore.
   В макете шрифт подключался с Google Fonts; здесь он локальный:
   минус две сторонние TLS-сессии и минус render-blocking запрос на критическом пути.
   Начертания и метрики те же. Italic и Mono не подключаем — на странице не используются.

   Файлы кладёт `npm run assets` в public/fonts под неизменными именами:
   хеш им не нужен, зато постоянный адрес позволяет прописать <link rel="preload">. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-400-normal.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;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-500-normal.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;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-600-normal.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 {
  --accent: #2a5e5c;
  --accent-hover: #23504e;
  --accent-press: #1c4241;
  --accent-soft: #e6eeed;
  --accent-line: #3e8b85;

  --ink: #14201f;
  --ink-2: #3d4a49;
  --ink-3: #6d7877;

  --bg: #f5f6f7;
  --surface: #fff;
  --line: #e2e5e6;
  --line-strong: #cdd2d3;
  --danger: #c0392b;

  --r: 6px;
  --pad: 24px;
  --maxw: 1180px;
}

* { box-sizing: border-box }

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: 'tnum' 1;
  text-wrap: pretty;
}

img { display: block; max-width: 100% }
.shot img, .step-media img, .form-aside img { width: 100%; height: auto }

a { color: var(--accent); text-decoration: none }
a:hover { color: var(--accent-hover); text-decoration: underline }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) }

h1, h2, h3 { margin: 0; letter-spacing: -.015em; line-height: 1.12; font-weight: 600 }
h1 { font-size: clamp(30px, 4.4vw, 52px) }
h2 { font-size: clamp(25px, 3vw, 36px) }
h3 { font-size: 19px; line-height: 1.3 }
p { margin: 0 }

.sect { padding: clamp(56px, 8vw, 112px) 0 }
.sect + .sect { border-top: 1px solid var(--line) }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1 }

/* Видимый фокус для клавиатуры — в макете не нарисован, но без него страница
   недоступна с клавиатуры. Цвет берётся из токенов, новых не вводим. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* Ссылка «к содержимому»: вне экрана, проявляется только при табе. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r);
  font-size: 15px;
  font-weight: 500;
}
.skip-link:focus {
  left: var(--pad);
  top: 10px;
  color: #fff;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(245, 246, 247, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 58px; gap: 16px }

/* Логотип вместо набранного текста «Microsales».
   32 px подобраны так, чтобы высота прописных в словесной части совпала
   с прежним текстом 19px/600: в макете логотипа она занимает 381 из 935 единиц,
   то есть 0.41 высоты, а cap-height IBM Plex Sans — 0.698 em.
   Ширина считается из width/height у <img>, поэтому вёрстка не прыгает. */
.brand { display: flex; align-items: center; gap: 10px }
.brand .logo { width: auto; height: 32px }

.top .brand { font-weight: 600; font-size: 19px; letter-spacing: -.02em }
.top .brand span { color: var(--ink-3); font-weight: 400; font-size: 14px; letter-spacing: 0 }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 500;
  font-size: 17px;
  border: 0;
  border-radius: var(--r);
  padding: 15px 28px;
  min-height: 52px;
  cursor: pointer;
  transition: background .12s ease, transform .06s ease;
}
.btn:hover { background: var(--accent-hover); color: #fff; text-decoration: none }
.btn:active { background: var(--accent-press); transform: translateY(1px) }
.btn:disabled { background: #8ba7a6; cursor: default; transform: none }
.btn-sm { padding: 9px 18px; min-height: 38px; font-size: 15px }

.hero { padding: clamp(44px, 6vw, 84px) 0 clamp(56px, 7vw, 96px) }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: stretch;
}
.hero-grid > div:first-child { display: flex; flex-direction: column; justify-content: center }

.hero .shot { align-self: stretch }
.hero .shot img { height: 100%; min-height: 420px; object-fit: cover; object-position: 58% 50% }

.hero p.lede { margin-top: 22px; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 34em }
.hero .cta-row { margin-top: 34px }

.counter { margin-top: 26px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-height: 44px }
.counter .val { font-size: clamp(30px, 3.6vw, 42px); font-weight: 600; color: var(--accent-line); letter-spacing: -.02em; line-height: 1 }
.counter .cap { font-size: 14px; color: var(--ink-3) }
.counter[hidden] { display: none }

.skel {
  display: inline-block;
  width: 158px;
  height: 34px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e6e9ea 25%, #eef1f1 50%, #e6e9ea 75%);
  background-size: 280% 100%;
  animation: sh 1.4s linear infinite;
}
@keyframes sh {
  0% { background-position: 120% 0 }
  100% { background-position: -40% 0 }
}

.shot { border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; background: #fff }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin-top: 44px }

.step { border-top: 2px solid var(--accent); padding-top: 18px }
.step .k { display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .04em }
.step .k svg { width: 20px; height: 20px; stroke-width: 1.6 }
.step h3 { margin: 12px 0 8px }
.step p { color: var(--ink-2); font-size: 16px }

.step-media {
  margin-top: clamp(36px, 5vw, 60px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 833/234;
}
.step-media img { height: 100%; object-fit: cover; object-position: 50% 56% }

.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap }

.seg { display: flex; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 3px; gap: 3px }
.seg button {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: 4px;
  padding: 8px 16px;
  min-height: 36px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.seg button:hover { background: var(--accent-soft) }
.seg button[aria-pressed=true] { background: var(--accent); color: #fff }

.frame {
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(20, 32, 34, .05), 0 12px 32px -18px rgba(20, 32, 34, .28);
  overflow: hidden;
  line-height: 0;
}
.stage { position: relative }
.stage img { display: block; width: 100%; height: auto; aspect-ratio: 2880/1800 }

/* Выноски. Координаты привязаны к пропорции кадра 2880×1800 —
   при замене скриншота их надо пересчитать. */
.note { position: absolute; display: flex; align-items: center; gap: 0; z-index: 2 }
.note .txt {
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  padding: 8px 11px;
  border-radius: 4px;
  max-width: 200px;
  flex: 0 0 auto;
}
.note .ln { height: 1px; background: rgba(20, 32, 34, .45); flex: 1 1 auto }
.note .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin-left: -1px; flex: 0 0 auto }

.n1 { left: 3%; right: 24.5%; top: 27.4%; transform: translateY(-50%) }
.n2 { left: 3%; right: 23.5%; top: 47.2%; transform: translateY(-50%) }
.n3 { left: 3%; right: 23.5%; top: 64.8%; transform: translateY(-50%) }

.mobile-shot { display: none }
.crop { position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r); background: #fff; line-height: 0 }
.crop img { display: block; position: static; width: 100%; height: auto; max-width: 100% }
.crop-cap { margin: 14px auto 0; text-align: center; font-size: 14px; color: var(--ink-3) }

/* Лайтбокс: кадр в натуральную ширину с горизонтальной прокруткой. */
.lb {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 18, 18, .9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.lb[open-state=on] { display: flex }
.lb .inner { width: 100%; max-height: 92vh; overflow: auto; -webkit-overflow-scrolling: touch }
.lb img { width: 1440px; height: auto; max-width: none; border-radius: 4px }
.lb .close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #fff;
  color: var(--ink);
  border: 0;
  border-radius: var(--r);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
}

.bens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: 44px }
.ben { border-top: 1px solid var(--line-strong); padding-top: 22px }
.ben p { color: var(--ink-2); font-size: 16px; margin-top: 8px }
.ben .big {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 600;
  color: var(--accent-line);
  letter-spacing: -.02em;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}
.ben strong { font-weight: 600; color: var(--ink) }

/* Единственная тёмная секция на странице. */
.price { position: relative; overflow: hidden; background: #14201f }
.price > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: grayscale(.35) }
.price .wrap { position: relative }
.price .amt { font-size: clamp(34px, 5.4vw, 64px); font-weight: 600; color: #fff; letter-spacing: -.025em; line-height: 1.05 }
.price .fine { margin-top: 22px; color: #c3cccb; font-size: 15px; max-width: 44em }
.price .btn { margin-top: 36px; background: #fff; color: var(--ink) }
.price .btn:hover { background: #e9eded; color: var(--ink) }

.form-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start }
.form-aside img { border: 1px solid var(--line-strong); border-radius: var(--r) }
.form-aside .aside-photo { margin-top: 28px }
.form-aside p { margin-top: 20px; color: var(--ink-2); font-size: 16px }

form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(22px, 3vw, 34px);
  display: grid;
  gap: 18px;
}
label { display: block; font-size: 14px; font-weight: 500; color: var(--ink-2); margin-bottom: 7px }

input[type=text], input[type=tel], input[type=number] {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 14px 14px;
  min-height: 52px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
input[aria-invalid=true] { border-color: var(--danger) }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--ink-3); line-height: 1.45 }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); flex: 0 0 auto }

.fine { font-size: 14px; color: var(--ink-3) }

.msg { font-size: 15px; border-radius: var(--r); padding: 14px 16px; display: none }
.msg[data-on] { display: block }
.msg.ok { background: var(--accent-soft); color: var(--accent-press) }
.msg.err { background: #fbeceb; color: var(--danger) }

footer { border-top: 1px solid var(--line); padding: 34px 0 44px; font-size: 14px; color: var(--ink-3) }
footer .wrap { display: flex; gap: 12px 28px; flex-wrap: wrap; align-items: center }
footer .brand { font-size: 16px; color: var(--ink) }
footer .brand .logo { height: 27px } /* тот же расчёт для 16 px */

/* Брейкпоинты макета: 900 px и 560 px. Проверять обязательно на 360 px. */

@media (max-width: 900px) {
  .hero-grid, .form-grid { grid-template-columns: 1fr }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .bens { grid-template-columns: 1fr; gap: 26px }
  .note { display: none }
  .frame { display: none }
  .mobile-shot { display: block; margin-top: 26px }
  .top .btn { display: none }
}

@media (max-width: 560px) {
  :root { --pad: 18px }
  body { font-size: 16px }
  .steps { grid-template-columns: 1fr; gap: 22px }
  .cta-row .btn { width: 100% }
}

/* адаптив последним — перекрывает секционные правила */