/* =========================================================
   Рукин Евгений · Система чистого трафика
   ЧБ макет - цвета подгоняются на финальном проходе.
   ========================================================= */

/* ───── tokens - DARK NAVY + BLUE ACCENT ───── */
:root{
  --bg:        #03060F;   /* основной фон - глубокий navy */
  --bg-soft:   #0A1322;   /* чуть светлее для секций-разделителей */
  --bg-mute:   #0E1729;   /* ещё светлее для блоков-«поверхностей» */

  --ink:       #FFFFFF;   /* основной текст - белый */
  --ink-2:     #E4E7EE;   /* заголовки чуть приглушённые */
  --ink-3:     #A5ABB8;   /* вторичный текст */
  --mute:      #6B7484;   /* очень тихий */

  --line:      rgba(255,255,255,0.08);   /* тонкие разделители */
  --line-2:    rgba(255,255,255,0.14);

  --accent:    #2D8DFF;   /* главный синий акцент (VS Code / Apple-style) */
  --accent-2:  #5BA9FF;
  --accent-shadow: rgba(45,141,255,0.35);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 6px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);

  --container: 1240px;
}

/* ───── reset ───── */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; }
ul{ list-style:none; padding:0; margin:0; }

/* защита от случайных горизонтальных переполнений на мобиле */
html, body{ overflow-x: hidden; max-width: 100%; }
h1, h2, h3, p{ overflow-wrap: break-word; word-wrap: break-word; }

/* ───── container ───── */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ───── buttons ───── */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, background .15s, color .15s, border-color .15s;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 8px 24px -8px var(--accent-shadow);
}
.btn--primary:hover{ background: var(--accent-2); border-color: var(--accent-2); }
.btn--primary[disabled]{ opacity:.4; cursor:not-allowed; }

.btn--ghost{
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover{ border-color: var(--accent); color: var(--accent); }

.btn--lg{ padding: 18px 28px; font-size: 16px; border-radius: 14px; }
.btn--block{ width:100%; }

/* underline accent (place where colour will land later) */
.u{
  position: relative;
  white-space: nowrap;
}
.u::after{
  content:"";
  position:absolute; left:0; right:0; bottom: -2px;
  height: 3px;
  background: var(--ink);
  border-radius: 3px;
}

.strike{
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--mute);
  font-weight: 600;
}

/* ───── header ───── */
/* ───── HEADER (desktop) ───── */
.header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
}
.header__brand{
  display: flex; align-items: center; gap: 12px;
}
.header__brand-mark{
  width: 36px; height: 36px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px;
}
.header__brand-text{ display: flex; flex-direction: column; line-height: 1.15; }
.header__brand-name{ font-weight: 700; font-size: 15px; }
.header__brand-role{ font-size: 12px; color: var(--ink-3); }

.header__nav{ display: flex; align-items: center; gap: 18px; }
.header__channel{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-2);
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  transition: border-color .15s, color .15s;
}
.header__channel:hover{ border-color: var(--ink); color: var(--ink); }
.header__channel-dot{
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
  display: inline-block;
}
.header__cta{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-weight: 600; font-size: 14px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: background .15s;
  box-shadow: 0 6px 18px -6px var(--accent-shadow);
}
.header__cta:hover{ background: var(--accent-2); }

/* ───── sections common ───── */
.section{ padding: 96px 0; }
.section__head{ max-width: 820px; margin: 0 auto 56px; text-align: center; }
.section__eyebrow{
  display: inline-block;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 18px;
}
.section__title{
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 18px;
}
.section__lead{
  font-size: 17px; line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}

/* ───── HERO ───── */
.hero{
  position: relative;
  padding: 80px 0 96px;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}

/* full-bleed фоновая сцена на всю ширину hero */
.hero__bg{
  position: absolute;
  inset: 0;
  background-image: url("../assets/img/fond.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg-mute);
  z-index: -3;
}
.hero__bg-label{ display: none; }

/* СЛОЙ 1: лёгкий атмосферный блюр только на левой части, до границы с героем, плавно растворяется */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: rgba(6, 8, 18, 0.10);
  backdrop-filter: blur(4px) saturate(1.05);
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 32%,
    rgba(0,0,0,0) 58%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 32%,
    rgba(0,0,0,0) 58%
  );
}

/* СЛОЙ 2: жёсткий блюр-хотспот строго под заголовком - радиальный, плавно растворяется */
.hero__veil{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(6, 8, 18, 0.42);
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
  mask-image: radial-gradient(
    ellipse 52% 38% at 22% 32%,
    #000 0%,
    #000 28%,
    rgba(0,0,0,0) 92%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 52% 38% at 22% 32%,
    #000 0%,
    #000 28%,
    rgba(0,0,0,0) 92%
  );
}

.hero__inner{
  position: relative;
  max-width: 1320px;
}

.hero__head{
  max-width: 720px;
  margin-bottom: 56px;
}

.hero__badge{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  margin-bottom: 26px;
}
.hero__badge-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #c4a7ff;
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(196,167,255,0.22), 0 0 12px rgba(196,167,255,0.55);
}

.hero__title{
  font-size: clamp(40px, 3.2vw, 60px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  max-width: 820px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.hero__title .u::after{
  background: var(--accent);
  height: 4px;
  border-radius: 4px;
  box-shadow: 0 0 14px var(--accent-shadow);
}

.hero__subtitle{
  font-size: 19px; line-height: 1.5;
  color: rgba(255,255,255,0.82);
  margin: 0;
  max-width: 620px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}

/* 3 карточки-доказательства, горизонтально - по ширине CTA */
.hero__bullets{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 700px;
  margin: 0 0 28px;
}
.hero__bullet{
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 64px 22px 22px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
/* визуал - выступает вверх над карточкой; одинаковая позиция у всех трёх */
.hero__bullet-visual{
  position: absolute;
  left: 18px; top: -44px;
  width: 78px; height: 78px;
  border-radius: 16px;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 6px,
      var(--bg-mute) 6px 7px
    ),
    var(--bg);
  border: 1.5px dashed var(--line-2);
  display: grid; place-items: center;
  overflow: hidden;
}
/* если внутри подложена картинка - убираем dashed-плейсхолдер */
.hero__bullet-visual:has(> img){
  border: 0;
  background: var(--bg);
  box-shadow: 0 6px 18px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
}
.hero__bullet-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.cutout{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  background: var(--bg);
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px dashed var(--line-2);
}
.hero__bullet-title{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
  letter-spacing: -.005em;
}
.hero__bullet-text{
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}

.hero__small{
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  margin: 0 0 18px;
  max-width: 720px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
.hero__small b{ color: #fff; font-weight: 700; }

.btn--hero{
  width: 100%;
  max-width: 700px;          /* длина = ширине 3-го буллита */
  min-height: 95px;          /* +25% к 76px */
  padding: 28px 32px;        /* вертикальный padding +25% */
  font-size: 17px;
  font-weight: 700;
  border-radius: 22px;
  justify-content: space-between;
  gap: 14px;
}
.btn__arrow{
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  transition: transform .18s ease;
}
.btn:hover .btn__arrow{ transform: translateX(4px); }

/* ===========================================================
   HERO MOBILE - тёмная композиция по референсу
   Видимо только на мобиле (≤720px), на десктопе display:none
   =========================================================== */
.hero-m{ display: none; }

/* мобильная версия section 2 - карточки скрыты на десктопе */
.sys-m{ display: none; }

/* ───── SYSTEM - 5 шагов методологии (light timeline) ───── */
.system{ background: var(--bg); }

/* левое выравнивание для редакционного ритма этого блока */
.section__head--left{
  margin: 0 0 56px;
  text-align: left;
  max-width: 760px;
}
.section__head--left .section__eyebrow{
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--mute);
  font-weight: 700;
  margin-bottom: 14px;
}

.steps{
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 960px;
  position: relative;
  counter-reset: stepc;
}
/* направляющая линия между номерами - проходит вертикально через колонку с цифрами */
.steps::before{
  content: "";
  position: absolute;
  top: 38px; bottom: 38px;
  left: 38px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0,
    var(--line) 8%,
    var(--line) 92%,
    transparent 100%
  );
}

.step{
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 26px 32px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.step:first-child{ padding-top: 8px; }
.step:last-child{ border-bottom: 0; padding-bottom: 8px; }

/* большой номер в кружке поверх линии - даёт "узлы" процесса */
.step__num{
  position: relative;
  z-index: 1;
}
.step__num span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid var(--accent);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px rgba(45,141,255,.12), 0 6px 20px var(--accent-shadow);
}

.step__body{
  padding-top: 8px;
  max-width: 640px;
}
.step__meta{
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 14px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
}
.step__title{
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.012em;
  margin: 0 0 12px;
  color: var(--ink);
}
.step__text{
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
}

/* асимметричный ритм: каждый чётный шаг - слегка крупнее тайтл и тонкий отступ-сдвиг */
.step:nth-child(even) .step__title{
  font-size: clamp(24px, 2.4vw, 30px);
}
.step:nth-child(even) .step__body{
  border-left: 2px solid var(--ink);
  padding-left: 18px;
  padding-top: 4px;
  margin-left: -2px;
}

/* десктоп: 2 колонки 1-3 / 4-6 */

/* ───── TG-INSERT (канал «Взлом Директа» между «Системой» и «Кейсами») ───── */
.tg-insert{
  padding: 24px 0 48px;
}
.tg-card{
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* мягкий «штрих» в углу - отделяет от основной плотности */
.tg-card::before{
  content:"";
  position:absolute; right:-80px; top:-80px;
  width: 280px; height: 280px;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 12px,
      var(--bg-mute) 12px 13px
    );
  border-radius: 50%;
  z-index: 0;
}
.tg-card > *{ position: relative; z-index: 1; }

.tg-card__pill{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--ink);
  padding: 8px 14px 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 22px;
}
.tg-card__pill-icon{
  width: 16px; height: 16px;
  color: var(--ink);
  flex-shrink: 0;
}
/* старая точка под капотом, на случай если где-то осталась */
.tg-card__pill-dot{ display: none; }

.tg-card__title{
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0 0 18px;
}

/* лид - спокойная вводная строка */
.tg-card__lead{
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 12px;
  max-width: 560px;
}

/* claim - главное утверждение, более тёмное и плотное */
.tg-card__claim{
  font-size: 17px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 26px;
  max-width: 580px;
  padding-left: 14px;
  border-left: 3px solid var(--ink);
}

/* буллиты-карточки: номер + заголовок + подпись */
.tg-card__what{
  display: grid;
  gap: 14px;
  margin: 0;
}
.tg-card__what-item{
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: var(--bg-mute);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.tg-card__what-num{
  display: grid; place-items: center;
  width: 36px; height: 36px;
  background: var(--accent);
  color: #fff;
  font-size: 12px; font-weight: 800;
  letter-spacing: .04em;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px var(--accent-shadow);
}
.tg-card__what-num svg{
  width: 20px;
  height: 20px;
  display: block;
}
.tg-card__what-body{
  display: grid; gap: 3px;
  padding-top: 2px;
}
.tg-card__what-body b{
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.003em;
}
.tg-card__what-body span{
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-3);
}

.tg-card__right{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.tg-card__btn{
  width: 100%;
  min-height: 76px;
  padding: 22px 24px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 18px;
  justify-content: flex-start;
  gap: 12px;
}
.tg-card__btn-icon{
  width: 22px; height: 22px;
  color: #fff;
  flex-shrink: 0;
}
.tg-card__btn-label{
  flex: 1;
  text-align: left;
}
.tg-card__btn .btn__arrow{
  margin-left: auto;
}

@media (max-width: 960px){
  .tg-card{
    grid-template-columns: 1fr;
    padding: 32px 22px;
    gap: 24px;
  }
  .tg-card__title{ font-size: 26px; }
  .tg-card__claim{ font-size: 16px; }
  .tg-card__what-item{ padding: 12px 14px; }
  .tg-card__what-num{ width: 32px; height: 32px; font-size: 11px; }
  .tg-card__what-num svg{ width: 18px; height: 18px; }
  .tg-card__btn{ min-height: 64px; padding: 18px 20px; font-size: 15px; }
  .tg-card__btn-icon{ width: 20px; height: 20px; }
}

@media (min-width: 961px){
  .steps{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 64px;
    max-width: 1180px;
  }
  /* единая направляющая линия не нужна - будет своя линия в каждой колонке через ::before на step */
  .steps::before{ display: none; }

  .step{
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
  }
  /* верх и низ каждой колонки */
  .step:nth-child(3n+1){ padding-top: 8px; }
  .step:nth-child(3),
  .step:nth-child(6){ border-bottom: 0; padding-bottom: 8px; }

  /* nth-child(4) override снят - теперь все шаги получают синий кружок единообразно */

  /* колоночная направляющая: тонкая линия от кружка к кружку */
  .step:not(:nth-child(3)):not(:nth-child(6))::after{
    content: "";
    position: absolute;
    left: 38px;
    top: 90px;
    bottom: -8px;
    width: 1px;
    background: var(--line);
    z-index: 0;
  }

  /* в 2-кол режиме отключаю асимметричный ритм - здесь он визуально перегружает */
  .step:nth-child(even) .step__title{
    font-size: clamp(22px, 2.2vw, 28px);
  }
  .step:nth-child(even) .step__body{
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    padding-top: 8px;
  }
}

/* ───── CASES SLIDER ───── */
.cases-slider{
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.cases-slider__viewport{
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.cases-slider__track{
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cases-slider__track::-webkit-scrollbar{ display: none; }
.cases-slider__track{ align-items: flex-start; }
.cases-slider__viewport{
  transition: height .35s ease;
}

.case{
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: max-content;
}

/* центрированная плашка ниши сверху карточки - над dashboard-картинкой */
.case__niche{
  align-self: center;
  margin: 22px auto 0;
  padding: 7px 16px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}

.case__shot{
  margin: 0;
  position: relative;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 0;
  /* единый размер для всех скринов — больше не прыгают */
  aspect-ratio: 16 / 10;
  cursor: zoom-in;
}
.case__shot img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* contain — чтобы скрины-таблицы не обрезались по краям */
  background: var(--bg-mute);
  padding: 14px;
  transition: filter .25s, transform .35s;
}
/* hover: затемнение + индикатор «развернуть» */
.case__shot::after{
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6M14 10l7-7M9 21H3v-6M10 14l-7 7'/></svg>") no-repeat center / 18px 18px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  box-shadow: 0 6px 18px var(--accent-shadow);
}
.case__shot:hover::after{ opacity: 1; transform: translateY(0); }
.case__shot:hover img{ filter: brightness(0.78); transform: scale(1.02); }

/* ───── LIGHTBOX ───── */
.lightbox{
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(3,6,15, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  cursor: zoom-out;
  animation: lbFade .25s ease;
}
.lightbox[hidden]{ display: none; }
@keyframes lbFade{ from{opacity:0} to{opacity:1} }
.lightbox__img{
  max-width: min(1200px, 100%);
  max-height: 100%;
  width: auto; height: auto;
  border-radius: 14px;
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
  cursor: zoom-out;
}
.lightbox__close{
  position: fixed; top: 20px; right: 20px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(45,141,255, 0.2);
  border: 1px solid rgba(45,141,255, 0.5);
  color: #fff;
  font-size: 26px; font-weight: 400;
  cursor: pointer;
  display: grid; place-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .15s, transform .12s;
  z-index: 10001;
  line-height: 1;
}
.lightbox__close:hover{
  background: var(--accent);
  transform: scale(1.06);
}

.case__body{
  padding: 26px 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.case__title{
  font-size: 24px; line-height: 1.2;
  font-weight: 800;
  margin: 0;
  letter-spacing: -.01em;
  color: var(--ink);
}

.case__lead{
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  max-width: 580px;
}

.case__specs-head{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 -4px;
}
.case__specs-head::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.case__specs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.spec{
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  position: relative;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
  min-height: 138px;
}
.spec:hover{
  transform: translateY(-2px);
  background: var(--bg);
  border-color: var(--line-2);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.spec__ico{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  margin-bottom: 2px;
  box-shadow: 0 4px 12px var(--accent-shadow);
}
.spec__ico svg{
  width: 19px; height: 19px;
  display: block;
}
.spec__label{
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mute);
  line-height: 1.25;
}
.spec__value{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}
.spec__value--up::before,
.spec__value--down::before{
  content: "";
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  display: inline-block;
  margin-right: 5px;
  position: relative;
  top: -2px;
}
.spec__value--up::before{
  border-bottom: 7px solid var(--ink);
}
.spec__value--down::before{
  border-top: 7px solid var(--ink);
}
.spec__sub{
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}

/* hide icon sprite from layout */
.cases-icons{
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* slider nav */
.cases-slider__nav{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
}
.cases-slider__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: rgba(20,30,55,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s, opacity .15s;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.cases-slider__arrow--prev{ left: -16px; }
.cases-slider__arrow--next{ right: -16px; }
.cases-slider__arrow:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 8px 24px var(--accent-shadow);
}
.cases-slider__arrow:hover{ transform: translateY(-50%) scale(1.04); }
.cases-slider__arrow:active{ transform: translateY(-50%) scale(.96); }
.cases-slider__arrow[disabled]{
  opacity: .2;
  cursor: not-allowed;
  pointer-events: none;
}

.cases-slider__counter{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.01em;
  min-width: 100px;
  justify-content: center;
}
.cases-slider__counter-current{
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
}
.cases-slider__counter-sep{
  font-size: 22px;
  color: var(--line-2);
  font-weight: 600;
  padding: 0 2px;
}
.cases-slider__counter-total{
  font-size: 18px;
  color: var(--mute);
  font-weight: 700;
}

.cases-slider__dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.cases-slider__dot{
  width: 28px; height: 4px;
  border-radius: 999px;
  border: 0;
  background: var(--line-2);
  cursor: pointer;
  padding: 0;
  transition: background .2s, width .2s;
}
.cases-slider__dot:hover{ background: var(--ink-3); }
.cases-slider__dot.is-active{
  background: var(--ink);
  width: 44px;
}

/* ───── PITCH ───── */
.pitch{
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}
.pitch::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  opacity: .55;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
}
.pitch > .container{ position: relative; z-index: 1; }

.pitch__head{
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.pitch__title{
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.08;
  margin: 0 0 18px;
}
.pitch__lead{
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 auto;
  max-width: 620px;
}
.pitch__lead b{ color: var(--ink); font-weight: 700; }

.plans{
  display: grid;
  grid-template-columns: 1fr auto 1.15fr;
  gap: 18px;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto 40px;
}

.plan{
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 30px 30px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform .2s, box-shadow .2s;
}
.plan:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.plan--hero{
  background: linear-gradient(160deg, #0F2440 0%, #051736 100%);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 12px 36px -12px var(--accent-shadow), inset 0 0 0 1px rgba(45,141,255,.25);
  padding-top: 44px;
}
.plan__ribbon{
  position: absolute;
  top: -14px; left: 24px;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  box-shadow: 0 6px 18px var(--accent-shadow);
}

.plan__head{ display: flex; flex-direction: column; gap: 6px; }
.plan__name{
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.plan--hero .plan__name{ color: rgba(255,255,255,.6); }
.plan__hint{
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.plan--hero .plan__hint{ color: #fff; }

.plan__price{
  padding: 22px 0 18px;
  border-top: 1.5px solid var(--line);
  border-bottom: 1.5px dashed var(--line);
}
.plan--hero .plan__price{
  border-top-color: rgba(255,255,255,.18);
  border-bottom-color: rgba(255,255,255,.14);
}
.plan__price-num{
  font-size: clamp(48px, 5.4vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline;
}
.plan--hero .plan__price-num{ color: #fff; }
.plan__price-num span{
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -.005em;
}
.plan__price-meta{
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 10px;
  line-height: 1.4;
}
.plan--hero .plan__price-meta{ color: rgba(255,255,255,.72); }
.plan__price-meta b{
  font-weight: 800;
  color: var(--ink);
  font-size: 16px;
}
.plan--hero .plan__price-meta b{ color: #fff; }

.plan__list{
  display: grid; gap: 12px;
  margin: 0; padding: 0;
  list-style: none;
}
.plan__list li{
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.plan--hero .plan__list li{ color: rgba(255,255,255,.92); }
.plan__list li::before{
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}
.plan--hero .plan__list li::before{
  border-color: #fff;
}

.plan .btn{ margin-top: auto; }
.plan--hero .btn--primary{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.plan--hero .btn--primary:hover{
  background: var(--accent-2);
  border-color: var(--accent-2);
}

/* arrow between plans */
.plans__arrow{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 4px;
  min-width: 110px;
  color: var(--ink);
}
.plans__arrow-num{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plans__arrow-line{
  width: 80px;
  color: var(--ink);
  opacity: .65;
}
.plans__arrow-cap{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  text-align: center;
  max-width: 100px;
  line-height: 1.4;
}

/* promo pill - left-aligned eyebrow in the pitch head */
.promo-badge{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 7px 14px 7px 12px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.promo-badge__dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink);
}

/* small "Акция" tag in the plan card corner - monochrome */
.plan__promo{
  position: absolute;
  top: 18px; right: 18px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--ink);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 2;
}
.plan__promo--hero{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.55);
}

/* old price (crossed-out) above the promo price */
.plan__price-old{
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
  line-height: 1.2;
}
.plan__price-old-label{
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.plan__price-old-num{
  font-size: 15px;
  color: var(--ink-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.plan__price-old-num s{
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(15,15,16,.55);
}
.plan--hero .plan__price-old-label,
.plan--hero .plan__price-old-num{
  color: rgba(255,255,255,.55);
}
.plan--hero .plan__price-old-num s{
  text-decoration-color: rgba(255,255,255,.5);
}
.plan__price-meta b{ color: var(--ink); }
.plan--hero .plan__price-meta b{ color: #fff; }

/* ───── seats (clean centered notice) ───── */
.pitch__seats{
  max-width: 680px;
  margin: 56px auto 0;
  text-align: center;
}
.seats__row{
  display: inline-flex; gap: 10px;
  margin-bottom: 18px;
}
.seats__dot{
  position: relative;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--bg);
}
.seats__dot--taken{
  background: var(--ink);
  opacity: .35;
}
.seats__dot--taken::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px; height: 1.5px;
  background: var(--bg);
  transform: rotate(45deg);
  border-radius: 1px;
}
.seats__main{
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.seats__main b{ color: var(--ink); font-weight: 800; }
.seats__taken{
  display: inline-block;
  font-size: 14px;
  color: var(--mute);
  margin-left: 6px;
  font-weight: 600;
}
.seats__sub{
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.seats__sub b{ color: var(--ink); font-weight: 700; }
.seats__sub a{
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  font-weight: 600;
}

/* ───── QUIZ ───── */
.quiz__grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
}
.quiz__left .section__eyebrow{ margin-bottom: 18px; }
.quiz__left .section__title{ font-size: clamp(28px, 3vw, 40px); margin-bottom: 18px; }
.quiz__left .section__lead{ margin-bottom: 24px; }
.quiz__points{
  display: grid; gap: 12px;
  margin-bottom: 24px;
}
.quiz__points li{
  position: relative;
  padding-left: 22px;
  font-size: 15px; line-height: 1.55;
  color: var(--ink-2);
}
.quiz__points li::before{
  content: ""; position: absolute;
  left: 0; top: 9px; width: 10px; height: 2px;
  background: var(--ink);
}
.quiz__small{
  font-size: 14px; color: var(--mute);
  margin: 0;
}
.quiz__small a{ color: var(--ink); border-bottom: 1px solid var(--ink); }

.form{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
}
.form__head{ margin-bottom: 22px; }
.form__step{
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); font-weight: 700;
  margin-bottom: 8px;
}
.form__progress{
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.form__progress span{
  display: block; height: 100%;
  background: var(--ink);
  transition: width .25s ease;
}
.form__step-body{ display: grid; gap: 14px; margin-bottom: 18px; }
.form__label{
  font-size: 13px; font-weight: 600;
  color: var(--ink-2);
  margin-top: 6px;
}
.form__input{
  width: 100%;
  padding: 14px 16px;
  font: inherit; font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s;
  -webkit-appearance: none; appearance: none;
}
.form__input::placeholder{ color: var(--mute); }
.form__input:focus{ outline: none; border-color: var(--ink); }
.form__input[type="text"][name="business"]{ font-weight: 500; }

.form__small{
  font-size: 12px; color: var(--mute);
  margin: 14px 0 0;
  text-align: center;
}

/* consent */
.consent{
  display: flex; gap: 10px; align-items: flex-start;
  cursor: pointer; user-select: none;
  font-size: 13px; line-height: 1.45; color: var(--ink-3);
  margin: 8px 0 16px;
  position: relative;
}
.consent__input{ position: absolute; opacity: 0; width: 0; height: 0; }
.consent__box{
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--ink-3); border-radius: 5px;
  background: var(--bg); position: relative;
  transition: background .15s, border-color .15s;
}
.consent__input:checked + .consent__box{
  background: var(--ink); border-color: var(--ink);
}
.consent__input:checked + .consent__box::after{
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent a{ color: var(--ink); border-bottom: 1px solid var(--ink-3); }

/* ───── THANKS PAGE ───── */
.thanks{
  padding: 96px 0 96px;
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: center;
}
.thanks__inner{
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.thanks__check{
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  margin: 0 auto 28px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
.thanks__title{
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 22px;
}
.thanks__lead{
  font-size: 18px; line-height: 1.55;
  color: var(--ink-3);
  margin: 0 auto 44px;
  max-width: 600px;
}
.thanks__steps{
  display: grid;
  gap: 14px;
  margin: 0 0 40px;
  text-align: left;
}
.thanks__step{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
}
.thanks__step-num{
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.thanks__step-text{
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
}
.thanks__step-text b{
  color: var(--ink);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.thanks__ctas{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.thanks__small{
  font-size: 14px;
  color: var(--mute);
  margin: 0;
}
.thanks__small a{
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  font-weight: 600;
}

@media (max-width: 480px){
  .thanks{ padding: 56px 0; min-height: 0; }
  .thanks__check{ width: 72px; height: 72px; margin-bottom: 22px; }
  .thanks__title{ font-size: 32px; }
  .thanks__lead{ font-size: 16px; margin-bottom: 32px; }
  .thanks__step{ padding: 16px 18px; gap: 14px; grid-template-columns: 38px 1fr; }
  .thanks__step-num{ width: 38px; height: 38px; font-size: 16px; }
  .thanks__step-text{ font-size: 14px; }
  .thanks__ctas .btn{ width: 100%; }

}

/* ───── FOOTER ───── */
.footer{
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 32px 0;
  font-size: 13px;
  color: var(--ink-3);
}
.footer__inner{
  display: flex; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.footer__brand{ font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.footer__legal{ color: var(--mute); }
.footer__docs{ display: flex; gap: 22px; flex-wrap: wrap; }
.footer__docs a{
  color: var(--ink-3);
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.footer__docs a:hover{ color: var(--ink); border-color: var(--ink); }

/* ───── COOKIE ───── */
.cookie{
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  z-index: 9000;
  max-width: 520px; margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
}
.cookie[hidden]{ display: none; }
.cookie__text{
  margin: 0;
  font-size: 13px; line-height: 1.5;
  color: var(--ink-3);
  flex: 1;
}
.cookie__text a{ color: var(--ink); border-bottom: 1px solid var(--ink-3); cursor: pointer; }
.cookie__btn{
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  border: 0;
  font-weight: 600; font-size: 14px;
  cursor: pointer;
}
.cookie__btn:hover{ background: var(--accent-2); }

/* ───── MODAL ───── */
.modal{
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(3,6,15,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal[hidden]{ display: none; }
.modal__box{
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 560px; width: 100%; max-height: 85vh; overflow: auto;
  position: relative;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
}
.modal__close{
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px;
  border: 1px solid rgba(45,141,255,0.35);
  border-radius: 50%;
  background: rgba(45,141,255,0.15);
  color: #fff;
  font-size: 20px; cursor: pointer; line-height: 1;
  display: grid; place-items: center;
  transition: background .15s, transform .12s;
}
.modal__close:hover{
  background: var(--accent);
  transform: scale(1.05);
}
.doc{ font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.doc h2{ font-size: 20px; margin: 0 0 14px; color: var(--ink); }
.doc h3{ font-size: 15px; margin: 18px 0 8px; color: var(--ink); }
.doc p{ margin: 0 0 10px; }

/* ===========================================================
   QUIZ - секция-CTA и popup-квиз
   =========================================================== */

/* ───── QUIZ - CTA секция ───── */
.quiz-cta{ padding: 80px 0; }
.quiz-cta__card{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px 52px;
  box-shadow: var(--shadow-sm);
}
.quiz-cta__left .section__eyebrow{ margin-bottom: 14px; }
.quiz-cta__left .section__title{
  font-size: clamp(26px, 2.6vw, 36px);
  margin-bottom: 14px;
  line-height: 1.18;
}
.quiz-cta__left .section__lead{ margin-bottom: 20px; }
.quiz-cta__left .section__lead a{ color: var(--ink); border-bottom: 1px solid var(--ink); }
.quiz-cta__points{ display: grid; gap: 10px; margin: 0; }
.quiz-cta__points li{
  position: relative;
  padding-left: 22px;
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-2);
}
.quiz-cta__points li::before{
  content: ""; position: absolute;
  left: 0; top: 9px; width: 10px; height: 2px;
  background: var(--ink);
}
.quiz-cta__right{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
  display: grid; gap: 16px;
  box-shadow: var(--shadow-md);
}
.quiz-cta__meta{
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line-2);
}
.quiz-cta__meta-num{
  font-size: 44px; line-height: 1; font-weight: 800;
  color: var(--ink); letter-spacing: -.02em;
}
.quiz-cta__meta-cap{ font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.quiz-cta__btn{ font-size: 16px; }
.quiz-cta__small{
  margin: 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--mute);
  text-align: center;
}
.quiz-cta__small b{ color: var(--ink-2); }

/* ───── QUIZ - popup ───── */
.modal--quiz{
  padding: 20px;
  align-items: center;
  justify-content: center;
}
.modal__box--quiz{
  padding: 0;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px var(--line);
}
.modal__box--quiz .modal__close{
  z-index: 5;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(45,141,255,0.15);
  border: 1px solid rgba(45,141,255,0.35);
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  transition: background .15s, transform .12s;
}
.modal__box--quiz .modal__close:hover{
  background: var(--accent);
  transform: scale(1.05);
}
.quiz{
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
}
.quiz__head{
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.quiz__head-row{
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 12px;
}
.quiz__step-label{
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ink);
}
.quiz__head-hint{ font-size: 12px; color: var(--mute); }
.quiz__progress{
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.quiz__progress span{
  display: block; height: 100%;
  background: var(--ink);
  transition: width .3s ease;
}
.quiz__stage{
  padding: 28px;
  overflow-y: auto;
  flex: 1 1 auto; min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.quiz-step{ display: none; }
.quiz-step.is-active{ display: block; animation: quizFade .25s ease; }
@keyframes quizFade{
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quiz-step__eyebrow{
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute); font-weight: 700;
  margin-bottom: 10px;
}
.quiz-step__title{
  font-size: 22px; line-height: 1.25;
  margin: 0 0 8px;
  color: var(--ink);
}
.quiz-step__hint{
  font-size: 14px; line-height: 1.5;
  color: var(--ink-3);
  margin: 0 0 20px;
}
.quiz__input{
  width: 100%;
  padding: 16px 18px;
  font: inherit; font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.quiz__input::placeholder{ color: var(--mute); }
.quiz__input:focus{
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(15,15,16,.06);
}
.quiz__input.is-invalid{
  border-color: #c2362a;
  box-shadow: 0 0 0 4px rgba(194,54,42,.08);
}
.quiz__field-label{
  display: block;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-2);
  margin: 14px 0 8px;
}
.quiz-options{ display: grid; gap: 10px; }
.quiz-options--cols-2{ grid-template-columns: 1fr 1fr; }
.quiz-option{ position: relative; display: block; cursor: pointer; }
.quiz-option input{
  position: absolute; opacity: 0; inset: 0;
  width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.quiz-option__box{
  display: block;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.quiz-option__box--compact{ padding: 18px 16px; text-align: center; }
.quiz-option__title{
  display: block;
  font-weight: 600; font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
}
.quiz-option__sub{
  display: block;
  margin-top: 4px;
  font-size: 13px; color: var(--ink-3);
  line-height: 1.4;
}
.quiz-option:hover .quiz-option__box{ border-color: var(--ink-3); }
.quiz-option input:checked + .quiz-option__box{
  border-color: var(--ink);
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.quiz-option input:focus-visible + .quiz-option__box{
  box-shadow: 0 0 0 3px rgba(15,15,16,.12);
}
.quiz-option:active .quiz-option__box{ transform: translateY(1px); }
.quiz__consent{
  display: flex; gap: 10px; align-items: flex-start;
  cursor: pointer; user-select: none;
  font-size: 13px; line-height: 1.45; color: var(--ink-3);
  margin: 18px 0 4px;
  position: relative;
}
.quiz__consent input{ position: absolute; opacity: 0; width: 0; height: 0; }
.quiz__consent-box{
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--ink-3); border-radius: 5px;
  background: var(--bg); position: relative;
  transition: background .15s, border-color .15s;
}
.quiz__consent input:checked + .quiz__consent-box{
  background: var(--ink); border-color: var(--ink);
}
.quiz__consent input:checked + .quiz__consent-box::after{
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.quiz__consent a{ color: var(--ink); border-bottom: 1px solid var(--ink-3); }
.quiz__foot{
  padding: 18px 28px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  display: flex; align-items: center; gap: 12px;
}
.quiz__back{
  background: transparent;
  border: 0;
  font-size: 14px; font-weight: 600;
  color: var(--ink-3);
  padding: 10px 6px;
  cursor: pointer;
  transition: color .15s;
}
.quiz__back:hover{ color: var(--ink); }
.quiz__back[hidden]{ display: none; }
.quiz__next, .quiz__submit{
  margin-left: auto;
  min-width: 220px;
  justify-content: center;
}
.quiz__next[hidden], .quiz__submit[hidden]{ display: none; }
.quiz-step--done.is-active{
  display: flex;
  align-items: center; justify-content: center;
  min-height: 280px;
}
.quiz-done{ text-align: center; max-width: 420px; }
.quiz-done__check{
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.quiz-done__title{
  font-size: 22px; margin: 0 0 10px;
  color: var(--ink);
}
.quiz-done__text{
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 22px;
}
.quiz-done__text a{ color: var(--ink); border-bottom: 1px solid var(--ink); }

body.is-quiz-open{ overflow: hidden; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1100px){
  .hero__bullets{ max-width: 100%; }
}

@media (max-width: 960px){
  .section{ padding: 72px 0; }
  /* HEADER на мобиле: тёмный sticky-pill, без брендтекста */
  .header{
    position: sticky; top: 10px; z-index: 100;
    width: calc(100% - 24px);
    max-width: 440px;
    margin: 10px auto 0;
    padding: 0;
    background: rgba(10, 19, 34, 0.78);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid rgba(45,141,255,0.18);
    border-radius: 999px;
    box-shadow:
      0 8px 28px -10px rgba(0,0,0,.6),
      inset 0 1px 0 rgba(255,255,255,.05);
  }
  .header__inner{
    padding: 6px;
    gap: 0;
    justify-content: center;
  }
  /* брендмарк "Р" + текст бренда + nav-канал скрыты — оставляем только центрированную плашку-CTA */
  .header__brand,
  .header__brand-text,
  .header__brand-mark,
  .header__nav,
  .header__channel{ display: none !important; }
  .header__cta{
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 18px -4px var(--accent-shadow);
    text-align: center;
    white-space: normal;
    line-height: 1.2;
  }
  .header__cta:hover{ background: var(--accent-2); }

  /* hero на планшетах: убираем фоновую сцену и поджимаем */
  .hero{ padding: 48px 0 56px; }
  .hero__bg{ display: none; }
  .hero__veil{ display: none; }
  .hero::before{ display: none; }
  .hero__inner{ display: flex; flex-direction: column; }
  .hero__head{ margin-bottom: 28px; max-width: none; }
  .hero__bullets{
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
    max-width: none;
  }
  .hero__bullet{ padding: 52px 16px 18px; }

  .quiz__grid{
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* QUIZ-CTA secция стакается */
  .quiz-cta{ padding: 56px 0; }
  .quiz-cta__card{
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 28px;
  }
  .quiz-cta__right{ padding: 22px; }
  .quiz-cta__meta-num{ font-size: 36px; }

  /* QUIZ popup на мобиле — окошко по центру с отступами, НЕ во весь экран */
  .modal--quiz{
    padding: 16px;
    align-items: center;
    justify-content: center;
  }
  .modal__box--quiz{
    max-width: 520px;
    max-height: 82vh;
    height: auto;
    border-radius: 20px;
  }
  .quiz__head{ padding: 18px 22px 14px; }
  .quiz__stage{ padding: 22px; }
  .quiz__foot{ padding: 14px 22px 18px; }
  .quiz__next, .quiz__submit{ min-width: 0; flex: 1; }

  .plans{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .plans__arrow{
    flex-direction: row;
    min-width: 0;
    padding: 6px 0;
  }
  .plans__arrow-line{
    width: 60px;
    transform: rotate(90deg);
  }
  .plans__arrow-cap{ text-align: left; max-width: none; }

  /* pitch head - stack on tablet/mobile */
  .pitch__head{ margin-bottom: 44px; }

  .case{
    border-radius: 14px;
  }
  .case__niche{
    margin: 14px auto 0;
    padding: 5px 12px;
    font-size: 10.5px;
    letter-spacing: .12em;
  }
  .case__shot{
    aspect-ratio: 16 / 7;
    min-height: 0;
    padding: 10px;
    margin-top: 12px;
  }
  .case__shot img{ box-shadow: 0 3px 12px rgba(0,0,0,.08); }
  .case__body{ padding: 14px 14px 16px; gap: 9px; }
}

@media (max-width: 480px){
  .container{ padding: 0 18px; }
  .section{ padding: 56px 0; }

  .header__inner{ padding: 12px 18px; }
  .header__brand-text{ display: none; }
  .header__nav{ display: none; }

  /* ─── HERO на мобиле - тёмная композиция по референсу ─── */
  /* (хедер уже скрыт глобально на ≤960px выше) */

  /* прячем десктоп-вариант hero полностью */
  .hero__bg, .hero__veil, .hero__inner{ display: none !important; }

  .hero{
    position: relative;
    padding: 0;
    background: #03060F; /* почти чёрный navy - глубже, без фиолетового оттенка */
    color: #fff;
    overflow: hidden;
    isolation: isolate;
  }
  /* размытый фон сцены - ::before с blur'ом и затемнением через brightness */
  .hero::before{
    content: '';
    position: absolute;
    inset: -16px;
    background: url('../assets/img/mob1.png') no-repeat center top / cover;
    filter: blur(10px) brightness(0.55);
    z-index: -2;
  }
  /* единая тёмная вуаль (без AI-градиента) */
  .hero::after{
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(3, 6, 15, 0.62);
    z-index: -1;
    pointer-events: none;
  }

  .hero-m{
    display: flex;
    flex-direction: column;
    padding: 24px 18px 22px;
    color: #fff;
    position: relative;
    z-index: 1;
  }
  /* внутренний хедер hero убран — теперь живёт глобальный sticky-header */
  /* in-hero навигация полностью убрана — её роль выполняет глобальный sticky-header */
  .hero-m__top{ display: none !important; }
  .hero-m__stage{ display: contents; }

  /* фото человека - в потоке, центрированно, в середине между title и bullets */
  .hero-m__photoBox{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 6px 0 4px;
    /* лёгкая радиальная подсветка вокруг фигуры, чтобы вписалось в сцену */
    background:
      radial-gradient(ellipse 70% 55% at 50% 65%, rgba(45,141,255,0.18) 0%, rgba(45,141,255,0) 70%);
  }
  .hero-m__photo{
    display: block;
    height: auto;
    width: 78%;
    max-width: 320px;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    filter: drop-shadow(0 18px 22px rgba(45,141,255,0.22))
            drop-shadow(0 0 32px rgba(7,5,18,0.65));
  }

  /* интро - на всю ширину, заголовок по центру */
  .hero-m__intro{
    position: relative;
    z-index: 2;
    max-width: none;
    padding-top: 18px;
    margin-bottom: 6px;
    text-align: center;
  }
  .hero-m__eyebrow{
    display: inline-block;
    font-size: 10px;
    letter-spacing: .14em;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
    text-transform: uppercase;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: rgba(45,141,255,0.10);
    backdrop-filter: blur(4px);
    white-space: nowrap;
  }
  .hero-m__title{
    /* 3 строки по центру */
    font-size: clamp(44px, 13.5vw, 62px);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    text-align: center;
  }
  .hero-m__accent{
    color: #2D8DFF;
    position: relative;
    display: inline-block;
    text-shadow: 0 0 24px rgba(45,141,255,0.45);
  }
  .hero-m__accent::after{
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: #2D8DFF;
    box-shadow: 0 0 12px rgba(45,141,255,0.7);
  }
  /* буллит-лист на всю ширину под стейджем - как в референсе */
  .hero-m__bullets{
    display: grid;
    gap: 12px;
    margin: -12px 0 18px; /* приподняли на 12px */
    padding: 0;
    list-style: none;
  }
  .hero-m__bullets li{
    position: relative;
    padding-left: 28px;
    font-size: 19px;        /* было 14.5px → +30% */
    line-height: 1.3;
    color: #fff;
    font-weight: 700;       /* было 500 → жирнее */
    letter-spacing: -.005em;
  }
  .hero-m__bullets li::before{
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #2D8DFF;
    box-shadow: 0 0 14px rgba(45,141,255,0.6);
  }

  /* старые 4 карточки убраны с мобильной композиции - освобождают воздух для photo+CTA */
  .hero-m__cards{ display: none; }

  /* CTA-баннер: фиолетовый градиент + круглая иконка справа */
  .hero-m__cta{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: linear-gradient(110deg, #1E6FE5 0%, #0D3F9F 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    padding: 16px 16px 16px 20px;
    margin: 0 0 14px;
    color: #fff;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 8px 24px rgba(13,61,159,0.35);
    transition: transform .15s, box-shadow .15s;
  }
  .hero-m__cta:active{ transform: translateY(1px); }
  .hero-m__cta-body{ display: block; min-width: 0; }
  .hero-m__cta-title{
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 6px;
    color: #fff;
  }
  .hero-m__cta-sub{
    display: block;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(255,255,255,.72);
    font-weight: 400;
  }
  .hero-m__cta-btn{
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #fff;
    color: #0A1F47;
    display: grid; place-items: center;
    flex-shrink: 0;
  }

  /* CTA внизу - последний элемент, без нижнего margin */
  .hero-m__cta{ margin-bottom: 0; }

  .section{ padding: 28px 0; }
  .section__title{ font-size: 20px; line-height: 1.2; margin-bottom: 10px; }
  .section__lead{ font-size: 13.5px; line-height: 1.45; }
  .section__head{ margin-bottom: 16px; }
  .section__head--left{ margin: 0 0 16px; }
  .section__eyebrow{
    font-size: 10px;
    padding: 3px 9px;
    margin-bottom: 10px;
  }

  /* десктопный таймлайн прячем на мобилке - показываем тёмные карточки sys-m */
  .steps{ display: none; }
  .sys-m{ display: flex; }

  /* секция в тёмное - чистый цвет без AI-градиента */
  .system{
    background: #03060F;
    color: #fff;
    padding: 44px 0 48px;
  }
  .system .container{ padding: 0 16px; }
  .system .section__head--left{
    margin: 0 auto 22px;
    text-align: center;       /* центрируем шапку на мобиле */
  }
  .system .section__head--left .section__eyebrow,
  .system .section__head--left .section__lead{ margin-left: auto; margin-right: auto; }
  .system .section__eyebrow{
    background: rgba(45,141,255,.10);
    border: 1px solid rgba(45,141,255,.30);
    color: #fff;
    padding: 4px 10px;
  }
  .system .section__title{ color: #fff; font-size: 24px; line-height: 1.15; }
  .system .section__lead{ color: rgba(255,255,255,.7); }

  /* ───── SYS-M: 6 тёмных карточек шагов в стиле leadgen.ru ───── */
  .sys-m{
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* карточка: ровный тёмный фон, без AI-градиента */
  .sys-m__card{
    position: relative;
    display: flex;
    flex-direction: column;
    background: #0A1322;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    padding: 24px 20px 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px -20px rgba(0,0,0,.6);
  }
  .sys-m__card::before{
    content: "";
    position: absolute;
    left: 22px; right: 22px; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
    pointer-events: none;
  }

  /* шапка: центрированно - эйбра + жирный белый title */
  .sys-m__head{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }
  .sys-m__eyebrow{
    font-size: 13px;
    line-height: 1;
    color: rgba(255,255,255,.6);
    font-weight: 500;
    letter-spacing: .01em;
  }
  .sys-m__eyebrow b{
    color: #2D8DFF;
    font-weight: 600;
  }
  .sys-m__title{
    margin: 0;
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.18;
    letter-spacing: -.01em;
    max-width: 18ch;
    text-wrap: balance;
  }

  /* медиа-слот: рамка-хэйрлайн с тонким переливом; внутри тематическая иконка по шагу */
  .sys-m__media{
    position: relative;
    margin: 22px 0 0;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.06);
    background: #0B0918;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* премиальная outline-иконка шага по центру слота */
  .sys-m__ico{
    width: 38%;
    max-width: 96px;
    height: auto;
    color: rgba(212,182,117,.85);
    filter: drop-shadow(0 0 18px rgba(212,182,117,.18));
  }
  /* если в слот положили <img>/<picture> - убираем рамку, картинка занимает весь слот */
  .sys-m__media > img,
  .sys-m__media > picture{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: inherit;
  }
  .sys-m__media:has(> img),
  .sys-m__media:has(> picture){
    border-color: transparent;
    background: transparent;
  }
  .sys-m__media:has(> img) .sys-m__ico,
  .sys-m__media:has(> picture) .sys-m__ico{
    display: none;
  }

  /* cases - ультра-компактно в 1 экран мобилы */
  .cases-slider{ max-width: none; }
  .case__title{ font-size: 16px; line-height: 1.2; letter-spacing: -.005em; }
  .case__lead{ font-size: 12.5px; line-height: 1.45; }
  .case__specs-head{ font-size: 9.5px; letter-spacing: .14em; }
  .case__specs{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .spec{ padding: 10px 11px 11px; gap: 4px; min-height: 0; border-radius: 12px; }
  .spec__ico{ width: 30px; height: 30px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
  .spec__ico svg{ width: 15px; height: 15px; }
  .spec__label{ font-size: 9px; letter-spacing: .1em; }
  .spec__value{ font-size: 16px; }
  .spec__value--up::before,
  .spec__value--down::before{
    border-left-width: 4px; border-right-width: 4px; margin-right: 4px; top: -1px;
  }
  .spec__value--up::before{ border-bottom-width: 6px; }
  .spec__value--down::before{ border-top-width: 6px; }
  .spec__sub{ font-size: 10.5px; line-height: 1.3; }

  /* нав слайдера - поджимаем */
  .cases-slider__nav{ gap: 14px; margin-top: 12px; }
  .cases-slider__arrow{ width: 38px; height: 38px; border-width: 1px; }
  .cases-slider__arrow svg{ width: 16px; height: 16px; }
  .cases-slider__arrow--prev{ left: 6px; }
  .cases-slider__arrow--next{ right: 6px; }
  .cases-slider__counter{ min-width: 60px; }
  .cases-slider__counter-current{ font-size: 20px; }
  .cases-slider__counter-sep{ font-size: 14px; }
  .cases-slider__counter-total{ font-size: 13px; }
  .cases-slider__dots{ margin-top: 8px; gap: 6px; }
  .cases-slider__dot{ width: 18px; height: 3px; }
  .cases-slider__dot.is-active{ width: 28px; }

  /* pitch - tighter spacing on phones */
  .pitch__title{ font-size: 28px; }
  .pitch__lead{ font-size: 15px; }
  .seats__main{ font-size: 15.5px; }

  /* tg-card шапка по центру на мобиле (pill + title + text), список .tg-card__what остаётся слева */
  .tg-card__left{ text-align: center; }
  .tg-card__what{ text-align: left; }

  .pitch__compare{ gap: 14px; }
  .compare__col{ padding: 22px; }
  .compare__total span{ font-size: 20px; }
  .compare__total--me span{ font-size: 24px; }

  .pitch__ctas{ flex-direction: column; }
  .pitch__ctas .btn{ width: 100%; }

  .form{ padding: 22px; }

  /* ───── QUIZ-CTA · мобильный dark «Условия работы» layout ───── */
  .quiz-cta{
    padding: 52px 0 40px;
    background: #03060F;
    color: #fff;
    position: relative;
  }
  /* верхний и нижний хэйрлайны: маркируют границы (sys-m сверху тоже dark, footer снизу white) */
  .quiz-cta::before,
  .quiz-cta::after{
    content: "";
    position: absolute; left: 0; right: 0;
    height: 1px;
    background: rgba(45,141,255,.18);
    pointer-events: none;
  }
  .quiz-cta::before{ top: 0; }
  .quiz-cta::after{ bottom: 0; opacity: .55; }

  /* убираем десктоп-карточку: полный bleed на тёмном */
  .quiz-cta__card{
    display: block;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    min-width: 0;
  }
  .quiz-cta__left, .quiz-cta__right{ min-width: 0; padding: 0; }
  /* центрируем шапку (eyebrow + title + lead), список ниже остаётся слева */
  .quiz-cta__left{ text-align: center; }
  .quiz-cta__left .section__lead{ margin-left: auto; margin-right: auto; }
  .quiz-cta__points{ text-align: left; }

  /* эйбра: solid цвет, без стэка opacity */
  .quiz-cta__left .section__eyebrow{
    background: transparent;
    border: 0;
    color: #5BA9FF;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0;
    margin-bottom: 18px;
  }

  /* big bold magazine-title с защитой от длинных русских слов */
  .quiz-cta__left .section__title{
    color: #fff;
    font-size: clamp(28px, 9vw, 40px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.025em;
    margin: 0 0 22px;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .quiz-cta__left .section__lead{
    color: rgba(255,255,255,.72);
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0 0 36px;
    overflow-wrap: break-word;
  }
  .quiz-cta__left .section__lead a{
    color: #fff;
    border-bottom: 1.5px solid rgba(255,255,255,.45);
  }

  /* нумерованный список 1./2./3./4. через CSS counter - em-based hang для масштабирования при zoom */
  .quiz-cta__points{
    list-style: none;
    counter-reset: quizpts;
    margin: 0 0 36px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .quiz-cta__points li{
    counter-increment: quizpts;
    position: relative;
    padding: 0 0 0 2.4em;
    font-size: 17px;
    line-height: 1.42;
    color: #fff;
    font-weight: 500;
    background: transparent;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .quiz-cta__points li::before{
    content: counter(quizpts) ".";
    position: absolute;
    left: 0; top: 0;
    width: auto; height: auto;
    background: none;
    color: rgba(255,255,255,.5);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.42;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }

  /* правая колонка: meta + CTA + small */
  .quiz-cta__right{
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 16px;
  }
  .quiz-cta__meta{
    gap: 14px;
    padding: 0 0 22px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    border-top: 0;
  }
  .quiz-cta__meta-num{
    color: #2D8DFF;
    font-size: 40px;
    line-height: 1;
    flex: 0 0 auto;
  }
  .quiz-cta__meta-cap{
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.4;
    min-width: 0;
  }

  /* CTA - белая кнопка с indigo текстом + purple-glow и тонким purple-кольцом */
  .quiz-cta__btn{
    background: #fff;
    color: #07051F;
    border: 0;
    border-radius: 14px;
    padding: 16px 18px;
    min-height: 56px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    box-shadow:
      inset 0 0 0 1px rgba(45,141,255,.20),
      0 14px 36px -12px rgba(45,141,255,.55);
  }
  .quiz-cta__btn:hover,
  .quiz-cta__btn:active{
    background: #F4F0FF;
    color: #07051F;
    border-color: transparent;
  }
  .quiz-cta__btn:focus-visible{
    outline: 2px solid #2D8DFF;
    outline-offset: 3px;
  }
  .quiz-cta__btn .btn__arrow{ font-size: 16px; flex-shrink: 0; }

  .quiz-cta__small{
    color: rgba(255,255,255,.65);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    margin: 0;
  }
  .quiz-cta__small b{ color: #2D8DFF; font-weight: 700; }

  .quiz__head{ padding: 16px 18px 12px; }
  .quiz__step-label{ font-size: 11px; }
  .quiz__head-hint{ display: none; }
  .quiz__stage{ padding: 20px 18px; }
  .quiz-step__title{ font-size: 19px; line-height: 1.25; }
  .quiz-step__hint{ font-size: 13.5px; margin-bottom: 16px; }
  .quiz__input{ padding: 14px 14px; font-size: 16px; border-radius: 12px; }
  .quiz-options--cols-2{ grid-template-columns: 1fr; }
  .quiz-option__box{ padding: 14px 14px; border-radius: 12px; }
  .quiz-option__title{ font-size: 14.5px; }
  .quiz-option__sub{ font-size: 12.5px; }
  .quiz__foot{
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .quiz__back{ font-size: 13px; padding: 8px 4px; }
  .quiz__next, .quiz__submit{
    padding: 16px 18px;
    font-size: 15px;
    min-height: 56px;
    border-radius: 14px;
  }
  .footer__inner{ flex-direction: column; gap: 18px; }
  .footer__docs{ gap: 14px; }

  .cookie{
    left: 12px; right: 12px; bottom: 12px;
    flex-direction: column; align-items: stretch;
    padding: 14px;
  }
  .cookie__btn{ width: 100%; }
}