/* ═══════════════════════════════════════════════════════════════
   Agenta — стили лендинга
   Брейкпоинты как в оригинале: 1900 / 1200 / 640
   (в Tilda ведро res-1200 → max-width:1899, res-640 → 1199, res-320 → 639)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* цвет */
  --ink:        #1e1e1e;
  --ink-900:    #121212;
  --surface:    #f2f6fa;
  --panel:      #2f2f2f;
  --blue:       #2891dc;
  --blue-hero:  #2984c5;
  --body-text:  #313538;
  --muted:      #7a7a7a;
  --muted-tag:  #7c7c7c;
  --on-dark:    #bebebe;
  --on-dark-2:  #aeaeae;
  --on-dark-3:  #adadad;
  --hero-lead:  #bbc4c5;
  --line:       #d8dee0;
  --footer-ink: #737373;
  --danger:     #fa876b;

  /* сетка */
  --page: 1800px;
  --gap:  100px;          /* поля страницы */
  --inset: 60px;          /* внутренние поля карточек */

  --radius:       32px;
  --radius-panel: 26px;
  --radius-pitch: 32px;

  /* высоты карточек-подложек */
  --h-hero:     740px;
  --h-projects: 612px;
  --h-pitch:    540px;

  /* типографика */
  --h1: 72px;
  --h2: 64px;
  --h3: 48px;
  --h4: 32px;
  --card-title: 32px;
  --lead:  24px;
  --text:  20px;
  --small: 16px;
  --tiny:  14px;

  /* карусель */
  --card-w:   537px;
  --card-gap: 26px;
  --card-img: 217px;
  --card-pad: 32px;
  --step-pad: 40px;

  --section-gap: 160px;
}

@media (max-width: 1899px) {
  :root {
    --page: 1200px;
    --gap: 60px;
    --inset: 40px;
    --h1: 64px; --h2: 48px; --h3: 40px;
    --card-title: 28px;
    --lead: 18px; --text: 18px;
    --h-hero: 610px; --h-projects: 579px; --h-pitch: 540px;
    --card-w: 360px; --card-gap: 20px; --card-img: 160px;
    --card-pad: 24px; --step-pad: 32px;
    --radius-pitch: 24px;
    --section-gap: 120px;
  }
}

@media (max-width: 1199px) {
  :root {
    --gap: 40px;
    --inset: 30px;
    --h1: 41px; --h2: 40px; --h3: 32px; --h4: 28px;
    --card-title: 28px;
    --lead: 16px; --text: 16px; --small: 14px; --tiny: 12px;
    --h-hero: 700px; --h-projects: 670px; --h-pitch: 400px;
    --card-w: 258px; --card-gap: 20px; --card-img: 112px;
    --card-pad: 20px; --step-pad: 26px;
    --radius-panel: 24px;
    --radius-pitch: 20px;
    --section-gap: 90px;
  }
}

@media (max-width: 639px) {
  :root {
    --gap: 20px;
    --inset: 24px;
    --h1: 28px; --h2: 28px; --h3: 24px; --h4: 24px;
    --card-title: 20px;
    --lead: 14px; --text: 14px; --small: 12px; --tiny: 12px;
    --h-hero: 500px; --h-projects: 724px; --h-pitch: 400px;
    --card-w: 238px; --card-gap: 16px; --card-img: 110px;
    --card-pad: 18px; --step-pad: 22px;
    --radius: 20px;
    --radius-pitch: 16px;
    --section-gap: 64px;
  }
}

/* ─────────────────────────── база ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* контейнер — повторяет grid-контейнер Tilda */
.hero, .projects, .pitch, .roadmap, .secure, .contacts, .header__inner {
  width: min(var(--page), 100% - var(--gap));
  margin-inline: auto;
}

/* ───────────────────────── кнопки ───────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.5px;
  text-align: center;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }

.btn--blue  { background: var(--blue);      color: #fff; }
.btn--hero  { background: var(--blue-hero); color: #fff; font-weight: 400; }
.btn--dark  { background: var(--ink);       color: #fff; border-radius: 10px; font-size: 15px; font-weight: 400; }
.btn--white { background: #fff;             color: var(--ink); }

@media (hover: hover) {
  .btn--blue:hover  { background: var(--ink); }
  /* герой: как в оригинале — кнопка светлеет до белого, текст становится синим */
  .btn--hero:hover  { background: #fff; color: var(--blue-hero); }
  .btn--dark:hover  { background: #000; }
  .btn--white:hover { background: var(--surface); }
}

/* стрелка ↗ в конце кнопки; цвет берёт из текста кнопки */
.btn__icon {
  order: 1;
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url('assets/icon-arrow-upright-semibold.svg') center / contain no-repeat;
  mask: url('assets/icon-arrow-upright-semibold.svg') center / contain no-repeat;
}
.btn__icon--plus {
  width: 16px;
  height: 16px;
  -webkit-mask-image: url('assets/icon-plus-semibold.svg');
  mask-image: url('assets/icon-plus-semibold.svg');
}

/* «переливание»: косая светлая полоса пробегает по кнопке раз в 3 с.
   В оригинале эффект есть только у кнопки в шапке и в мобильном меню,
   и он не отключается по prefers-reduced-motion — Tilda его не гейтит */
.header__cta,
.nav__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.header__cta::after,
.nav__cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -55px;
  width: 45px;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4));
  transform: skewX(-45deg);
  pointer-events: none;
  animation: btn-flash 3s linear infinite;
}

@keyframes btn-flash {
  0%   { left: -55px; }
  20%  { left: calc(100% + 30px); }
  100% { left: calc(100% + 30px); }
}

@media (max-width: 1899px) { .btn { padding: 15px 22px; } }
@media (max-width: 1199px) {
  .btn { padding: 12px 20px; font-size: 16px; }
  .btn--dark { font-size: 14px; }
  .btn__icon { width: 18px; height: 18px; }
}
@media (max-width: 639px) {
  .btn { padding: 10px 18px; font-size: 14px; border-radius: 8px; letter-spacing: -0.3px; }
  .btn__icon { width: 16px; height: 16px; }
}

/* ───────────────────────── шапка ───────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.header.is-stuck {
  border-bottom-color: rgba(0, 0, 0, .07);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .04);
}

.header__inner {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 46px;
}
.header__logo img { height: 28px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav__link {
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--ink-900);
  transition: color .2s ease;
}
@media (hover: hover) { .nav__link:hover { color: var(--blue); } }

.nav__cta { display: none; }
.header__cta { flex: none; margin-left: auto; }

/* кнопка в шапке — компактная, со стрелкой и переливом, как в оригинале */
.header__cta,
.nav__cta {
  gap: 4px;
  padding: 10px 16px;
  font-size: 16px;
  border-radius: 8px;
}
.header__cta .btn__icon,
.nav__cta .btn__icon {
  width: 18px;
  height: 18px;
  -webkit-mask-image: url('assets/icon-arrow-upright-bold.svg');
  mask-image: url('assets/icon-arrow-upright-bold.svg');
  animation: btn-icon-rotate15 2s linear infinite;
}
@keyframes btn-icon-rotate15 {
  0%   { transform: rotate(0deg);  animation-timing-function: ease-in-out; }
  50%  { transform: rotate(15deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(0deg); }
}

.burger {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  background: none; border: 0; padding: 11px 10px;
  flex-direction: column; justify-content: space-between;
}
.burger span {
  display: block; height: 2px; width: 100%;
  background: var(--ink-900); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 979px) {
  .header__inner { min-height: 64px; gap: 16px; }
  .header__cta { display: none; }
  .burger { display: flex; }

  .nav {
    position: fixed;
    inset: 64px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px calc(var(--gap) / 2) 28px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link { padding: 14px 0; font-size: 18px; border-bottom: 1px solid rgba(0, 0, 0, .06); }
  .nav__cta { display: inline-flex; margin-top: 20px; }
}

/* ───────────────────────── герой ───────────────────────── */

.hero { padding-top: 0; }

.hero__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  min-height: var(--h-hero);
  display: flex;
  align-items: center;
  padding: var(--inset);
  isolation: isolate;
}

/* декоративные пятна: размеры и смещения в % от карточки, иначе
   при сужении окна они разъезжаются относительно текста */
.hero__blob {
  position: absolute;
  z-index: -1;
  width: 82%;
  max-width: none;
  pointer-events: none;
}
.hero__blob--a { top: -24%; right: -23%; transform: rotate(225deg); }
.hero__blob--b { top: 5%;   right: -36%; transform: rotate(69deg); }

.hero__body { max-width: 1031px; }

.hero__eyebrow {
  color: var(--muted);
  font-size: 18px;
  letter-spacing: -0.4px;
  margin-bottom: 24px;
}
.hero__title {
  /* заголовок трёхстрочный, как в оригинале: ширина держит перенос
     после «Разрабатываем AI» */
  max-width: 760px;
  font-size: var(--h1);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -1px;
  margin-bottom: 32px;
  color: var(--surface);
}
.hero__title-accent { color: #5abaff; }
.hero__lead {
  max-width: 620px;
  color: var(--hero-lead);
  font-size: var(--lead);
  letter-spacing: -0.5px;
  margin-bottom: 40px;
}
/* кнопка героя — 260×50, радиус 12 */
.btn--hero { min-width: 260px; padding: 16px 24px; }

@media (max-width: 1899px) {
  .hero__eyebrow { font-size: 16px; letter-spacing: -0.3px; }
  .hero__title { max-width: 680px; }
  .hero__blob { width: 103%; }
}
@media (max-width: 1199px) {
  .hero__eyebrow { font-size: 14px; letter-spacing: -0.1px; margin-bottom: 16px; }
  .hero__blob { width: 183%; }
  .hero__blob--a { top: -20%; right: -78%; }
  .hero__blob--b { top: 9%;   right: -82%; }
}
@media (max-width: 639px) {
  .hero { padding-top: 12px; }
  /* мобильный герой в оригинале отцентрирован */
  .hero__body { text-align: center; }
  .hero__eyebrow { font-size: 12px; }
  .hero__title { line-height: 1.1; }
  .hero__lead { margin-bottom: 28px; margin-inline: auto; }
  .hero__blob { width: 295%; }
  .hero__blob--a { top: -20%; right: -87%; }
  .hero__blob--b { top: 39%;  right: -99%; }
}

/* ──────────────────────── проекты ──────────────────────── */

.projects { margin-top: var(--section-gap); }

/* расстояние от правого края контент-колонки до края окна:
   на него подложка и прокрутка карусели выезжают вправо,
   чтобы карточки не оказывались на белом фоне страницы */
.projects { --bleed: calc((100vw - min(var(--page), 100vw - var(--gap))) / 2); }

.projects__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--surface);
  min-height: var(--h-projects);
  padding: 50px 0 50px var(--inset);
  margin-right: calc(var(--bleed) * -1);
  display: grid;
  grid-template-columns: 379px minmax(0, 1fr);
  column-gap: 96px;
  align-items: start;
}

.projects__intro {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.projects__title {
  font-size: var(--h2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 32px;
}
.projects__lead {
  color: var(--body-text);
  font-size: var(--text);
  letter-spacing: -0.5px;
}

/* — карусель — */

.slider {
  overflow-x: auto;
  overflow-y: hidden;
  /* proximity, не mandatory: иначе конец прокрутки не является точкой покоя
     и последняя карточка застревает подрезанной у края окна */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* грид-колонка слайдера сама доходит до края подложки (края окна):
     подложка расширена на --bleed, дополнительные отступы не нужны */
  cursor: grab;
}
/* концевой отступ живёт в треке: паддинг скролл-контейнера Chrome не учитывает.
   Своя snap-точка, чтобы прокрутка в конец не оставляла карточку подрезанной */
.slider__track::after {
  content: '';
  flex: 0 0 var(--bleed);
  scroll-snap-align: end;
}
.slider:active { cursor: grabbing; }
.slider::-webkit-scrollbar { display: none; }

.slider__track {
  display: flex;
  gap: var(--card-gap);
  width: max-content;
}

.card {
  scroll-snap-align: start;
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  display: flex;
  flex-direction: column;
  /* подложка карточки: своя, чуть светлее панели, с тонкой рамкой */
  background: #f6f6f6;
  border: 0.8px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  padding-bottom: var(--card-pad);
}
.card__img {
  width: 100%;
  height: var(--card-img);
  object-fit: cover;
  background: #e6edf4;
}
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 21px var(--card-pad) 0;
  border-top: 1px solid var(--line);
  color: var(--muted-tag);
  font-size: 12px;
  line-height: 1;
}
.card__title {
  font-size: var(--card-title);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 20px var(--card-pad) 16px;
}
.card__text {
  color: var(--body-text);
  font-size: 16px;
  letter-spacing: -0.3px;
  margin: 0 var(--card-pad) 24px;
}
.card__btn {
  /* в оригинале кнопка не растягивается на карточку: 190px, по левому краю */
  margin: auto var(--card-pad) 0;
  align-self: flex-start;
  min-width: 190px;
  padding-block: 10px;
}

/* стрелки карусели — тёмные круги внизу текстовой колонки, как в оригинале */
.slider__nav {
  display: flex;
  gap: 13px;
  margin-top: auto;
  padding-top: 32px;
}
.slider__btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: #373737;
  border: 0;
  border-radius: 50%;
  transition: background-color .2s ease, opacity .2s ease;
}
.slider__btn img { width: 16px; height: 16px; filter: invert(1); }
.slider__btn:disabled { opacity: .35; cursor: default; }
@media (hover: hover) {
  .slider__btn:not(:disabled):hover { background: var(--ink-900); }
}

@media (max-width: 1899px) {
  .projects__card { padding: 32px 0 32px var(--inset); grid-template-columns: 291px minmax(0, 1fr); column-gap: 60px; }
  .card__title { letter-spacing: -0.8px; }
}
@media (max-width: 1199px) {
  /* колонки складываются: текст сверху, карусель снизу */
  .projects__card { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding-block: 24px 30px; }
  .card__title { margin: 16px var(--card-pad) 12px; letter-spacing: -0.6px; }
  .card__text { font-size: 14px; margin-bottom: 20px; }
  .card__tags { padding-top: 18px; gap: 6px 10px; }
  .projects__title { margin-bottom: 20px; }
  .slider__nav { margin-top: 24px; }
}
@media (max-width: 639px) {
  .projects__card { padding-block: 24px 30px; }
  .card__img { border-radius: 16px 16px 0 0; }
  .card__tags { font-size: 10px; padding-top: 14px; }
  .slider__btn { width: 38px; height: 38px; border-radius: 10px; }
  .slider__nav { margin-top: 18px; }
}

/* ────────────────── «не нашли нужное» ────────────────── */

.pitch { margin-top: var(--section-gap); }

.pitch__card {
  border-radius: var(--radius-pitch);
  background: #fff url('assets/cta-bg.png') center / cover no-repeat;
  min-height: var(--h-pitch);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px var(--inset);
}
.pitch__eyebrow {
  color: var(--blue);
  font-size: var(--small);
  letter-spacing: -0.2px;
  margin-bottom: 12px;
}
.pitch__title {
  font-size: var(--pitch-title, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2px;
  max-width: 645px;
  margin-bottom: 32px;
}
.pitch__text {
  max-width: 500px;
  font-size: var(--text);
  letter-spacing: -0.2px;
  margin-bottom: 40px;
}
.pitch__btn { border-radius: 8px; }
.pitch__note {
  color: #898989;
  font-size: 18px;
  letter-spacing: -0.2px;
  margin-top: 12px;
}

@media (max-width: 1899px) { .pitch__title { font-size: 56px; } }
@media (max-width: 1199px) { .pitch__title { font-size: 40px; letter-spacing: -1.5px; } .pitch__note { font-size: 14px; } }
@media (max-width: 639px)  { .pitch__title { font-size: 28px; letter-spacing: -1px; } }
@media (max-width: 1199px) {
  .pitch__card { padding: 40px var(--inset); }
  .pitch__title { margin-bottom: 24px; }
  .pitch__text { margin-bottom: 28px; }
}

/* ──────────────────── этапы внедрения ──────────────────── */

.roadmap { margin-top: var(--section-gap); }

.roadmap__title {
  color: var(--ink-900);
  font-size: var(--h2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 48px;
  /* в оригинале заголовки секций сдвинуты на 20px правее края карточек */
  padding-left: 20px;
}

.roadmap__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 54px 12px;
}

/* — тёмная плашка этапа — */
.stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--ink);
  color: #fff;
  padding: 45px var(--inset);
  isolation: isolate;
}
.stage--wide { grid-column: span 4; }
.stage--half { grid-column: span 2; }

/* широкая плашка этапа 1 — двухколоночная, как в оригинале:
   слева пилюля с заголовком, справа текст и кнопка с подписью */
.stage--wide:not(.stage--final) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 680px;
  column-gap: 40px;
  align-items: start;
}
.stage--wide:not(.stage--final) .stage__text { grid-column: 2; margin-top: 5px; }
.stage--wide:not(.stage--final) .stage__aside { grid-column: 2; }

.stage__head {
  display: flex;
  align-items: flex-start;
  gap: 42px;
}
.pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  border: 0.8px solid var(--surface);
  border-radius: 30px;
  padding: 8px 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}
.stage__title {
  font-size: var(--h3);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1px;
  max-width: 607px;
}
/* у этапов 2–4 заголовок мельче, чем у первого — так в оригинале */
.stage--half .stage__title,
.stage--final .stage__title {
  font-size: 40px;
}
.stage__text {
  max-width: 680px;
  color: var(--on-dark);
  font-size: var(--text);
  letter-spacing: -0.2px;
  margin-top: 32px;
}

/* кнопка и подпись — в строку под текстом, как в оригинале */
.stage__aside {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 32px;
}
.stage__note {
  color: var(--on-dark-3);
  font-size: 18px;
  letter-spacing: -0.2px;
}
.stage__aside .btn { order: -1; }

.stage__deco { position: absolute; z-index: -1; pointer-events: none; max-width: none; }
.stage__deco--arc      { top: 0;    left: 46%;  width: 26%; }
.stage__deco--photo    { top: 42px; left: 58%;  width: 13%; }
.stage__deco--squiggle { top: -40px; right: 6%; width: 29%; transform: rotate(315deg); opacity: .85; }
.stage__deco--arc2     { bottom: -70px; left: 31%; width: 20%; transform: rotate(180deg); }
.stage__deco--play     { bottom: -10px; left: 40%; width: 8%; }

.stage--final { min-height: 270px; }
.stage--final .stage__final-body {
  position: absolute;
  top: 45px;
  right: var(--inset);
  width: min(795px, 46%);
}
.stage--final .stage__final-body .stage__text { margin-top: 0; margin-bottom: 28px; }

/* — шаг — */
.step {
  background: var(--surface);
  border-radius: 32px;
  padding: var(--step-pad);
}
.step--wide { grid-column: span 2; }
.step--empty { display: none; }

.step__num {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 30px;
  background: var(--ink);
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
.step__title {
  font-size: var(--h4);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.5px;
  margin: 20px 0;
}
.step__text {
  color: var(--ink);
  font-size: var(--text);
  letter-spacing: -0.2px;
}

@media (max-width: 1899px) {
  .stage { padding: 33px 32px; }
  .stage--final .stage__final-body { top: 33px; }
  .stage__note { font-size: 14px; color: var(--on-dark-3); }
  .stage--half .stage__title, .stage--final .stage__title { font-size: 32px; }
}
@media (max-width: 1199px) {
  .roadmap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 12px; }
  .roadmap__title { padding-left: 0; }
  .stage--wide, .stage--half { grid-column: span 2; }
  .stage { padding: 30px var(--inset); }
  .stage__head { gap: 20px; }
  .pill { font-size: 14px; padding: 6px 16px; }
  .stage__aside { gap: 24px; flex-wrap: wrap; }
  .stage--wide:not(.stage--final) { display: block; }
  .stage--half .stage__title, .stage--final .stage__title { font-size: 26px; }
  .stage--final .stage__final-body { position: static; width: auto; margin-top: 24px; }
  .stage--final { min-height: 0; }
  .stage__deco--arc, .stage__deco--photo, .stage__deco--arc2, .stage__deco--play { opacity: .45; }
  .step__title { margin: 16px 0; }
}
@media (max-width: 639px) {
  .roadmap__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .stage--wide, .stage--half, .step--wide { grid-column: span 1; }
  .step { border-radius: 24px; }
  .stage { padding: 28px var(--inset); }
  .stage__head { flex-direction: column; gap: 14px; }
  .stage__title { letter-spacing: -0.8px; }
  .stage--half .stage__title, .stage--final .stage__title { font-size: 22px; }
  .stage__text { margin-top: 20px; }
  .stage__deco { display: none; }
}

/* ─────────────────────── безопасность ─────────────────────── */

.secure {
  position: relative;
  margin-top: var(--section-gap);
  padding-top: 100px;
  isolation: isolate;
  /* декоративные карта и AI-иллюстрация выходят за колонку — обрезаем,
     как это делал артборд в оригинале */
  overflow: hidden;
}

.secure__map,
.secure__ai { position: absolute; pointer-events: none; max-width: none; }
.secure__map { z-index: -2; top: 0;     left: 34%; width: 79%; }
.secure__ai  { z-index: -1; top: 345px; left: 47%; width: 27%; }

.secure__intro { max-width: 680px; padding-left: 20px; }

.secure__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: var(--small);
  letter-spacing: -0.2px;
  margin-bottom: 16px;
}
.secure__eyebrow img { width: 24px; height: 24px; }

.secure__title {
  font-size: var(--h2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 32px;
}
.secure__text {
  max-width: 460px;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}

.secure__panel {
  position: relative;
  /* панель ниже AI-иллюстрации: блоки не перекрываются */
  margin-top: 540px;
  border-radius: var(--radius-panel);
  background: var(--ink);
  color: #fff;
  padding: 43px var(--inset);
  min-height: 250px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.secure__panel-main { max-width: 598px; }
.secure__panel-title {
  font-size: var(--h3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 32px;
}
.secure__panel-text {
  color: var(--on-dark);
  font-size: var(--lead);
  letter-spacing: -0.2px;
}
.secure__panel-aside {
  width: 248px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
}
.secure__panel-note {
  color: var(--muted);
  font-size: var(--small);
  letter-spacing: -0.2px;
  align-self: flex-start;
}
.secure__panel-icon { width: 50px; height: auto; }

@media (max-width: 1899px) {
  .secure { padding-top: 75px; }
  .secure__map { width: 92%; left: 32%; }
  .secure__ai  { top: 284px; left: 43%; width: 26%; }
  .secure__panel { margin-top: 350px; min-height: 190px; padding: 33px var(--inset); }
}
@media (max-width: 1199px) {
  .secure { padding-top: 70px; }
  .secure__intro { padding-left: 0; }
  .secure__text { font-size: 16px; }
  .secure__map { width: 136%; left: auto; right: -12%; top: 150px; }
  .secure__ai  { top: 300px; left: 40%; width: 44%; }
  .secure__panel {
    margin-top: 480px;
    flex-direction: column;
    gap: 28px;
    padding: 30px var(--inset);
  }
  .secure__panel-aside {
    width: auto; align-self: stretch;
    flex-direction: row; align-items: center; justify-content: space-between; gap: 20px;
  }
  .secure__panel-icon { width: 40px; }
}
@media (max-width: 639px) {
  .secure { padding-top: 50px; }
  .secure__map { width: 165%; right: -22%; top: 160px; }
  .secure__ai  { top: 330px; left: 20%; width: 64%; }
  .secure__title { font-size: 32px; letter-spacing: -1.5px; margin-bottom: 20px; }
  .secure__panel { margin-top: 380px; padding: 26px var(--inset); }
  .secure__panel-title { margin-bottom: 20px; }
  .secure__panel-icon { width: 32px; }
}

/* ───────────────────────── контакты ───────────────────────── */

.contacts { margin-top: var(--section-gap); margin-bottom: 60px; }

.contacts__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  padding: 74px var(--inset) 40px;
  isolation: isolate;
}
.contacts__watermark {
  position: absolute;
  z-index: -1;
  top: 154px;
  left: 4%;
  width: 43%;
  max-width: none;
  opacity: .03;
  pointer-events: none;
}

.contacts__top {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.contacts__title {
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 32px;
}
.contacts__text {
  max-width: 308px;
  color: var(--on-dark-2);
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.5px;
  margin-bottom: 40px;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 271px;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 16px 24px;
  border-radius: 12px;
  background: var(--panel);
  color: #fff;
  font-size: 18px;
  letter-spacing: -0.5px;
  transition: background-color .2s ease;
}
.contact-link img { width: 20px; height: 20px; flex: none; }
@media (hover: hover) { .contact-link:hover { background: #3a3a3a; } }

.contacts__wordmark {
  /* большой логотип прижат к правому краю и занимает ~72% ширины, как в оригинале */
  width: 72%;
  margin: 40px 0 0 auto;
}

.contacts__legal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 40px;
  margin-top: 40px;
  color: var(--footer-ink);
  font-size: var(--tiny);
  letter-spacing: -0.5px;
}
.contacts__policy { transition: color .2s ease; }
@media (hover: hover) { .contacts__policy:hover { color: #a5a5a5; } }

@media (max-width: 1899px) {
  .contacts__card { padding: 55px var(--inset) 40px; }
  /* заголовок «Оставить заявку» переносится на две строки, как в оригинале */
  .contacts__title { font-size: 42px; max-width: 308px; }
  .contacts__top { grid-template-columns: 340px minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 1199px) {
  .contacts__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contacts__info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 32px;
  }
  .contacts__title { grid-column: 1; margin-bottom: 16px; }
  .contacts__text  { grid-column: 1; margin-bottom: 0; }
  .contacts__info .contact-link { grid-column: 2; width: 250px; margin-bottom: 12px; font-size: 16px; padding: 14px 20px; }
  .contacts__info .contact-link:nth-of-type(1) { grid-row: 1; }
  .contacts__info .contact-link:nth-of-type(2) { grid-row: 2; }
  .contacts__wordmark { margin-top: 32px; }
}
@media (max-width: 639px) {
  .contacts { margin-bottom: 30px; }
  .contacts__card { padding: 35px var(--inset) 30px; }
  .contacts__title { font-size: 28px; }
  .contacts__info { grid-template-columns: minmax(0, 1fr); }
  .contacts__info .contact-link { grid-column: 1; width: 100%; }
  .contacts__info .contact-link:nth-of-type(1),
  .contacts__info .contact-link:nth-of-type(2) { grid-row: auto; }
  .contacts__text { margin-bottom: 24px; }
  .contacts__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ────────────────────────── форма ────────────────────────── */

.form { display: flex; flex-direction: column; gap: 16px; }

.form__row { display: grid; gap: 16px; }
.form__row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field__label {
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.2px;
}
.field__input {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font: inherit;
  font-size: 16px;
  transition: border-color .2s ease, background-color .2s ease;
}
.field__input::placeholder { color: #6d6d6d; }
.field__input:focus {
  outline: none;
  border-color: var(--blue);
  background: rgba(255, 255, 255, .08);
}
.field__input[aria-invalid="true"] { border-color: var(--danger); }

.field__error { color: var(--danger); font-size: 12px; line-height: 1.3; }
.field__error:empty { display: none; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  color: var(--on-dark-2);
  font-size: var(--small);
}
.checkbox input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.checkbox__box {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  transition: background-color .15s ease, border-color .15s ease;
}
.checkbox input:checked + .checkbox__box {
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--blue);
}
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--blue); outline-offset: 2px; }
.checkbox[data-invalid] .checkbox__box { border-color: var(--danger); }

.form__submit {
  align-self: flex-start;
  margin-top: 8px;
  min-width: 220px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 8px;
}
.form__submit[disabled] { opacity: .6; cursor: progress; }

.form__legal { color: #bdbdbd; font-size: 12px; line-height: 1.45; }
.form__legal a { text-decoration: underline; text-underline-offset: 2px; }

.form__status { font-size: var(--small); }
.form__status:empty { display: none; }
.form__status[data-state="ok"]    { color: #7ed6a5; }
.form__status[data-state="error"] { color: var(--danger); }

@media (max-width: 639px) {
  .form__row--two { grid-template-columns: minmax(0, 1fr); }
  .form__submit { align-self: stretch; }
  .field__label { font-size: 18px; }
}

/* ────────────────────────── попап ────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal[hidden] { display: none; }

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade .2s ease;
}
.modal__dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  border-radius: 24px;
  background: var(--ink);
  color: #fff;
  padding: 32px;
  animation: pop .22s ease;
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop  { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .modal__overlay, .modal__dialog { animation: none; }
}

.modal__close {
  position: absolute;
  top: 24px; right: 24px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--panel);
  border: 0;
  border-radius: 10px;
  transition: background-color .2s ease;
}
.modal__close img { width: 14px; height: 14px; filter: invert(1); }
@media (hover: hover) { .modal__close:hover { background: #3d3d3d; } }

.modal__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 28px;
  padding-right: 56px;
}

/* в попапе кнопка компактнее, как в оригинале */
.modal .form__submit { min-width: 260px; font-size: 14px; padding-block: 10px; }
.modal .field__label { font-size: 18px; }

@media (max-width: 639px) {
  .modal__dialog { padding: 24px; border-radius: 20px; }
  .modal__title { font-size: 24px; margin-bottom: 20px; }
  .modal__close { top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 8px; }
}

/* ───────────────────────── cookies ───────────────────────── */

.cookie {
  position: fixed;
  z-index: 90;
  right: 40px;
  bottom: 30px;
  max-width: 530px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(30, 30, 30, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.cookie[hidden] { display: none; }
.cookie__text { flex: 1; font-size: 18px; font-weight: 500; letter-spacing: -0.1px; }
.cookie__more { color: #9fc9e8; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cookie__ok {
  flex: none;
  padding: 8px 18px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--ink-900);
  font-weight: 500;
  transition: background-color .2s ease, color .2s ease;
}
@media (hover: hover) { .cookie__ok:hover { background: var(--ink-900); color: #fff; } }

@media (max-width: 639px) {
  .cookie { left: 12px; right: 12px; bottom: 12px; max-width: none; flex-wrap: wrap; font-size: 13px; gap: 14px; }
  .cookie__text { font-size: 14px; }
}

/* ───────────────── появление секций при скролле ───────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Внутренние страницы (проекты, политика)
   ═══════════════════════════════════════════════════════════════ */

.page {
  width: min(var(--page), 100% - var(--gap));
  margin-inline: auto;
  /* крошки почти сразу под шапкой, как в оригинале */
  padding-top: 12px;
}

/* ── хлебные крошки ── */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 16px;
}
.crumbs li { display: flex; align-items: center; gap: 10px; color: #a2a2a2; }
.crumbs li:not(:last-child)::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: .5;
}
.crumbs a { color: var(--ink-900); opacity: .7; transition: opacity .2s ease; }
@media (hover: hover) { .crumbs a:hover { opacity: 1; color: var(--blue); } }

/* ── шапка страницы ── */
.phero {
  padding: 0 0 60px;
  display: grid;
  grid-template-columns: minmax(0, 740fr) minmax(0, 380fr);
  column-gap: 40px;
  row-gap: 28px;
  align-items: start;
}
.phero > .crumbs,
.phero > .ptags { grid-column: 1 / -1; }
.phero__main { min-width: 0; }

/* баннер-иллюстрация в шапке страницы проекта; теги лежат поверх.
   Пропорция задана через aspect-ratio, а не фиксированной высотой:
   иначе при сужении окна cover срезает всё больше картинки и она «уплывает» */
.pbanner {
  grid-column: 1 / -1;
  margin: 0;
  aspect-ratio: 1160 / 390;
  min-height: 120px;
  padding: 25px;
  border-radius: 32px;
  background-color: var(--surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.pbanner .ptags { margin: 0; }

.ptags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 32px 0;
}
.ptags li {
  background: var(--surface);
  border-radius: 30px;
  padding: 6px 17px;
  font-size: 16px;
  letter-spacing: -0.3px;
  line-height: 1.4;
  color: var(--ink);
}

.phero__title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -2px;
  max-width: 1060px;
}
.phero__lead {
  max-width: 1060px;
  margin-top: 24px;
  font-size: 18px;
  color: rgba(0, 0, 0, .7);
  letter-spacing: -0.2px;
}

.callout {
  padding: 22px;
  border: 0.8px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
}
.callout .sec__sub {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -1px;
  margin-bottom: 16px;
}
.callout p { font-size: 18px; letter-spacing: -0.3px; }

/* ── секция ── */
.sec { padding: 60px 0; border-top: 1px solid rgba(0, 0, 0, .1); }

/* сплошной текст (политика) — узкая колонка для читаемости */
.sec--plain { border-top: 0; padding-top: 0; max-width: 900px; }
.sec--plain .sec__sub {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.5px;
  margin: 36px 0 12px;
}
.sec--plain p { margin-bottom: 14px; font-size: 16px; line-height: 1.6; }

.sec__title {
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--ink-900);
  margin-bottom: 40px;
}
.sec__sub {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.7px;
  color: #373737;
  margin: 32px 0 16px;
}
.sec__sub:first-child { margin-top: 0; }
.sec__sub--icon { display: flex; align-items: center; gap: 12px; }
.sec__sub--icon img { width: 32px; height: 32px; flex: none; }
.sec > p { max-width: 1100px; font-size: 18px; letter-spacing: -0.3px; }
.sec__note { color: #666; }
.sec__figure { margin: 32px 0; }
.sec__figure img { width: 100%; border-radius: var(--radius-panel); }

/* ── две панели: проблема / решение — склеены, без зазора ── */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }

.panel { padding: 22px; }
.panel--dark  {
  background: var(--ink); color: #fff;
  border-radius: 24px 0 0 24px;
}
.panel--light {
  background: var(--surface); color: var(--ink);
  border: 0.8px solid var(--line);
  border-radius: 0 24px 24px 0;
}

.panel .sec__sub {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -1.5px;
  margin: 0 0 24px;
}
.panel--dark .sec__sub { color: #fff; }
.panel .sec__sub ~ .sec__sub { font-size: 24px; letter-spacing: -0.5px; margin-top: 24px; }

/* ── списки-маркеры ── */
.marks { display: flex; flex-direction: column; gap: 16px; }
.marks li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  font-size: 20px;
  letter-spacing: -0.3px;
}
.marks img { width: 24px; height: 24px; margin-top: 3px; }

.marks--minus li,
.marks--plus li { position: relative; }
.marks--minus li::before,
.marks--plus li::before {
  content: '';
  width: 24px; height: 24px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: center / 18px no-repeat;
  mask: center / 18px no-repeat;
}
.marks--minus li::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}
.marks--plus li::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}
.panel--dark .marks li { color: #cdcdcd; }
.panel--dark .marks--minus li::before { color: #fa876b; }
.marks--plus li::before { color: var(--blue); }

/* иконочный список — сетка белых карточек */
.marks--icon {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.marks--icon li {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  font-size: 18px;
  background: #fff;
  border: 0.8px solid #d0d0d0;
  border-radius: 24px;
  padding: 20px;
}
.panel .marks--icon,
.callout .marks--icon { grid-template-columns: minmax(0, 1fr); }

/* ── нумерованный список ── */
.steps { display: flex; flex-direction: column; }
.steps__item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 0 24px;
  padding: 32px 0;
  border-top: 1px solid rgba(0, 0, 0, .2);
}
.steps__item:first-child { border-top: 0; padding-top: 0; }

.steps__num {
  grid-row: 1 / span 2;
  font-size: 16px;
  color: rgba(0, 0, 0, .3);
  padding-top: 6px;
}
.steps__title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -1px;
  max-width: 830px;
}
.steps__text {
  margin-top: 16px;
  max-width: 880px;
  font-size: 18px;
}

.steps__pair {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.steps__cell {
  border-radius: 20px;
  background: var(--surface);
  border: 0.8px solid var(--line);
  padding: 18px;
}
.steps__cell--dark {
  background: var(--ink);
  color: #dfdfdf;
  border-color: transparent;
}
.steps__label {
  display: block;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--ink-900);
}
.steps__cell--dark .steps__label { color: #fff; }
.steps__cell p { font-size: 18px; letter-spacing: -0.3px; }

/* ── таблица характеристик ── */
.spec-wrap { overflow-x: auto; }
.spec {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.spec th {
  padding: 16px 24px 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 400;
  color: #878787;
  white-space: nowrap;
}
.spec td {
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 18px;
  letter-spacing: -0.2px;
}
.spec td:first-child { width: 44%; font-size: 20px; letter-spacing: -0.5px; }
.spec td:last-child  { color: #373737; font-weight: 500; padding-right: 0; }

@media (max-width: 1899px) {
  .phero__title { font-size: 44px; }
  .sec__title { font-size: 36px; }
  .panel { padding: 32px; }
  .panel .sec__sub { font-size: 30px; }
  .pbanner { padding: 24px; border-radius: 28px; }
}
@media (max-width: 1199px) {
  .page { padding-top: 12px; }
  .phero { padding: 0 0 40px; }
  .phero__title { font-size: 34px; letter-spacing: -1.5px; }
  .ptags { margin: 24px 0; }
  .ptags li { font-size: 15px; padding: 6px 14px; }
  .sec { padding: 44px 0; }
  .sec__title { font-size: 30px; letter-spacing: -1.5px; margin-bottom: 28px; }
  .sec__sub { font-size: 22px; }
  .callout { padding: 26px 28px; margin-top: 36px; }
  .callout .sec__sub { font-size: 26px; }

  /* панели складываются — скругления переезжают на верх/низ */
  .split { grid-template-columns: minmax(0, 1fr); }
  .panel--dark  { border-radius: 24px 24px 0 0; }
  .panel--light { border-radius: 0 0 24px 24px; }
  .panel { padding: 24px; }
  .marks--icon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .phero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }
  /* планшетная пропорция баннера выше — иллюстрация не прячется под тегами */
  .pbanner { padding: 20px; border-radius: 24px; aspect-ratio: 706 / 459; }
  .ptags li { font-size: 15px; padding: 5px 14px; }
  .panel .sec__sub { font-size: 26px; letter-spacing: -1px; }
  .marks li { font-size: 18px; }
  .steps__item { grid-template-columns: 46px minmax(0, 1fr); gap: 0 16px; padding: 26px 0; }
  .steps__title { font-size: 23px; letter-spacing: -0.6px; }
  .steps__pair { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .steps__label { font-size: 20px; }
  .spec td:first-child { font-size: 18px; }
}
@media (max-width: 639px) {
  .crumbs ol { font-size: 13px; gap: 6px 8px; }
  .phero__title { font-size: 27px; letter-spacing: -1px; }
  .phero__lead { font-size: 15px; }
  .ptags li { font-size: 13px; padding: 4px 12px; }
  /* мобильный баннер почти квадратный, как в оригинале: теги сверху,
     иллюстрация целиком видна ниже */
  .pbanner { padding: 20px; border-radius: 20px; aspect-ratio: 328 / 293; }
  .sec { padding: 36px 0; }
  .sec__title { font-size: 25px; letter-spacing: -1px; }
  .panel { padding: 20px; }
  .marks--icon { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .marks--icon li { padding: 16px; border-radius: 20px; }
  .callout { padding: 18px; }
  .panel .sec__sub { font-size: 22px; }
  .marks li { font-size: 16px; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
  .marks img,
  .marks--minus li::before,
  .marks--plus li::before { width: 20px; height: 20px; }
  .steps__item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .steps__num { grid-row: auto; padding-top: 0; }
  .steps__title { font-size: 20px; }
  .steps__text, .steps__cell p, .callout p, .sec > p { font-size: 15px; }
  .steps__cell { padding: 18px 20px; }
  .spec th { font-size: 13px; }
  .spec td { font-size: 15px; padding: 14px 16px 14px 0; }
  .spec td:first-child { font-size: 16px; width: 42%; }
}