/* =========================================
   Overplan redesign 2026 — base styles
   Токены: Figma overplan2026 / Home Desktop (1:464)
   Шрифт: Gilroy локально (Light / Medium / ExtraBold)
   fallback: Manrope
   ========================================= */

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Light.otf') format('opentype');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-ExtraBold.otf') format('opentype');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Surfaces (Figma: surface/*) === */
  --bg: #010101;                 /* surface/dark */
  --bg-2: #121A1C;               /* text/dark-grey — вторичный фон */
  --surface: #232728;            /* surface/grey-grafit */
  --surface-2: #393E41;          /* text/grey / stroke/grey */
  --surface-light: #CDD1D2;      /* surface/light */
  --bg-light: #F0F0F0;           /* bg/light */

  /* === Accents (Figma: surface/primary, secondary, additional) === */
  --lime: #D7FF67;               /* surface/primary, text/primary, icon/primary */
  --coral: #FF9E7A;              /* акцент направления лицензий */

  /* Акцент направления: лайм по умолчанию, раздел подменяет его на body */
  --accent: #D7FF67;
  --accent-on: #010101;
  --accent-text: #D7FF67;        /* для текста на тёмном: тёмные акценты осветляем */
  --accent-glow: var(--accent-glow);
  --lime-2: #D7FF67;
  --mint: #00FFC8;               /* surface/secondary, text/secondary */
  --cyan: #00FFC8;
  --aqua: #00FBFF;               /* акцент личных кабинетов */
  --indigo: #362F9D;             /* surface/additional */
  --blue: #3C52FC;               /* surface/additional 2 */

  /* === Text (Figma: text/*) === */
  --text-100: #E7ECED;           /* text/light */
  --text-80: rgba(231,236,237,0.80);  /* text/light-80% */
  --text-60: rgba(231,236,237,0.60);  /* text/light-60% */
  --text-40: rgba(231,236,237,0.40);  /* text/light-40% */
  --text-grey: #393E41;
  --text-grey-light: #94999A;
  --text-on-lime: #010101;

  /* === Strokes (Figma: stroke/*) === */
  --stroke-100: rgba(231,236,237,0.40); /* stroke/light-40% */
  --stroke-40: rgba(231,236,237,0.25);
  --stroke-15: rgba(231,236,237,0.15);  /* stroke/light-15% */
  --stroke-grey: #393E41;
  --stroke-grey-light: #B8BEC0;

  /* === Layout (кадр 1440, контент 1360 + gutter 40) ===
     Единая «рельса» контента: .container + --gutter.
     Баннер/хедер/секции должны делить одни и те же боковые поля. */
  --container: 1360px;
  --gutter: 40px;
  --radius-xs: 4px;              /* Figma small button */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  /* === Type scale (Figma 1440/*) — clamp + брейкпоинты ниже === */
  --fs-hyper: clamp(72px, 9vw, 128px);       /* displays/hyper title */
  --fs-super: clamp(56px, 7vw, 112px);
  --fs-page-super: clamp(48px, 5vw, 70px); /* headings/page title (h1) */
  --fs-page: clamp(40px, 4.5vw, 64px);     /* headings/section title (h2) */
  --fs-section: clamp(32px, 3.6vw, 64px);
  --fs-block: clamp(28px, 2.8vw, 36px);    /* headings/block title (h3) */
  --fs-card: clamp(24px, 2.2vw, 32px);     /* headings/card title */
  --fs-card-sm: clamp(20px, 1.8vw, 24px);  /* headings/small card title */
  --fs-large: clamp(20px, 1.8vw, 26px);    /* text body/large text */
  --fs-banner: clamp(20px, 2.4vw, 32px);   /* promo banner title */
  --fs-primary: 16px;                      /* text body/primary text */
  --fs-secondary: 14px;                    /* text body/secondary text */
  --fs-caption: 14px;                      /* text body/caption */
  --fs-tag: 13px;                          /* text body/tag, small button */
  --lh-display: 0.75;
  --lh-heading: 0.9;
  --lh-title: 1.1;
  --lh-body: 1.3;
  --tracking-tight: -0.03em;
  --tracking-display: -0.02em;

  /* === Controls: кнопки / теги (паддинги от текста) === */
  --btn-pad-y: 14px;
  --btn-pad-x: 24px;
  --btn-pad-x-nav: 20px;
  --btn-gap: 10px;
  --tag-h: 36px;
  --tag-pad-x: 16px;
  --banner-gap: 24px;
  --banner-min-h: 70px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--accent); color: var(--accent-on); }

html { scroll-behavior: smooth; }

body {
  font-family: 'Gilroy', 'Manrope', -apple-system, BlinkMacSystemFont,
               'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
  background: var(--bg);
  color: var(--text-100);
  font-size: var(--fs-primary);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* =========================================
   PROMO BANNER — Figma 1:466 / Banner Section.svg
   ========================================= */
.promo-banner {
  position: relative;
  z-index: 50;
  background: #3C52FC;
  font-size: 0;
}
.promo-banner__link {
  display: block;
}
.promo-banner__img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================
   HEADER / NAV — Figma Menu 1:561
   ========================================= */
.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(1,1,1,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* только вертикаль — горизонталь даёт .container (var(--gutter)) */
  /* симметрично: шапка sticky, контент не должен липнуть к нижней кромке */
  padding-top: 12px;
  padding-bottom: 12px;
}
.header__logo {
  flex-shrink: 0;
  color: var(--text-100);
  display: inline-flex;
  align-items: center;
}
.header__logo-img,
.header__logo-svg,
.footer__logo .header__logo-svg {
  display: block;
  height: 42px;
  width: auto;
  color: var(--text-100);
}
.header__logo-svg svg,
.footer__logo .header__logo-svg svg {
  display: block;
  height: 42px;
  width: auto;
}
.header__actions {
  display: flex;
  align-items: center;
  gap: 41px;
  margin-left: auto;
}
.header__nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.header__nav-link {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-60);
  transition: color .2s;
  padding: 14px 12px;
  white-space: nowrap;
}
.header__nav-link:hover { color: var(--text-100); }
.header__nav-link.is-active { color: var(--accent-text); }
/* Figma 1:1839 Header Project Discussion — icon 24 + «Меню», hug ~88×40 */
.header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--stroke-100);
  background: transparent;
  color: var(--text-60);
  font-size: var(--fs-tag);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  white-space: nowrap;
}
.header__burger:hover {
  color: var(--text-100);
  border-color: var(--text-100);
}
.header__burger-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: inherit;
}
.header__burger-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}
.header__burger-label {
  display: block;
}

/* =========================================
   BUTTONS — Figma Buttons / Tags
   ========================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap);
  font-weight: 500; font-size: var(--fs-secondary);
  line-height: 1.1;
  letter-spacing: -0.02em;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--lime {
  background: var(--accent); color: var(--accent-on);
}
.btn--lime:hover { background: var(--lime-2); }

/* Контурная CTA в шапке (Figma Menu Button) */
.btn--outline {
  background: transparent;
  color: var(--text-60);
  border-color: var(--stroke-100);
}
.btn--outline:hover {
  color: var(--text-100);
  border-color: var(--text-100);
  background: transparent;
}

.btn--ghost {
  background: transparent; color: var(--text-100);
  border-color: var(--stroke-100);
}
.btn--ghost:hover { background: var(--surface); }

.btn--sm {
  padding: calc(var(--btn-pad-y) - 4px) calc(var(--btn-pad-x) - 6px);
  font-size: var(--fs-tag);
}
.btn--nav {
  padding: var(--btn-pad-y) var(--btn-pad-x-nav);
  font-size: var(--fs-tag);
  flex-shrink: 0;
}

/* tag chip */
.tag {
  display: inline-flex; align-items: center;
  font-size: var(--fs-tag);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-80);
  border: 1px solid var(--stroke-15);
}
.tag.is-active { background: var(--accent); color: var(--accent-on); border-color: transparent; }

/* =========================================
   HERO — Figma Hero Section 1:479
   ========================================= */
.hero {
  position: relative;
  overflow: hidden;
  /*
    Идеал — 800px (Figma).
    Мин — чтобы контент с padding не нахлёстывался.
    Макс — не выше окна; минус баннер+хедер, чтобы низ hero (текст) оставался в кадре.
  */
  --hero-min-h: 560px;
  --hero-ideal-h: 800px;
  --hero-top-chrome: 160px; /* promo-banner + header */
  min-height: max(var(--hero-min-h), min(var(--hero-ideal-h), calc(100vh - var(--hero-top-chrome))));
  min-height: max(var(--hero-min-h), min(var(--hero-ideal-h), calc(100dvh - var(--hero-top-chrome))));
  max-height: calc(100vh - var(--hero-top-chrome));
  max-height: calc(100dvh - var(--hero-top-chrome));
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__ribs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 31px,
      rgba(255,255,255,0.045) 31px,
      rgba(255,255,255,0.045) 32px,
      transparent 32px,
      transparent 40px
    ),
    linear-gradient(
      180deg,
      rgba(213,255,99,0) 0%,
      rgba(213,255,99,0.06) 18%,
      rgba(213,255,99,0.18) 32%,
      rgba(213,255,99,0.03) 72%,
      rgba(213,255,99,0) 100%
    );
  background-size: 40px 100%, 100% 460px;
  background-position: 0 0, 0 110px;
  background-repeat: repeat, no-repeat;
  opacity: 0.55;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
}
/* Цифровая ДНК: холст лежит поверх сетки, но под текстом.
   Маска гасит анимацию внизу слева — там заголовок и контакты. */
.hero__dna {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .85;
  mask-image:
    linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.3) 82%, transparent 100%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, #000 14%, #000 100%);
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.3) 82%, transparent 100%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, #000 14%, #000 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.hero__media {
  position: absolute;
  top: 0;
  bottom: 0;
  right: max(0px, calc((100% - var(--container)) / 2));
  width: min(52%, 760px);
  pointer-events: none;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
}
.hero__slide.is-active {
  opacity: 1;
}
.hero__slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  /* край картинки растворяется в фоне, как в баннерах разделов */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%);
          mask-image: linear-gradient(to right, transparent 0, #000 30%);
}
.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(520px 380px at 68% 62%, rgba(215,255,103,0.22), transparent 70%);
  filter: blur(36px);
}
.hero__fade {
  position: absolute;
  left: 0; right: 0;
  height: 34%;
  pointer-events: none;
  z-index: 1;
}
.hero__fade--top {
  top: 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(1,1,1,0) 100%);
}
.hero__fade--bottom {
  bottom: 0;
  background: linear-gradient(0deg, var(--bg) 0%, rgba(1,1,1,0) 100%);
}
.hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 62px;
  padding-top: 120px;
}
.hero__bottom {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
}
.hero__contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 4px;
}
.hero__contact,
.hero__contact a {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-60);
  text-decoration: none;
}
.hero__contact a:hover { color: var(--text-100); }
.hero__copy {
  max-width: 783px;
  justify-self: end;
  width: 100%;
}
.hero__title {
  font-size: clamp(36px, 5.2vw, 70px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--text-100);
  margin: 0 0 28px;
}
.hero__title-em {
  color: var(--accent);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}
.hero__lead {
  margin: 0;
  max-width: 300px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-60);
}

/* =========================================
   FACTOID — Figma 1:566
   ========================================= */
.factoid {
  background: var(--bg-light);
  color: #393E41;
}
.factoid__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
.factoid-card {
  box-sizing: border-box;
  position: relative;
  min-height: 240px;
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  overflow: visible;
  transition: background .2s ease;
}
/* цвет направления появляется при наведении — на цифре и логотипе */
.factoid-card__num,
.factoid-card__top { transition: color .2s ease; }
.factoid-card__logo,
.factoid-card__mincifry,
.factoid-card__bitrix {
  filter: grayscale(1);
  opacity: .8;
  transition: filter .2s ease, opacity .2s ease;
}
.factoid-card:hover .factoid-card__logo,
.factoid-card:hover .factoid-card__mincifry,
.factoid-card:hover .factoid-card__bitrix {
  filter: none;
  opacity: 1;
}
.factoid-card:hover .factoid-card__num,
.factoid-card:hover .factoid-card__top { color: var(--accent-ink); }
.factoid-card__icon {
  position: relative;
  width: 100%;
  /* одна высота для логотипов и цифр: иначе цифры (140px * 0.85) делали
     блок на 9px выше и ряд выглядел неровным */
  min-height: 76px;
  height: auto;
  overflow: visible; /* иначе крупные цифры «3»/«29» обрезаются */
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}
.factoid-card__logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 60px;
  object-fit: contain;
  object-position: left bottom;
}
.factoid-card__mincifry {
  display: block;
  width: min(190px, 100%);
  height: auto;
  max-height: 44px;
  object-fit: contain;
  object-position: left bottom;
}
.factoid-card__bitrix {
  display: block;
  width: min(140px, 100%);
  height: auto;
  max-height: 60px;
  object-fit: contain;
  object-position: left bottom;
}
.factoid-card__numeric {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  max-width: 100%;
}
.factoid-card__num {
  font-family: 'Onest', 'Gilroy', 'Manrope', sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 6vw, 86px);
  line-height: 0.85; /* 0.75 + overflow:hidden резало глифы на medium */
  letter-spacing: -0.05em;
  color: #393E41;
}
.factoid-card__top {
  position: relative;
  top: -0.15em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  color: #393E41;
  white-space: nowrap;
  flex-shrink: 0;
}
.factoid-card__caption {
  margin: 0;
  margin-top: auto;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  color: #393E41;
  opacity: 0.8;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* =========================================
   TEXT / LEAD — Figma Text Section 1:571
   ========================================= */
.about-lead {
  background: var(--bg-light);
  color: var(--text-grey);
}
.about-lead__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 48px;
  padding-top: 320px;
  padding-bottom: 320px;
}
.about-lead__tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px 10px;
  border: 1px solid rgba(35, 39, 40, 0.4);
  border-radius: 100px;
  font-size: var(--fs-tag);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: rgba(35, 39, 40, 0.8);
  white-space: nowrap;
}
.about-lead__text {
  margin: 0;
  max-width: 668px;
  width: 100%;
  font-size: var(--fs-block);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-grey);
}
.about-lead__em {
  color: var(--text-grey-light);
}

/* =========================================
   FEEDBACK — Figma 1:733 / Text Section.svg (mobile)
   ========================================= */
.feedback {
  background: var(--bg-light);
  color: var(--text-grey);
  padding: 180px 0 120px;
}
.feedback__inner {
  display: grid;
  grid-template-columns: minmax(240px, 408px) minmax(0, 552px);
  justify-content: space-between;
  align-items: start;
  gap: 48px;
  padding-top: 0;
}
.feedback__head {
  position: sticky;
  top: 120px;
  padding-top: 0;
}
.feedback__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  padding: 12px 16px 10px;
  border: 1px solid rgba(35, 39, 40, 0.4);
  border-radius: 100px;
  font-size: var(--fs-tag);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: rgba(35, 39, 40, 0.8);
  white-space: nowrap;
}
.feedback__title {
  margin: 0;
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.9;
}
.feedback__title-line {
  display: block;
  color: var(--text-grey-light);
}
.feedback__title-line--accent {
  color: var(--text-grey);
}
.feedback__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.feedback-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 0 80px;
  border-bottom: 1px solid #B8BEC0;
  pointer-events: none;
}
.feedback-card:first-child {
  padding-top: 0;
}
.feedback-card + .feedback-card {
  padding-top: 80px;
}
.feedback-card__quote {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.feedback-card__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.feedback-card__author {
  min-width: 0;
}
.feedback-card__name,
.feedback-card__role {
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-grey-light);
}
.feedback-card__btn {
  pointer-events: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--text-grey);
  border-radius: var(--radius-xs);
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-grey);
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.feedback-card__btn:hover {
  background: var(--text-grey);
  color: var(--bg-light);
}

/* =========================================
   SECTIONS
   ========================================= */
.section { padding: 100px 0; }
.section-title {
  font-size: var(--fs-section);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.9;
  margin-bottom: 60px;
  text-align: center;
}
.section-title__em { color: var(--text-60); }
.section-title--projects {
  color: var(--text-grey);
  font-size: clamp(40px, 4.5vw, 64px);
}
.section-title--projects .section-title__em {
  color: var(--text-grey-light);
}

/* =========================================
   PROJECTS GRID — Figma Projects Section 1:574
   ========================================= */
.section--projects {
  background: var(--bg-light);
  padding: 80px 0;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  row-gap: 80px;
}
.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 40px;
  min-height: 720px;
  border-radius: 0; /* SVG: карточки без скругления */
  border: 0;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease;
}
.card:hover { transform: translateY(-2px); }

.card--lime { background: var(--lime); color: #232728; }
.card--mint { background: var(--mint); color: #232728; }
.card--dark {
  background: var(--bg);
  color: var(--text-100);
}
.card--indigo { background: var(--indigo); color: var(--text-100); }
.card--light { background: var(--surface-light); color: #232728; }

.card--w4  { grid-column: span 4; }
.card--w6  { grid-column: span 6; }
.card--w8  { grid-column: span 8; }
.card--w12 { grid-column: span 12; }

.card__glow {
  --glow-blur: clamp(40px, 8vw, 120px);
  --glow-spread: clamp(8px, 1.5vw, 16px);
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: clamp(24px, 6vw, 60px);
  border: 1px solid var(--accent);
  background: transparent;
  box-shadow: inset 0 0 var(--glow-blur) var(--glow-spread) var(--accent-glow);
}
.card--indigo .card__glow {
  top: -23%;
  right: -24%;
  width: 80%;
  height: 100%;
  transform: rotate(-60deg);
  transform-origin: center center;
}
.card--light.card--text .card__glow,
.card--light.card--w6 .card__glow {
  top: -35%;
  right: -70%;
  left: auto;
  width: 170%;
  height: 90%;
  transform: rotate(60deg);
  transform-origin: center center;
}

.card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 955px;
  flex-shrink: 0;
}
.card--text .card__content,
.card--article .card__content {
  max-width: none;
  flex: 1;
  justify-content: space-between;
}
.card--text {
  padding-bottom: 40px;
}
.card--text .card__content {
  justify-content: space-between;
  height: 100%;
}
.card__footer {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 2;
}
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-tag);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  padding: 12px 16px 10px;
  border-radius: 100px;
  border: 1px solid rgba(35, 39, 40, 0.4);
  background: transparent;
  color: rgba(35, 39, 40, 0.8);
  white-space: nowrap;
}
.card__tag--type,
.card__tag--fill {
  border-color: transparent;
  background: #232728;
  color: rgba(231, 236, 237, 0.8);
}
.card--dark .card__tag,
.card--indigo .card__tag {
  border-color: rgba(231, 236, 237, 0.4);
  color: rgba(231, 236, 237, 0.8);
}
.card--dark .card__tag--type,
.card--indigo .card__tag--type {
  background: var(--accent);
  border-color: transparent;
  color: rgba(35, 39, 40, 0.8);
}

.card__title {
  margin: 0;
  font-size: var(--fs-block);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.card__title--article {
  font-size: var(--fs-card);
  letter-spacing: -0.02em;
  margin-top: auto;
  position: relative;
  z-index: 2;
}
.card__lead {
  margin: 0;
  max-width: 400px;
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-grey);
}
.card--article {
  justify-content: space-between;
}

/* Feature cards: зона под заголовком фиксируется flex’ом,
   мокап целиком влезает (scale), низ прижат к низу карточки */
.card--has-visual {
  justify-content: flex-start;
  gap: 0;
  padding-bottom: 0; /* мокап к низу карточки без отступа */
  overflow: hidden; /* только нижний «свес» мокапа */
}
.card--has-visual .card__content {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-bottom: 20px;
}
.card__visual {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  pointer-events: none;
}
.card__browser {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 0;
}
.card__browser-frame {
  position: relative;
  display: block;
  width: max-content;
  max-width: min(886px, 72%);
  max-height: calc(100% + 24px);
  margin-bottom: -24px;
  line-height: 0;
}
.card--w8 .card__browser-frame {
  max-width: min(703px, 78%);
  max-height: 100%;
  margin-bottom: 0;
}
.card__browser-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
  border-radius: 0;
}
.card--w8 .card__browser-img {
  border-radius: 0;
}
/* Над мокапом, ширина = ширине картинки */
.card__browser-chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  z-index: 1;
  height: clamp(28px, 4.5vw, 40px);
  border-radius: 24px 24px 0 0;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}
.card__browser--chrome .card__browser-img {
  border-radius: 0;
}

.card__social {
  flex-shrink: 0;
  width: 37px;
  height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card__social-icon {
  display: block;
  width: 37px;
  height: 31px;
}

/* =========================================
   ALL PROJECTS — крупный CTA-блок
   ========================================= */
/* All Projects Section — Figma 1:717 / All Projects Section.svg */
.all-projects {
  padding: 0;
  background: var(--bg);
  color: var(--text-100);
  border-bottom: 1px solid var(--stroke-grey);
}
.all-projects__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 25%);
  align-items: stretch;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 447px;
  width: 100%;
}
.all-projects__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  padding: 80px var(--gutter);
  font-size: clamp(56px, 6.5vw, 90px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--text-100);
  text-decoration: none;
}
.all-projects__title-line {
  display: block;
}
.all-projects__title-line--accent {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--accent);
}
.all-projects__arrow {
  display: inline-flex;
  flex-shrink: 0;
  width: clamp(16px, 1.6vw, 24px);
  height: clamp(16px, 1.6vw, 24px);
  color: var(--accent);
  margin-top: 0.22em;
  transition: transform .25s;
}
.all-projects__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
.all-projects__title:hover .all-projects__arrow { transform: translate(6px, -6px); }

.all-projects__stats {
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-left: 1px solid var(--stroke-grey);
  border-right: 1px solid var(--stroke-grey);
  min-width: 0;
}
.all-projects__stat {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 80px var(--gutter) 40px;
  color: var(--text-grey-light);
}
.all-projects__stat + .all-projects__stat {
  border-top: 1px solid var(--stroke-grey);
  padding-top: 46px;
  padding-bottom: 80px;
}
.all-projects__num {
  flex-shrink: 0;
  font-family: 'Onest', 'Gilroy', 'Manrope', sans-serif;
  font-size: clamp(56px, 6.9vw, 99px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--text-grey-light);
}
.all-projects__label {
  font-family: 'Gilroy', 'Manrope', sans-serif;
  font-size: var(--fs-secondary);
  font-weight: 500;
  color: var(--text-grey-light);
  line-height: 1.15;
  max-width: 12ch;
  padding-top: 0.2em;
}

/* =========================================
   CLIENTS — Figma Our Clients Section 1:730
   Бесконечная карусель: 2 строки, дубликат трека
   ========================================= */
.clients {
  --clients-line: #363636;
  --clients-tile: 158px; /* Captura.png 1x */
  --clients-gap: 16px;
  --clients-row-gap: 23px;
  background: var(--bg);
  color: var(--text-100);
  padding: 200px 0 50px;
  overflow: hidden;
}
.clients__title {
  margin: 0 auto 84px;
  max-width: 12ch;
  text-align: center;
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.9;
}
.clients__title-line {
  display: block;
  color: var(--text-100);
}
.clients__title-line--accent {
  color: var(--accent);
}
.clients__marquees {
  display: flex;
  flex-direction: column;
  gap: var(--clients-row-gap);
  width: 100%;
}
.clients__row {
  overflow: hidden;
  width: 100%;
  line-height: 0;
}
.clients__track {
  display: flex;
  width: max-content;
  gap: var(--clients-gap);
  will-change: transform;
  animation: clients-marquee 90s linear infinite;
}
.clients__track--rtl {
  animation-name: clients-marquee-rtl;
}
.clients__tile {
  box-sizing: border-box;
  flex: 0 0 var(--clients-tile);
  width: var(--clients-tile);
  height: var(--clients-tile);
  background: var(--bg);
  border: 1px solid var(--clients-line);
  transition: background-color .25s ease, border-color .25s ease;
}
.clients__tile picture,
.clients__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
/* Логотипы в инфоблоке — JPG с белой подложкой. На чёрной плитке это белые
   прямоугольники, поэтому приводим их к монохрому: белое становится фоном,
   графика — светлой. Если появятся PNG/SVG с прозрачностью, фильтр убрать. */
.clients__tile img {
  filter: grayscale(1) invert(1);
  transition: filter .25s ease;
}
/* Наведение: строка останавливается, плитка светлеет под белую подложку
   логотипа, и он показывается в исходном цвете. */
.clients__row:hover .clients__track {
  animation-play-state: paused;
}
.clients__tile:hover {
  background: #fff;
  border-color: #fff;
}
.clients__tile:hover img {
  filter: none;
}
@keyframes clients-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes clients-marquee-rtl {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .clients__track {
    animation: none;
    transform: none;
  }
  .clients__tile--dup {
    display: none;
  }
}

/* Legacy IB grid (about / другие страницы) */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  overflow: hidden;
  background: var(--stroke-15);
  border: 1px solid var(--stroke-15);
}
.clients-grid__item {
  background: var(--bg);
  aspect-ratio: 16/10;
  display: grid;
  place-items: center;
  padding: 16px;
}
.clients-grid__item img {
  display: block;
  max-width: 70%;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.clients-grid__item:hover img { opacity: 1; }

/* =========================================
   REVIEWS
   ========================================= */
.reviews-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.review {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid var(--stroke-15);
}
.review__text {
  font-size: var(--fs-large);
  line-height: 1.55;
  color: var(--text-80);
  margin-bottom: 28px;
}
.review__author { display: flex; align-items: center; gap: 14px; }
.review__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--lime), var(--mint));
  flex-shrink: 0;
}
.review__name { font-weight: 600; font-size: 15px; }
.review__role { font-size: 13px; color: var(--text-60); margin-top: 2px; }

/* =========================================
   SERVICES — Figma 1:742 / Services Section(.mob).svg
   ========================================= */
.svc {
  background: var(--bg-light);
  color: var(--text-grey);
  padding: 100px 0 80px;
}
.svc__title {
  margin: 0 0 60px;
  text-align: center;
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--text-grey);
}
.svc__title-line {
  display: block;
  color: var(--text-grey);
}
.svc__title-line--muted {
  color: var(--text-grey-light);
}
.svc__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 800px;
  padding: 60px 40px 60px;
  overflow: hidden;
}
.svc-card__body {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: 548px;
}
.svc-card__heading {
  margin: 0 0 32px;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.svc-card__list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-card__list li {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.svc-card__list li a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.svc-card__list li a:hover {
  border-bottom-color: currentColor;
}
.svc-card__list li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
}
.svc-card__btn {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: var(--radius-xs);
  border: 1px solid currentColor;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.svc-card__glow {
  --glow-blur: clamp(40px, 8vw, 110px);
  --glow-spread: clamp(15px, 1.5vw, 16px);
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 60px;
  border: 1px solid var(--accent);
  background: none;
  box-shadow: inset 0 0 var(--glow-blur) var(--glow-spread) var(--accent-glow);
}
.svc-card--lime {
  background: var(--lime);
  color: var(--text-grey);
}
.svc-card--lime .svc-card__btn:hover {
  background: var(--text-grey);
  color: var(--lime);
}
.svc-card--dark {
  background: var(--bg);
  color: var(--text-100);
}
.svc-card--dark .svc-card__glow {
  top: 38%;
  right: -43%;
  width: 95%;
  height: 110%;
  transform: rotate(-55deg);
  transform-origin: center center;
}
.svc-card--dark .svc-card__btn {
  border-color: var(--text-100);
  color: var(--text-100);
}
.svc-card--dark .svc-card__btn:hover {
  background: var(--text-100);
  color: var(--bg);
}
.svc__note {
  margin: 80px auto 0;
  max-width: 440px;
  text-align: center;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}

/* Legacy placeholder (не используется на главной) */
.directions-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.direction {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 48px;
  min-height: 380px;
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: transform .25s;
}
.direction:hover { transform: translateY(-4px); }
.direction--lime { background: var(--lime); color: var(--text-on-lime); }
.direction--mint { background: var(--surface); color: var(--text-100); }
.direction--mint::before {
  content: '';
  position: absolute; right: -120px; top: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(46,232,166,0.32), transparent 65%);
  pointer-events: none;
}
.direction__title {
  font-size: var(--fs-page);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 88%;
}
.direction__text {
  margin-top: 20px;
  font-size: var(--fs-large);
  opacity: 0.75;
  max-width: 80%;
}
.direction__arrow {
  margin-top: auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 26px;
  background: rgba(0,0,0,0.10);
}
.direction--mint .direction__arrow {
  background: rgba(255,255,255,0.10);
  color: var(--accent);
}

/* =========================================
   APPS — Figma 1:763 / Apps Section(.min).svg
   ========================================= */
.apps {
  background: var(--bg-light);
  color: var(--text-grey);
  padding: 0 0 0;
}
.apps__title {
  margin: 0 0 60px;
  padding-top: 100px;
  text-align: center;
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.9;
}
.apps__title-line {
  display: block;
  color: var(--text-grey);
}
.apps__title-line--muted {
  color: var(--text-grey-light);
}
.apps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1440px;
  margin: 0 auto;
}
.apps-card {
  display: flex;
  flex-direction: column;
  min-height: 563px;
  padding: 40px;
  border: 1px solid #B8BEC0;
  pointer-events: none;
}
.apps-card + .apps-card {
  margin-left: -1px;
}
.apps-card__body {
  flex: 1;
  min-width: 0;
}
.apps-card__label {
  display: block;
  margin-bottom: 20px;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-grey-light);
}
.apps-card__title {
  margin: 0 0 20px;
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-grey);
}
.apps-card__text {
  margin: 0;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-grey-light);
}
.apps-card__subs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-grey);
}
.apps-card__help {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #232728;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.apps-card__btn {
  pointer-events: auto;
  align-self: flex-start;
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--text-grey);
  border-radius: var(--radius-xs);
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-grey);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.apps-card__btn:hover {
  background: var(--text-grey);
  color: var(--bg-light);
}
.apps-card--accent {
  background: var(--accent);
  color: var(--text-grey);
}
.apps-card--accent .apps-card__title {
  color: var(--text-grey);
  margin-bottom: 0;
}
.apps-card--accent .apps-card__btn:hover {
  background: var(--text-grey);
  color: var(--accent);
}

/* Legacy placeholder apps-grid (другие страницы) */
.apps-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.app {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--stroke-15);
  border-radius: var(--radius-lg);
  padding: 28px;
  min-height: 260px;
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: transform .2s, border-color .2s;
}
.app:hover { transform: translateY(-3px); border-color: var(--accent); }
.app__num { font-size: 13px; color: var(--text-60); }
.app__title {
  margin-top: 20px;
  font-size: var(--fs-card);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.app__arrow { margin-top: auto; align-self: flex-end; font-size: 22px; color: var(--accent); }
.app--accent {
  background: var(--accent); color: var(--accent-on); border-color: transparent;
}
.app--accent .app__num { color: rgba(0,0,0,0.6); }
.app--accent .app__arrow { color: var(--accent-on); }

/* =========================================
   JOBS — Figma 1:770 / Jobs Section(.min).svg
   ========================================= */
.jobs {
  background: var(--bg-light);
  color: var(--text-grey);
}
.jobs__title {
  margin: 0 0 60px;
  padding-top: 100px;
  text-align: center;
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.9;
}
.jobs__title-line {
  display: block;
  color: var(--text-grey);
}
.jobs__title-line--muted {
  color: var(--text-grey-light);
}
.jobs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1440px;
  margin: 0 auto;
}
.jobs-card {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 40px;
  border: 1px solid #B8BEC0;
  pointer-events: none;
}
.jobs-card + .jobs-card {
  margin-left: -1px;
}
.jobs-card__body {
  flex: 1;
  min-width: 0;
}
.jobs-card__label {
  display: block;
  margin-bottom: 20px;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-grey-light);
}
.jobs-card__title {
  margin: 0;
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-grey);
}
.jobs-card__btn {
  pointer-events: auto;
  align-self: flex-start;
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--text-grey);
  border-radius: var(--radius-xs);
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-grey);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.jobs-card__btn:hover {
  background: var(--text-grey);
  color: var(--bg-light);
}
.jobs-card--accent {
  background: var(--mint);
  color: var(--text-grey);
}
.jobs-card--accent .jobs-card__btn:hover {
  background: var(--text-grey);
  color: var(--mint);
}

.jobs-practice {
  background: var(--bg);
  color: var(--text-100);
  overflow: hidden;
}
.jobs-practice__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
}
.jobs-practice__visual {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 720 / 334;
  background-color: var(--bg);
  background-image: var(--jobs-bg-desk);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  pointer-events: none;
}
@media (min-width: 721px) and (min-resolution: 1.5dppx) {
  .jobs-practice__visual {
    background-image: var(--jobs-bg-desk-2x);
  }
}
.jobs-practice__content {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  max-width: 710px;
  padding-top: 46px;
  padding-bottom: 46px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.jobs-practice__title {
  margin: 0 0 20px;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--mint);
}
.jobs-practice__text {
  margin: 0 0 40px;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-grey-light);
}
.jobs-practice__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--text-100);
  border-radius: var(--radius-xs);
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-100);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.jobs-practice__btn:hover {
  background: var(--text-100);
  color: var(--bg);
}

/* Legacy jobs-grid */
.jobs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.job {
  background: var(--surface);
  border: 1px solid var(--stroke-15);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-decoration: none;
  display: flex; flex-direction: column;
  min-height: 220px;
  transition: border-color .2s, transform .2s;
}
.job:hover { border-color: var(--accent); transform: translateY(-2px); }
.job__role {
  display: inline-block; align-self: flex-start;
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  background: var(--bg); color: var(--text-60);
  margin-bottom: 18px;
}
.job__title { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.01em; }
.job__arrow {
  margin-top: auto; align-self: flex-end;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); color: var(--accent);
  display: grid; place-items: center; font-size: 18px;
}

/* =========================================
   CTA BANNER
   ========================================= */
.cta {
  padding: 100px 0;
}
.cta__inner {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--stroke-15);
  border-radius: var(--radius-xl);
  padding: 72px 56px;
}
.cta__glow {
  position: absolute; right: -200px; top: -200px;
  width: 600px; height: 600px;
  background:
    radial-gradient(circle, rgba(46,232,166,0.30), transparent 60%),
    radial-gradient(circle at 30% 50%, rgba(215,255,103,0.18), transparent 65%);
  pointer-events: none;
  filter: blur(20px);
}
.cta__title {
  position: relative;
  font-size: var(--fs-page);
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.08;
  max-width: 760px;
  margin-bottom: 36px;
}
.cta__actions { position: relative; display: flex; flex-wrap: wrap; gap: 14px; }

/* =========================================
   FOOTER — Figma Footer Section(.min).svg
   Линии: #E7ECED @ 15%. Колонки: 40–617 / 617–963 / 963–1284 / 1284–1440
   ========================================= */
.footer {
  --footer-line: rgba(231, 236, 237, 0.15);
  background: var(--bg);
  color: var(--text-100);
  border-top: 0;
  padding: 80px 0 0;
}
.footer a {
  color: inherit;
  text-decoration: none;
}
.footer a:hover {
  color: var(--accent);
}

.footer__cta {
  border-top: 1px solid var(--footer-line);
  border-bottom: 1px solid var(--footer-line);
}
.footer__cta-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 2.4fr) minmax(100px, 1fr);
  align-items: start;
  gap: 24px;
  padding-top: 56px;
  padding-bottom: 56px;
}
.footer__up {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  color: var(--text-100);
  font-size: var(--fs-secondary);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.footer__up-icon {
  display: grid;
  color: var(--text-100);
  flex-shrink: 0;
}
.footer__up:hover {
  color: var(--accent);
}
.footer__up:hover .footer__up-icon {
  color: var(--accent);
}
.footer__cta-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  justify-self: center;
  width: 100%;
  max-width: 640px;
}
.footer__cta-title {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-100);
  max-width: 640px;
}
.footer__cta-title--mob {
  display: none;
}
.footer__cta-accent {
  color: var(--accent);
}
.footer__cta-phones {
  display: none;
}
.footer__cta-action {
  display: flex;
  justify-content: center;
  width: 100%;
}
.footer a.footer__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 438px;
  min-height: 42px;
  padding: 10px 24px;
  border-radius: var(--radius-xs);
  background: var(--accent);
  color: var(--accent-on);
  font-size: var(--fs-secondary);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: filter .2s;
}
.footer a.footer__cta-btn:hover {
  color: var(--accent-on);
  filter: brightness(1.05);
}
.footer__social {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
.footer__social-link {
  display: grid;
  place-items: center;
  line-height: 0;
}
.footer__social-link img {
  display: block;
  width: 41px;
  height: 41px;
}
.footer__social-link:hover {
  opacity: 0.85;
}

.footer__body {
  padding-top: 0;
  padding-bottom: 0;
}
.footer__cols {
  display: grid;
  /* колонки равной ширины: в макете правая была 156px, и восемь пунктов
     навигации жались в ней в две строки каждый */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 418px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.footer__cols.container {
  max-width: 1440px;
  padding-left: 40px;
  padding-right: 40px;
}
.footer__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 40px 28px 32px;
  border-left: 1px solid var(--footer-line);
  min-width: 0;
}
.footer__col:first-child {
  border-left: 0;
  padding-left: 0;
}
.footer__col--copy {
  justify-content: flex-start;
  padding-right: 28px;
}
.footer__logo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  color: var(--text-100);
}
.footer__col--contacts,
.footer__col--services {
  justify-content: flex-start;
}
.footer__col--services .footer__label {
  margin-bottom: 12px;
}
.footer__col--nav .footer__label {
  margin-bottom: 12px;
}
.footer__col--mob-split,
.footer__col--mob-meta,
.footer__col--mob-legal {
  display: none;
}
.footer__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-secondary);
  font-weight: 500;
  color: var(--text-grey-light);
  letter-spacing: -0.02em;
}
.footer__block {
  margin-bottom: 24px;
}
.footer__block:last-of-type {
  margin-bottom: 0;
}
.footer__value,
.footer__value a {
  margin: 0;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-100);
  letter-spacing: -0.02em;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
}
.footer__links a {
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-100);
  letter-spacing: -0.02em;
}
.footer__legal {
  display: block;
  margin-top: auto;
  padding-top: 48px;
  /* резерв под две строки: верхние линии правового ряда встают вровень */
  min-height: calc(48px + 13px * 1.35 * 2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-grey-light);
  letter-spacing: -0.02em;
}
.footer__col--contacts .footer__legal,
.footer__col--services .footer__legal {
  margin-top: auto;
}
.footer__legal--copy {
  /* правовой ряд подвала: ссылка держит верхнюю линию, копирайт идёт
     второй строкой — резерв под две строки у соседних колонок такой же */
  margin-top: auto;
  padding-top: 48px;
  min-height: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__legal--copy:hover { color: var(--text-100); }
.footer__copy {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-grey-light);
  letter-spacing: -0.02em;
}
.footer__copy--desk {
  margin-top: 2px;
}
.footer__form {
  padding: 0;
}
.footer__form:has(#callback-form:not([hidden])) {
  padding-bottom: 40px;
}
.footer__form-panel {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--footer-line);
  border-radius: var(--radius-xs);
}
.footer__form-panel[hidden] {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Legacy cta (если остался на внутренних) */
.cta {
  padding: 100px 0;
}
.cta__inner {
  position: relative;
}
@media (max-width: 1100px) {
  :root {
    --gutter: 28px;
    --fs-primary: 15px;
    --fs-secondary: 13px;
    --fs-caption: 13px;
    --btn-pad-y: 12px;
    --btn-pad-x: 20px;
    --btn-pad-x-nav: 18px;
    --tag-h: 34px;
    --tag-pad-x: 14px;
    --banner-gap: 16px;
  }
  .header__actions { display: none; }
  .header__burger { display: flex; }
  .hero { --hero-ideal-h: 640px; --hero-min-h: 520px; }
  .hero__bottom { grid-template-columns: 1fr; gap: 28px; }
  /* на телефоне картинка уходит фоном за текст */
  .hero__media { right: 0; width: 100%; opacity: .35; }
  .hero__slide-img {
    object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 85%);
            mask-image: linear-gradient(180deg, #000 0, transparent 85%);
  }
  .hero__copy { justify-self: stretch; max-width: none; }
  .factoid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factoid-card {
    min-height: 320px;
    padding: 64px 24px 32px;
    gap: 40px;
  }
  /* 2×2: внешний левый край у 1-й и 3-й ячеек */
  .factoid-card:nth-child(2n + 1) { border-left: 1px solid #B8BEC0; }
  .factoid-card__num { font-size: clamp(64px, 12vw, 96px); }
  .factoid-card__icon {
    min-height: 0;
    margin-top: auto; /* по центру только в 2×2 */
  }
  .about-lead__inner { padding-top: 240px; padding-bottom: 240px; gap: 32px; }
  .about-lead__text { max-width: 560px; }
  .projects-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    row-gap: 24px; /* SVG min: 24px между карточками */
  }
  .card {
    min-height: 466px; /* SVG min: кейсы 466 */
    padding: 24px 20px;
    border-radius: 0;
  }
  .card--has-visual { padding-bottom: 0; }
  .card--w4, .card--w6, .card--w8, .card--w12 { grid-column: span 6; }
  .card--article { min-height: 280px; } /* SVG min: новость 280 */
  .card__browser-frame { max-width: min(640px, 90%); }
  .card__browser-img { max-width: 100%; }
  .clients {
    padding: 100px 0 50px;
  }
  .clients__title {
    margin-bottom: 48px;
  }
  .clients-grid { grid-template-columns: repeat(3, 1fr); }
  .reviews-grid { grid-template-columns: 1fr; }
  .directions-grid { grid-template-columns: 1fr; }
  .apps-grid { grid-template-columns: repeat(2, 1fr); }
  .jobs-grid { grid-template-columns: 1fr; }
}

/* Banner Section Mob — менее 1024px */
@media (max-width: 1023px) {
  :root {
    --gutter: 20px;
    --fs-banner: 24px; /* фиксированный размер заголовка */
    --fs-tag: 12px;
    --tag-h: 28px;
    --tag-pad-x: 12px;
    --banner-gap: 12px;
    --banner-min-h: 70px;
  }

}

@media (max-width: 479px) {
  :root {
    --fs-banner: 16px;
  }
  .promo-banner__title {
    font-size: 16px;
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 20px;
    --fs-primary: 14px;
    --fs-secondary: 13px;
    --fs-caption: 12px;
    --fs-tag: 12px;
    --btn-pad-y: 12px;
    --btn-pad-x: 16px;
    --btn-pad-x-nav: 16px;
    --btn-gap: 8px;
    --tag-h: 28px;
    --tag-pad-x: 12px;
  }
  .header__inner { padding-top: 8px; padding-bottom: 8px; gap: 12px; }
  .factoid-card {
    min-height: 280px;
    padding: 48px 16px 24px;
    gap: 32px;
  }
  .factoid-card__num { font-size: clamp(56px, 18vw, 72px); letter-spacing: -0.04em; }
  .factoid-card__icon { min-height: 72px; }
  .factoid-card__bitrix { max-height: 72px; }
	.factoid-card__logo { max-height: 72px; }
  .factoid-card__mincifry { max-height: 40px; }
  .about-lead__inner {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 160px;
    padding-bottom: 160px;
    gap: 24px;
  }
  .about-lead__text { max-width: none; }
  .feedback {
    padding: 90px 0 64px;
  }
  .feedback__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .feedback__head {
    position: static;
  }
  .feedback__tag {
    margin-bottom: 24px;
  }
  .feedback__title {
    font-size: clamp(36px, 10vw, 48px);
  }
  .feedback-card {
    gap: 28px;
    padding: 0 0 48px;
  }
  .feedback-card + .feedback-card {
    padding-top: 48px;
  }
  .feedback-card__quote {
    font-size: 18px;
  }
  .feedback-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .svc {
    padding: 64px 0 48px;
  }
  .svc__title {
    margin-bottom: 40px;
    font-size: clamp(32px, 9vw, 40px);
  }
  .svc__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .svc-card {
    min-height: 531px;
    padding: 40px 16px 40px;
  }
  .svc-card__heading {
    margin-bottom: 24px;
    font-size: clamp(24px, 7vw, 28px);
  }
  .svc-card--dark .svc-card__glow {
    top: 48%;
    right: -40%;
    width: 120%;
    height: 100%;
  }
  .svc__note {
    margin-top: 48px;
    max-width: none;
    padding: 0 8px;
  }
  .apps__title {
    padding-top: 64px;
    margin-bottom: 40px;
    font-size: clamp(32px, 9vw, 40px);
  }
  .apps__grid {
    grid-template-columns: 1fr;
    padding: 0 var(--gutter);
    gap: 16px;
  }
  .apps-card {
    min-height: 0;
    padding: 32px 16px;
    margin-left: 0;
    border: 1px solid #B8BEC0;
  }
  .apps-card__title {
    font-size: clamp(22px, 6vw, 26px);
  }
  .apps-card__btn {
    margin-top: 28px;
  }
  .jobs__title {
    padding-top: 64px;
    margin-bottom: 40px;
    font-size: clamp(32px, 9vw, 40px);
  }
  .jobs__grid {
    grid-template-columns: 1fr;
    padding: 0 var(--gutter);
    gap: 16px;
  }
  .jobs-card {
    min-height: 0;
    padding: 32px 16px;
    margin-left: 0;
    border: 1px solid #B8BEC0;
  }
  .jobs-card__title {
    font-size: clamp(22px, 6vw, 26px);
  }
  .jobs-card__btn {
    margin-top: 28px;
  }
  .jobs-practice__inner {
    display: block;
    padding: 0;
  }
  .jobs-practice__visual {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    grid-column: auto;
    grid-row: auto;
    width: 50%;
    aspect-ratio: 1 / 1;
    background-image: var(--jobs-bg-mob);
    background-size: 100% 100%;
    background-position: bottom right;
    z-index: 0;
  }
  .jobs-practice__content {
    grid-column: auto;
    grid-row: auto;
    max-width: none;
    width: 100%;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    padding-top: 40px;
    padding-bottom: 32px;
  }
  .jobs-practice__title {
    font-size: clamp(24px, 7vw, 28px);
  }
  .jobs-practice__text {
    margin-bottom: 28px;
  }
  .section { padding: 64px 0; }
  .hero { --hero-ideal-h: 560px; --hero-min-h: 480px; }
  .hero__body { padding-top: 72px; padding-bottom: 40px; }
  .hero__lead { max-width: none; }
  .all-projects__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .all-projects__title {
    padding: 48px var(--gutter) 40px;
    font-size: clamp(48px, 14vw, 64px);
  }
  .all-projects__stats {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    border-left: 1px solid var(--stroke-grey);
    border-right: 1px solid var(--stroke-grey);
    border-top: 1px solid var(--stroke-grey);
  }
  .all-projects__stat {
    padding: 32px var(--gutter);
    gap: 12px;
    min-width: 0;
  }
  .all-projects__stat + .all-projects__stat {
    border-top: 0;
    border-left: 1px solid var(--stroke-grey);
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .all-projects__num {
    font-size: clamp(40px, 12vw, 56px);
  }
  /* Projects Section min.svg — 360: gutter 16, cards 466 / news 280 */
  .section--projects { padding: 48px 0; }
  .section--projects .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .card {
    min-height: 466px;
    padding: 20px 16px;
    border-radius: 0;
  }
  .card--has-visual { padding-bottom: 0; }
  .card--article { min-height: 280px; }
  .card--text { min-height: 466px; padding-bottom: 40px; }
  .card__title { font-size: clamp(22px, 6vw, 28px); }
  .card__title--article { font-size: clamp(20px, 5.5vw, 24px); }
  .card__browser-frame {
    max-width: min(296px, 90%);
    max-height: 100%;
    margin-bottom: 0;
  }
  .card__browser-img {
    max-width: 100%;
    max-height: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
  .card__browser-chrome {
    height: clamp(16px, 8%, 28px);
    border-radius: 12px 12px 0 0;
  }
  .card--has-visual .card__content { margin-bottom: 16px; }
  .clients {
    padding: 64px 0 50px;
  }
  .clients__title {
    margin-bottom: 32px;
    font-size: clamp(32px, 9vw, 40px);
  }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
  .apps-grid { grid-template-columns: 1fr; }
  .cta__inner { padding: 48px 28px; }
  .direction { padding: 32px; min-height: 300px; }

  .footer__cta {
    border-bottom: 0;
  }
  .footer__cta-row {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 40px;
    padding-bottom: 0;
  }
  .footer {
    padding-top: 0;
  }
  .footer__up {
    display: none;
  }
  .footer__social--desk {
    display: none;
  }
  .footer__cta-center {
    align-items: stretch;
    text-align: left;
    gap: 28px;
  }
  .footer__cta-title--desk {
    display: none;
  }
  .footer__cta-title--mob {
    display: block;
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.05;
    max-width: none;
  }
  .footer__cta-phones {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: clamp(22px, 6vw, 28px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
  }
  .footer__cta-phones a {
    color: var(--text-100);
  }
  /* Figma: линия y=383.5, кнопка y=424 → ~40px сверху и снизу */
  .footer__cta-action {
    margin: -28px calc(-1 * var(--gutter)) 0; /* -28px — схлопнуть gap родителя */
    width: calc(100% + 2 * var(--gutter));
    box-sizing: border-box;
    padding: 40px var(--gutter);
    border-top: 1px solid var(--footer-line);
    border-bottom: 1px solid var(--footer-line);
  }
  .footer__cta-btn,
  .footer a.footer__cta-btn {
    width: 100%;
    min-width: 0;
    min-height: 74px;
    border-radius: 8px;
    font-size: 16px;
  }
  .footer__cols {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
  }
  .footer__cols.container {
    padding-left: 0;
    padding-right: 0;
  }
  .footer__col--copy,
  .footer__col--contacts,
  .footer__col--services,
  .footer__col--nav {
    display: none;
  }
  .footer__col--mob-split {
    display: block;
    border-top: 0; /* линия уже у .footer__cta-action */
  }
  .footer__col--mob-meta,
  .footer__col--mob-legal {
    display: block;
  }
  .footer__col {
    border-left: 0;
    border-top: 1px solid var(--footer-line);
    padding: 28px var(--gutter);
  }
  .footer__col + .footer__col {
    padding-left: var(--gutter);
  }
  .footer__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .footer__split-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 16px;
    border-right: 1px solid var(--footer-line);
  }
  .footer__split-left a {
    font-size: var(--fs-secondary);
    font-weight: 500;
    color: var(--text-100);
  }
  .footer__split-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .footer__split-right a {
    font-size: var(--fs-caption);
    font-weight: 500;
    color: var(--text-100);
    line-height: 1.35;
  }
  .footer__addr {
    margin: 0 0 20px;
    font-size: var(--fs-secondary);
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-100);
  }
  .footer__social--mob {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
  }
  .footer__social--mob img {
    width: 40px;
    height: 40px;
  }
  .footer__col--mob-legal {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .footer__col--mob-legal a {
    font-size: var(--fs-caption);
    color: var(--text-grey-light);
  }
}

/* =========================================
   BREADCRUMB
   ========================================= */
.breadcrumb { padding: 16px 0; border-bottom: 1px solid var(--stroke-15); }
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; font-size: 13px; color: var(--text-60); }
.breadcrumb__sep { margin: 0 4px; opacity: 0.5; }
.breadcrumb__link { color: var(--text-80); text-decoration: none; }
.breadcrumb__link:hover { color: var(--accent-text); }
.breadcrumb__item--current { color: var(--text-100); }

/* =========================================
   BLOG LIST — Frame 28.svg
   ========================================= */
.blog-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
  color: var(--text-100);
  min-height: 486px;
  display: flex;
  align-items: flex-end;
  padding: 80px 0 40px;
}
.blog-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--container));
  background-image: image-set(
    url("../img/blog/hero.png") 1x,
    url("../img/blog/hero@2.png") 2x
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  /* фон картинки светлее фона страницы: без растушёвки видны края прямоугольника */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.blog-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.blog-hero__title {
  margin: 0;
  font-size: clamp(40px, 6.667vw, 96px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.blog-hero--article {
  color: var(--accent);
}
.blog-hero--article::before {
  background-image: image-set(
    url("../img/blog/hero-article.png") 1x,
    url("../img/blog/hero-article@2.png") 2x
  );
}
.blog-hero.blog-hero--art::before {
  /* иллюстрация справа, растворяется влево — как на обложке статьи */
  left: auto;
  right: max(0px, calc((100% - var(--container)) / 2));
  transform: none;
  width: min(58%, 820px);
  background-image: var(--hero-art);
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 45%, #000 92%, transparent 100%);
}
.blog-hero--art .blog-hero__title {
  max-width: 62%;
}
/* названия разделов бывают длинные («Продаем лицензии Битрикс24 и 1С-Битрикс
   со скидками и бонусами») — макетные 96px растягивали экран на всю высоту */
.blog-hero--services .blog-hero__title,
.blog-hero--integration .blog-hero__title,
.blog-hero--cases .blog-hero__title {
  font-size: clamp(32px, 4.2vw, 64px);
  line-height: 1;
  max-width: 24ch;
}
/* разделы: картинка — только фон, приглушённая, внимание остаётся на тексте */
.blog-hero.blog-hero--soft::before {
  opacity: .4;
  filter: saturate(.6);
}
.blog-hero--cases::before {
  background-image: image-set(
    url("../img/cases/hero.png") 1x,
    url("../img/cases/hero@2.png") 2x
  );
}
.blog-hero--services::before {
  background-image: image-set(
    url("../img/services/hero.png") 1x,
    url("../img/services/hero@2.png") 2x
  );
}
.blog-hero--licenses::before {
  background-image: image-set(
    url("../img/licenses/hero.png") 1x,
    url("../img/licenses/hero@2.png") 2x
  );
}
.blog-hero--licenses {
  align-items: stretch;
  min-height: 620px;
}
.blog-hero--apps::before {
  background-image: image-set(
    url("../img/apps/hero.png") 1x,
    url("../img/apps/hero@2.png") 2x
  );
}
.blog-hero--apps {
  align-items: stretch;
  min-height: 620px;
}
.blog-hero--apps .blog-hero__title {
  color: var(--accent);
}
.blog-hero--contacts::before {
  display: none;
}
.blog-hero--contacts {
  /* баннер здесь без картинки и текста: высокий блок только отодвигал
     телефоны и адрес, ради которых на страницу и заходят */
  align-items: flex-end;
  min-height: 300px;
  padding: 64px 0 32px;
}
.blog-hero--contacts .blog-hero__inner {
  z-index: 2;
}
.blog-hero__lead {
  margin: 0;
  max-width: 36rem;
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-60);
}
.blog-hero--services {
  align-items: stretch;
  min-height: 620px;
}
/* страница услуги: в баннере заголовок и короткий ответ, на 620px
   это растягивалось в пустой экран */
.blog-hero--article.blog-hero--services {
  min-height: 420px;
  padding: 64px 0 40px;
}
.blog-hero--article.blog-hero--services .blog-hero__inner { gap: 24px; }
.blog-hero--article.blog-hero--services .blog-hero__lead { max-width: 42rem; }
.blog-hero__inner--split {
  flex: 1;
  justify-content: space-between;
  gap: 32px;
}
.blog-hero__filters,
.blog-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blog-article-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(231, 236, 237, 0.4);
  color: rgba(231, 236, 237, 0.8);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.blog-article-tag:hover {
  border-color: rgba(231, 236, 237, 0.7);
  color: var(--text-100);
}
.blog-article-tag--fill {
  border-color: transparent;
  background: var(--accent);
  color: rgba(35, 39, 40, 0.8);
}
.blog-article-tag--fill:hover {
  color: #232728;
  filter: brightness(0.97);
}
.blog-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 41px;
  padding: 10px 16px;
  border-radius: 4px;
  border: 1px solid rgba(231, 236, 237, 0.4);
  background: transparent;
  color: var(--text-100);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.blog-filter:hover { border-color: rgba(231, 236, 237, 0.8); }
.blog-filter.is-active {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.blog-feed {
  background: var(--bg-light);
  padding: 80px 0;
}
.blog-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}
.blog-tile {
  grid-column: span 2;
  min-height: 600px;
  background: var(--surface-light);
  color: var(--text-grey);
}
.blog-tiles .blog-tile:nth-child(5n + 1),
.blog-tiles .blog-tile:nth-child(5n + 2) {
  grid-column: span 3;
}
.blog-tile__link {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  min-height: inherit;
  padding: 40px;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
.blog-tile__cover {
  display: block;
  margin: -40px -40px 0;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: #010101;
}
/* с обложкой высоту задаёт картинка, иначе под ней остаётся пустое поле;
   :nth-child(n) поднимает специфичность над адаптивными правилами ниже */
.blog-tiles .blog-tile:nth-child(n):has(.blog-tile__cover) {
  min-height: 0;
}
.blog-tile__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.blog-tile__link:hover .blog-tile__cover img {
  transform: scale(1.03);
}
.blog-tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blog-tile__tag {
  display: inline-flex;
  align-items: center;
  min-height: 35px;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid rgba(35, 39, 40, 0.4);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(35, 39, 40, 0.8);
}
.blog-tile__tag--fill {
  border-color: transparent;
  background: #232728;
  color: rgba(231, 236, 237, 0.8);
}
.blog-tile__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.blog-tile__title {
  margin: 0;
  font-size: var(--fs-card);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-grey);
}
.blog-tile__date {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(35, 39, 40, 0.5);
}
.blog-hero__date {
  align-self: center;
  margin-left: 8px;
  font-size: var(--fs-tag);
  font-weight: 500;
  color: var(--text-60);
}
.blog-tile__lead {
  margin: 0;
  font-size: var(--fs-secondary);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(35, 39, 40, 0.6);
}
.blog-tile__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.blog-tile__avatar {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent);
}
.blog-tile__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-tile__author-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.blog-tile__author-name {
  font-size: var(--fs-secondary);
  font-weight: 500;
  color: var(--text-grey);
}
.blog-tile__author-post {
  font-size: var(--fs-caption, 13px);
  color: rgba(35, 39, 40, 0.4);
}
.blog-more {
  padding: 48px 0 0;
}
.blog-more__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 74px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: #D5FF63;
  color: #232728;
  font: inherit;
  font-size: var(--fs-primary);
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.blog-more__btn:hover { filter: brightness(0.97); }
.blog-more__btn:disabled { opacity: 0.7; cursor: wait; }

/* =========================================
   CASES LIST — Frame 28.svg
   ========================================= */
.cases-feed {
  background: var(--bg);
  padding: 80px 0;
}
.cases-tiles {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  row-gap: 80px;
}
.case-tile {
  grid-column: span 12;
  min-height: 720px;
  overflow: hidden;
  background: var(--surface-light);
  color: var(--text-grey);
}
.case-tile--half { grid-column: span 6; }
.case-tile--grey { background: var(--surface-light); color: var(--text-grey); }
.case-tile--lime { background: var(--lime); color: #232728; }
.case-tile--mint { background: var(--mint); color: #232728; }
.case-tile--dark { background: var(--bg); color: var(--text-100); }
.case-tile--indigo { background: var(--indigo); color: var(--text-100); }
.case-tile__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: inherit;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
.case-tile__glow {
  --glow-blur: clamp(40px, 8vw, 120px);
  --glow-spread: clamp(8px, 1.5vw, 16px);
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: clamp(24px, 6vw, 60px);
  border: 1px solid var(--accent);
  box-shadow: inset 0 0 var(--glow-blur) var(--glow-spread) var(--accent-glow);
}
.case-tile--lime .case-tile__glow {
  top: -35%;
  right: -24%;
  width: 80%;
  height: 100%;
  transform: rotate(-60deg);
}
.case-tile--dark .case-tile__glow {
  top: -30%;
  right: -28%;
  width: 70%;
  height: 110%;
  transform: rotate(-50deg);
}
.case-tile--indigo .case-tile__glow {
  top: -23%;
  right: -24%;
  width: 80%;
  height: 100%;
  transform: rotate(-60deg);
}
.case-tile__head,
.case-tile__foot {
  position: relative;
  z-index: 1;
  padding: 40px;
}
.case-tile__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.case-tile__copy,
.case-tile__foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.case-tile__foot { margin-top: auto; }
.case-tile--has-photo .case-tile__head {
  flex-shrink: 0;
  padding-bottom: 24px;
}
.case-tile--has-photo .case-tile__visual {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin-top: auto;
  padding: 0 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.case-tile__preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
}
.case-tile__visual img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.case-tile__chrome {
  display: none;
  flex-shrink: 0;
  height: 40px;
  border-radius: 24px 24px 0 0;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}
.case-tile--lime .case-tile__chrome,
.case-tile--grey .case-tile__chrome,
.case-tile--mint .case-tile__chrome {
  background: rgba(35, 39, 40, 0.05);
}
.case-tile--dark .case-tile__chrome,
.case-tile--indigo .case-tile__chrome {
  background: rgba(231, 250, 255, 0.05);
}
.case-tile__visual--chrome .case-tile__chrome {
  display: block;
}
.case-tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.case-tile__tag {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(35, 39, 40, 0.4);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(35, 39, 40, 0.8);
}
.case-tile__tag--fill {
  border-color: transparent;
  background: #232728;
  color: rgba(231, 236, 237, 0.8);
}
.case-tile--dark .case-tile__tag,
.case-tile--indigo .case-tile__tag {
  border-color: rgba(231, 236, 237, 0.4);
  color: rgba(231, 236, 237, 0.8);
}
.case-tile--dark .case-tile__tag--fill,
.case-tile--indigo .case-tile__tag--fill {
  background: var(--accent);
  border-color: transparent;
  color: rgba(35, 39, 40, 0.8);
}
.case-tile__title {
  margin: 0;
  font-size: var(--fs-block);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.case-tile__lead {
  margin: 0;
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.8;
}

.section-actions { display: flex; justify-content: center; margin-top: 16px; }

/* =========================================
   CALLBACK FORM
   ========================================= */
.cta__form { margin-top: 32px; max-width: 720px; position: relative; }
.callback-form__title { font-size: var(--fs-block); font-weight: 700; margin-bottom: 8px; }
.callback-form__lead { color: var(--text-60); margin-bottom: 24px; }
.form-row { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; color: var(--text-60); margin-bottom: 6px; }
.form-label .required { color: var(--accent); }
.form-control input[type=text], .form-control input[type=tel], .form-control input[type=email],
.form-control textarea {
	width: 100%; padding: 14px 16px;
	background: var(--bg-2); border: 1px solid var(--stroke-40);
	border-radius: 12px; color: var(--text-100); font: inherit;
	transition: border-color .2s;
}
.form-control textarea { min-height: 100px; resize: vertical; }
.form-control input:focus, .form-control textarea:focus { outline: none; border-color: var(--accent); }
.form-row--policy { font-size: 13px; color: var(--text-60); }
.form-row--policy a { color: var(--accent); }
.form-actions { margin-top: 24px; }
.form-errors { background: rgba(255,77,77,0.1); border: 1px solid rgba(255,77,77,0.35); padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; color: #FF4D4D; }
.form-success { text-align: center; padding: 32px 0; }
.form-success__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-on); display: grid; place-items: center; margin: 0 auto 16px; font-size: 24px; font-weight: 700; }

/* =========================================
   POPUP / MOBILE MENU
   ========================================= */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  visibility: hidden;
  pointer-events: none;
}
.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
.mobile-menu .content { padding: 32px 24px; max-width: 480px; margin: 0 auto; }
.menu-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mobile-menu__close {
  width: 40px; height: 40px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  font-size: 28px;
  line-height: 1;
  color: var(--text-100);
}
.popup-menu-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
.popup-menu-link {
  font-size: 24px;
  font-weight: 500;
  color: var(--text-60);
  padding: 12px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--stroke-15);
  letter-spacing: -0.02em;
}
.popup-menu-link:hover,
.popup-menu-link.is-active { color: var(--accent-text); }
.popup-menu-contacts { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; color: var(--text-80); }
.popup-menu-button { margin-top: 32px; }
body.no-scroll { overflow: hidden; }

/* =========================================
   HEADER scroll state
   ========================================= */
.header.is-scrolled { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }

/* у статей и кейсов заголовки длинные: макетные 96px занимали весь экран */
.blog-hero--article .blog-hero__title {
  overflow-wrap: anywhere;
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.blog-hero--article.blog-hero--art .blog-hero__title {
  max-width: min(20ch, 62%);
}

@media (max-width: 1100px) {
	.blog-hero { min-height: 360px; padding-top: 56px; }
	.blog-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blog-tile,
	.blog-tiles .blog-tile:nth-child(5n + 1),
	.blog-tiles .blog-tile:nth-child(5n + 2) {
		grid-column: span 1;
		min-height: 420px;
	}
	.blog-feed { padding: 48px 0 32px; }
	.cases-feed { padding: 48px 0 32px; }
	.cases-tiles { row-gap: 40px; }
	.case-tile { min-height: 520px; }
}
@media (max-width: 720px) {
	.blog-hero {
    min-height: 0;
    padding: 40px 0 28px;
  }
	.blog-hero--services { min-height: 360px; }
	.blog-hero::before {
    background-image: url("../img/blog/hero-05.png");
  }
	.blog-hero--article::before {
    background-image: url("../img/blog/hero-article-05.png");
  }
	.blog-hero--cases::before {
    background-image: url("../img/cases/hero-05.png");
  }
	.blog-hero--services::before {
    background-image: url("../img/services/hero-05.png");
  }
	.blog-hero--licenses::before {
    background-image: url("../img/licenses/hero-05.png");
  }
	.blog-hero--licenses { min-height: 360px; }
	.blog-hero--apps::before {
    background-image: url("../img/apps/hero-05.png");
  }
	.blog-hero--apps { min-height: 360px; }
	.blog-hero--contacts { min-height: 200px; padding: 48px 0 24px; }
	.blog-hero__inner { gap: 28px; }
	.blog-tiles { grid-template-columns: 1fr; }
	.blog-tile__link { padding: 28px; }
	.blog-tile__cover { margin: -28px -28px 0; }
	.blog-tile { min-height: 360px; }
	.blog-more__btn { height: 64px; }
	.cases-tiles { grid-template-columns: 1fr; row-gap: 24px; }
	.case-tile,
	.case-tile--half { grid-column: auto; min-height: 420px; }
	.case-tile__head,
	.case-tile__foot { padding: 28px; }
	.case-tile--has-photo .case-tile__visual { padding: 0 28px; }
}

/* =========================================
   BLOG ARTICLE — Frame 28.svg + feedback layout
   ========================================= */
.article-crumbs {
  background: var(--bg-light);
  border-bottom: 1px solid #B8BEC0;
}
.article-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  min-height: 48px;
  padding: 12px 0;
  font-size: var(--fs-tag);
  font-weight: 500;
}
.article-crumbs__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(35, 39, 40, 0.4);
}
.article-crumbs__item:not(:last-child)::after {
  content: "/";
  color: rgba(35, 39, 40, 0.8);
}
.article-crumbs__link {
  color: rgba(35, 39, 40, 0.8);
  text-decoration: none;
}
.article-crumbs__link:hover { color: #232728; }

.article-lead {
  background: var(--bg-light);
  color: var(--text-grey);
  padding: 120px 0;
}
.article-lead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: 48px;
}
.article-lead__head {
  position: sticky;
  top: 120px;
}
.article-lead__title {
  margin: 0;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-grey);
  overflow-wrap: anywhere;
}
.article-aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-height: calc(100vh - 140px);
}
.article-aside > * { flex: none; }
/* колонка не выше экрана: при длинном содержании прокручивается только
   список, заголовок и призыв остаются видны целиком */
.article-toc {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-top: 24px;
  border-top: 1px solid var(--stroke-grey-light);
}
.article-toc__title {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(35, 39, 40, 0.5);
  cursor: pointer;
  list-style: none;
}
.article-toc__title::-webkit-details-marker { display: none; }
.article-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.article-toc__item--h3 { padding-left: 16px; }
.article-toc__link {
  display: block;
  padding-left: 12px;
  border-left: 2px solid transparent;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: rgba(35, 39, 40, 0.6);
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.article-toc__item--h3 .article-toc__link { font-size: 14px; }
.article-toc__link:hover { color: var(--text-grey); }
.article-toc__link.is-active {
  color: var(--text-grey);
  border-left-color: #232728;
}
.article-cta {
  padding: 24px;
  background: #010101;
  color: var(--text-100);
}
.article-cta__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.article-cta__text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(231, 236, 237, 0.6);
}
.article-cta__btn { width: 100%; justify-content: center; }
.article-lead__body h2,
.article-lead__body h3 { scroll-margin-top: 110px; }
.article-lead__body {
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.article-lead__body > *:first-child { margin-top: 0; }
.article-lead__body > *:last-child { margin-bottom: 0; }
.article-lead__body h1,
.article-lead__body h2,
.article-lead__body h3,
.article-lead__body h4 {
  margin: 40px 0 16px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.article-lead__body p { margin: 0 0 20px; }

/* Блоки кода в статьях. Prism подключается только на страницах с кодом,
   поэтому базовый вид задаём здесь — без него код выглядел как обычный
   абзац моноширинным шрифтом, со слипшимися строками. */
.article-lead__body pre {
  margin: 0 0 24px;
  padding: 20px 22px;
  /* длинные листинги не должны занимать весь экран */
  max-height: 560px;
  overflow: auto;
  background: #18191c;
  border-left: 3px solid var(--accent);
  font-size: 13px;
  line-height: 1.55;
  tab-size: 4;
}
.article-lead__body pre code {
  display: block;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: #e7eced;
  background: none;
  padding: 0;
  font-size: inherit;
}
/* короткие вставки внутри абзаца */
.article-lead__body :not(pre) > code {
  padding: 2px 6px;
  background: rgba(35, 39, 40, 0.07);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
  color: #232728;
}
/* панель Prism с кнопкой копирования */
.article-lead__body div.code-toolbar { margin-bottom: 24px; }
.article-lead__body div.code-toolbar > pre { margin-bottom: 0; }
.article-lead__body div.code-toolbar > .toolbar {
  opacity: 1;
  top: 10px;
  right: 10px;
}
.article-lead__body div.code-toolbar > .toolbar button {
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  background: rgba(231, 236, 237, 0.12);
  color: #e7eced;
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}
.article-lead__body div.code-toolbar > .toolbar button:hover {
  background: var(--accent);
  color: var(--accent-on);
}

@media (max-width: 720px) {
  .article-lead__body pre { padding: 16px; font-size: 12px; }
}
.article-lead__body ul,
.article-lead__body ol { margin: 0 0 20px 1.2em; }
.article-lead__body li { margin-bottom: 8px; }
.article-lead__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-lead__body img {
  max-width: 100%;
  height: auto;
  margin: 24px 0;
}
/* Таблицы в тексте: у старых статей атрибуты border/cellpadding/cellspacing
   и серый фон ячеек прописаны прямо в разметке — CSS атрибуты перебивает сам,
   встроенный фон только через !important */
.article-lead__body table {
  width: 100% !important;
  height: auto !important;
  margin: 24px 0;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: #fff;
  font-size: 15px;
  line-height: 1.35;
}
.article-lead__body th,
.article-lead__body td {
  padding: 14px 18px;
  border: 0;
  background: none !important;
  text-align: left;
  vertical-align: top;
  width: auto !important;
  overflow-wrap: anywhere;
}
/* строки разделяет полоска цвета страницы — выглядит как зазор, а не рамка */
.article-lead__body tr + tr > th,
.article-lead__body tr + tr > td {
  border-top: 1px solid var(--bg-light);
}
.article-lead__body thead + tbody tr:first-child > * {
  border-top: 2px solid var(--bg-light);
}
.article-lead__body thead th,
.article-lead__body thead td {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(35, 39, 40, 0.5);
}
/* в таблицах «параметр — значение» первая колонка — подпись */
.article-lead__body tbody th,
.article-lead__body tbody td:first-child:not(:only-child) {
  width: 32% !important;
  font-weight: 500;
  color: rgba(35, 39, 40, 0.6);
}
.article-lead__body td > p:last-child,
.article-lead__body th > p:last-child { margin-bottom: 0; }
.article-lead__body blockquote {
  margin: 24px 0;
  padding-left: 20px;
  border-left: 2px solid rgba(35, 39, 40, 0.4);
  color: var(--text-grey-light);
}

@media (max-width: 720px) {
  .article-lead { padding: 64px 0; }
  .article-lead__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .article-lead__head { position: static; }
  /* колонка раскладывается в общий поток: содержание над текстом,
     призыв под ним, повтор заголовка не нужен — h1 прямо над ним */
  .article-aside { display: contents; }
  .article-aside .article-lead__title { display: none; }
  .article-toc { order: 1; padding-top: 0; border-top: 0; overflow: visible; }
  .article-lead__body { order: 2; }
  .article-cta { order: 3; }
  .blog-hero.blog-hero--art::before {
    width: 100%;
    right: 0;
    opacity: .45;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60%);
            mask-image: linear-gradient(to right, transparent 0, #000 60%);
  }
  .blog-hero--art .blog-hero__title { max-width: none; }
}

/* =========================================
   ARTICLE (детальные страницы)
   ========================================= */
.container--narrow { max-width: 880px; }
.article { padding: 60px 0 80px; }
.article__header { margin-bottom: 40px; }
.article__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; font-size: 13px; color: var(--text-60); }
.article__back { color: var(--text-80); text-decoration: none; }
.article__back:hover { color: var(--accent); }
.article__date { color: var(--text-60); }
.article__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.article__title {
	font-size: var(--fs-page);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 20px;
}
.article__lead { font-size: var(--fs-large); color: var(--text-80); line-height: 1.55; max-width: 720px; }
.article__cover { margin: 40px 0; border-radius: var(--radius-lg); overflow: hidden; }
.article__cover img { width: 100%; height: auto; display: block; }
.article__body {
	font-size: var(--fs-primary); line-height: 1.7; color: var(--text-80);
}
.article__body h2 { font-size: var(--fs-block); margin: 40px 0 16px; color: var(--text-100); font-weight: 700; letter-spacing: -0.01em; }
.article__body h3 { font-size: var(--fs-card); margin: 28px 0 12px; color: var(--text-100); font-weight: 600; }
.article__body p { margin-bottom: 16px; }
.article__body ul, .article__body ol { margin: 16px 0 16px 24px; }
.article__body li { margin-bottom: 8px; }
.article__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article__body a:hover { color: var(--lime-2); }
.article__body img { max-width: 100%; height: auto; border-radius: 12px; margin: 24px 0; display: block; }
.article__body blockquote { border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; margin: 24px 0; color: var(--text-100); font-style: italic; }
.article__body code { background: var(--surface); padding: 2px 8px; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 0.92em; }
.article__cta { margin-top: 40px; }

/* =========================================
   PAGE TITLE / LIST
   ========================================= */
.page-title {
	font-size: var(--fs-page-super);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 32px 0 20px;
}
.page-lead { font-size: var(--fs-large); color: var(--text-60); margin-bottom: 48px; max-width: 720px; }
.projects-grid--uniform { grid-template-columns: repeat(3, 1fr); }
.projects-grid--uniform .card { grid-column: auto !important; }
@media (max-width: 1100px) {
	.projects-grid--uniform { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	.projects-grid--uniform { grid-template-columns: 1fr; }
}

/* Pagination (Bitrix nav-string) */
.bx-pagination, .modern-page-navigation { margin-top: 40px; display: flex; justify-content: center; gap: 6px; }
.modern-page-navigation a, .modern-page-navigation .modern-page-current {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 12px;
	background: var(--surface); color: var(--text-100); text-decoration: none;
	font-weight: 600; font-size: 14px;
}
.modern-page-navigation .modern-page-current { background: var(--accent); color: var(--accent-on); }
.modern-page-navigation a:hover { background: var(--surface-2); }

/* =========================================
   SERVICES PAGE — Frame 28.svg + Services Details.svg
   ========================================= */
.svc-page { background: var(--bg-light); }
.svc-dir {
  background: transparent;
  padding-top: 80px;
}
.svc-dir__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  /* минимальная, а не фиксированная: в направлении может быть 17 услуг */
  min-height: 800px;
}
.svc-dir__aside {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 60px 48px;
  color: #232728;
}
.svc-dir--mint .svc-dir__aside { background: #00FFC8; }
.svc-dir--aqua .svc-dir__aside { background: #00FBFF; }
.svc-dir--lime .svc-dir__aside { background: var(--lime); }
.svc-dir--coral .svc-dir__aside { background: var(--coral); }
.svc-dir__num {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #393E41;
}
.svc-dir__title {
  margin: 8px 0 0;
  max-width: 18em;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #232728;
}
.svc-dir__projects {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 41px;
  padding: 10px 16px;
  border: 1px solid #393E41;
  border-radius: 4px;
  color: #232728;
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.svc-dir__projects:hover { background: rgba(35, 39, 40, 0.08); }
.svc-dir__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, 1fr);
  background: var(--bg);
  color: var(--text-100);
}
.svc-dir__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 0;
  padding: 40px;
  border: 1px solid rgba(231, 236, 237, 0.15);
  margin: -1px 0 0 -1px;
  text-decoration: none;
  color: inherit;
  transition: color .15s ease;
}
.svc-dir__cell-num {
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-60);
  transition: color .15s ease;
}
.svc-dir__cell-title {
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.svc-dir--mint .svc-dir__cell:hover,
.svc-dir--mint .svc-dir__cell:hover .svc-dir__cell-num { color: #00FFC8; }
.svc-dir--aqua .svc-dir__cell:hover,
.svc-dir--aqua .svc-dir__cell:hover .svc-dir__cell-num { color: #00FBFF; }
.svc-dir--lime .svc-dir__cell:hover,
.svc-dir--lime .svc-dir__cell:hover .svc-dir__cell-num { color: var(--lime); }
.svc-dir--coral .svc-dir__cell:hover,
.svc-dir--coral .svc-dir__cell:hover .svc-dir__cell-num { color: var(--coral); }

.svc-detail { background: var(--bg-light); }
.article-lead--service { padding-top: 64px; }

/* Страница услуги: текстовые блоки в правой колонке, слева прилипающая
   колонка с оглавлением и кнопкой — как на странице статьи */
.svc-layout-sec {
  background: var(--bg-light);
  color: var(--text-grey);
}
.svc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: 48px;
  padding-top: 80px;
}
.svc-aside {
  /* колонки заданы явно: браузер иначе раскладывал блоки наоборот */
  grid-column: 1;
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-height: calc(100vh - 140px);
}
.svc-aside > * { flex: none; }
.svc-aside .article-toc {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  align-self: stretch;
}
.svc-aside .article-cta { align-self: stretch; }
/* секции внутри колонки — без собственных отступов и фона */
.svc-main { grid-column: 2; }
.svc-main .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.svc-main .svc-answer,
.svc-main .svc-block,
.svc-main .article-lead {
  background: transparent;
  padding-top: 0;
}
.svc-main .svc-block,
.svc-main .article-lead--service { padding-top: 56px; }
.svc-main .svc-answer__inner { padding-top: 0; }
.svc-main .svc-block[id],
.svc-main .svc-answer[id] { scroll-margin-top: 110px; }

/* Страницы интеграций используют ту же раскладку с боковой колонкой,
   что услуги и статьи: секции внутри колонки идут без своих фонов. */
.intg-main .intg-answer,
.intg-main .intg-block {
  background: transparent;
  padding-top: 0;
}
.intg-main .intg-block { padding-top: 56px; }
.intg-main .intg-answer[id],
.intg-main .intg-block[id] { scroll-margin-top: 110px; }
.intg-main .intg-answer__inner { padding-top: 0; }
.intg-main .intg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.intg-main .intg-market { grid-template-columns: 1fr; }

@media (max-width: 1100px) {
  .intg-main .intg-cards { grid-template-columns: 1fr; }
}

/* Скриншот в тексте услуги: интерфейс нашего мигратора */
.svc-shot {
  margin: 24px 0 28px;
}
.svc-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--stroke-grey-light);
  background: #fff;
}
.svc-shot figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(35, 39, 40, 0.55);
}

.svc-detail__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  margin-bottom: 20px;
  padding: 6px 14px;
  border: 1px solid rgba(35, 39, 40, 0.4);
  border-radius: 100px;
  color: rgba(35, 39, 40, 0.8);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.svc-detail__chip:hover { color: #232728; border-color: #232728; }
.svc-mosaic {
  background: #010101;
  min-height: 420px;
  max-height: 894px;
  overflow: hidden;
}
.svc-mosaic__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.svc-mosaic__track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}
.svc-related__title {
  margin: 0 0 32px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-grey);
}
.svc-related {
  background: var(--bg-light);
  padding: 80px 0 0;
}
.svc-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.svc-related__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 640px;
  padding: 40px;
  text-decoration: none;
  color: inherit;
}
.svc-related__card--grey { background: var(--surface-light); color: var(--text-grey); }
.svc-related__card--dark { background: var(--bg); color: var(--text-100); }
.svc-related__card--mint { background: var(--mint); color: #232728; }
.svc-related__card--lime { background: var(--lime); color: #232728; }
.svc-related__card--indigo { background: var(--indigo); color: var(--text-100); }
.svc-related__img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-top: auto;
}
.svc-related__name {
  margin: 0;
  font-size: var(--fs-card);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.svc-related__lead {
  margin: 0;
  font-size: var(--fs-secondary);
  line-height: 1.3;
  opacity: 0.8;
}

.svc-faq {
  background: var(--bg-light);
  color: var(--text-grey);
  padding: 120px 0;
}
.svc-faq__title {
  margin: 0 0 64px;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-grey);
}
.svc-faq__title-muted { color: var(--text-grey-light); }
.svc-faq__list {
  border-top: 1px solid #B8BEC0;
}
.svc-faq__item {
  border-bottom: 1px solid #B8BEC0;
}
.svc-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  color: var(--text-grey);
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.svc-faq__q::-webkit-details-marker { display: none; }
.svc-faq__q::marker { content: ""; }
.svc-faq__q-text { min-width: 0; }
.svc-faq__chevron {
  flex-shrink: 0;
  display: flex;
  color: rgba(35, 39, 40, 0.4);
  transition: transform .2s ease;
}
.svc-faq__item[open] .svc-faq__chevron { transform: rotate(180deg); }
.svc-faq__a {
  max-width: 52rem;
  padding: 0 56px 28px 0;
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-grey-light);
}
.svc-faq__a p { margin: 0 0 16px; }
.svc-faq__a p:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
  .svc-dir__inner { height: auto; min-height: 640px; }
  .svc-dir__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .svc-dir { padding-top: 48px; }
  .svc-dir__inner {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .svc-dir__aside {
    height: auto;
    min-height: 280px;
    padding: 40px 28px;
  }
  .svc-dir__grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  .svc-dir__cell {
    min-height: 160px;
    padding: 32px 28px;
  }
  .svc-faq { padding: 64px 0; }
  .svc-faq__title { margin-bottom: 32px; }
  .svc-faq__q { font-size: 18px; }
  .svc-related { padding-top: 48px; }
  .svc-related__grid { grid-template-columns: 1fr; }
  .svc-related__card { min-height: 420px; padding: 28px; }
  .svc-mosaic { max-height: 420px; }
  .svc-mosaic__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================
   LICENSES — Frame 28.svg
   ========================================= */
.lic-page { background: var(--bg-light); }
.lic-feed {
  background: var(--bg-light);
  padding-bottom: 40px;
}
.lic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #B8BEC0;
  border-left: 1px solid #B8BEC0;
}
.lic-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px;
  padding: 40px;
  background: var(--bg-light);
  color: #393E41;
  box-sizing: border-box;
  border-right: 1px solid #B8BEC0;
  border-bottom: 1px solid #B8BEC0;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lic-card__label {
  margin: 0 0 12px;
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.lic-card__title {
  margin: 0;
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.lic-card__text {
  margin: 16px 0 0;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.lic-card__btn {
  align-self: flex-start;
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 41px;
  padding: 10px 16px;
  border: 1px solid #393E41;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lic-card:hover {
  background: #010101;
  color: var(--accent);
}
.lic-card:hover .lic-card__btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #010101;
}
.lic-card--cta {
  background: var(--accent);
  color: #232728;
}
.lic-card--cta .lic-card__title {
  font-size: clamp(20px, 1.6vw, 24px);
}
.lic-card--cta:hover {
  background: var(--accent);
  color: var(--indigo);
}
.lic-card--cta:hover .lic-card__btn {
  background: transparent;
  border-color: var(--indigo);
  color: var(--indigo);
}

@media (max-width: 1100px) {
  .lic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .lic-grid { grid-template-columns: 1fr; }
  .lic-card { min-height: 320px; padding: 28px; }
}

/* =========================================
   APPS LIST — Frame 28.svg (1:1648)
   ========================================= */
.apps-page { background: var(--bg-light); }
.apps-feed {
  background: var(--bg-light);
  padding: 40px 0;
}
.apps-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.apps-page-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-light);
  color: #393E41;
}
.apps-page-card__preview {
  height: 240px;
  overflow: hidden;
  background: var(--indigo);
}
.apps-page-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.apps-page-card__body {
  display: flex;
  flex-direction: column;
  padding: 40px;
}
.apps-page-card__label {
  margin: 0 0 20px;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #393E41;
  opacity: 0.8;
}
.apps-page-card__title {
  margin: 0 0 20px;
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #232728;
}
.apps-page-card__text {
  margin: 0;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #393E41;
  opacity: 0.8;
}
.apps-page-card__text p { margin: 0 0 8px; }
.apps-page-card__text p:last-child { margin-bottom: 0; }
.apps-page-card__subs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.3;
  color: #232728;
}
.apps-page-card__help {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.apps-page-card__q {
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  line-height: 0;
}
.apps-page-card__q img,
.apps-page-card__close img {
  width: 100%;
  height: 100%;
}
.apps-page-card__tip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  z-index: 4;
  box-sizing: border-box;
  width: min(312px, 70vw);
  padding: 20px 36px 20px 20px;
  border-radius: 4px;
  background: #010101;
  color: var(--accent);
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-align: left;
}
.apps-page-card__tip:not([hidden]) {
  display: block;
}
.apps-page-card__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  padding: 0;
  line-height: 0;
}
.apps-page-card__tip p { margin: 0 0 8px; }
.apps-page-card__tip p:last-child { margin-bottom: 0; }
.apps-page-card__tip ul,
.apps-page-card__tip ol {
  margin: 8px 0;
  padding: 0 0 0 1.15em;
}
.apps-page-card__tip li { margin: 0 0 2px; }
.apps-page-card__btn {
  align-self: flex-start;
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 41px;
  padding: 10px 16px;
  border: 1px solid #393E41;
  border-radius: 4px;
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #393E41;
}
@media (max-width: 1100px) {
  .apps-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .apps-page-grid { grid-template-columns: 1fr; }
  .apps-page-card__body { padding: 28px; }
  .apps-page-card__preview { height: 200px; }
}

/* =========================================
   CONTACTS
   ========================================= */
.contacts-page {
  background: var(--bg-light);
  color: #393E41;
}
.contacts-page__intro {
  padding: 48px 0 0;
}
.contacts-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 40px 64px;
  align-items: start;
  padding-bottom: 64px;
}
.contacts-page__block {
  margin-bottom: 28px;
}
.contacts-page__block:last-child {
  margin-bottom: 0;
}
.contacts-page__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-secondary);
  font-weight: 500;
  color: #94999A;
  letter-spacing: -0.02em;
}
.contacts-page__value,
.contacts-page__value a,
.contacts-page__value p {
  margin: 0;
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #232728;
  text-decoration: none;
}
.contacts-page__value a:hover {
  color: var(--indigo);
}
.contacts-page__form {
  padding: 40px;
  background: #fff;
  border-radius: 4px;
}
.contacts-page .callback-form__title {
  color: #232728;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.contacts-page .callback-form__lead {
  color: #393E41;
}
.contacts-page .form-label {
  color: #393E41;
}
.contacts-page .form-control input[type=text],
.contacts-page .form-control input[type=tel],
.contacts-page .form-control input[type=email],
.contacts-page .form-control textarea {
  background: var(--bg-light);
  border: 1px solid #B8BEC0;
  border-radius: 4px;
  color: #232728;
}
.contacts-page .form-control input:focus,
.contacts-page .form-control textarea:focus {
  border-color: var(--indigo);
}
.contacts-page .form-row--policy {
  color: #393E41;
}
.contacts-page .form-row--policy a {
  color: var(--indigo);
}
.contacts-page .form-errors {
  color: #9b1c1c;
  background: #fde8e8;
  border-color: #f5b5b5;
}
.contacts-page__map {
  display: block;
  width: 100%;
  /* карта занимает правую колонку целиком, поэтому выше, чем была в общей */
  height: 520px;
  margin-top: 12px;
  background: #d9d9d9;
}
.contacts-page__map-col {
  position: sticky;
  top: 110px;
}
.contacts-page__form { margin-top: 32px; }
.contacts-page__route {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  font-size: var(--fs-secondary);
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 1100px) {
  .contacts-page__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 720px) {
  .contacts-page__intro { padding-top: 28px; }
  .contacts-page__form { padding: 28px; }
  .contacts-page__map { height: 300px; }
  .contacts-page__map-col { position: static; }
}

/* =========================================
   О КОМПАНИИ — Figma-совместимые блоки страницы.
   Тело страницы светлое, как на главной: тёмным остаётся только
   баннер сверху. Цвета текста — те же rgba(35,39,40,*), что
   и на остальных светлых секциях сайта.
   ========================================= */
.company-intro {
  padding: 100px 0;
  background: var(--bg-light);
  color: var(--text-grey);
}
.company-intro__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.company-intro__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: var(--tag-h);
  padding: 0 var(--tag-pad-x);
  border: 1px solid rgba(35, 39, 40, 0.4);
  border-radius: 999px;
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(35, 39, 40, 0.8);
}
.company-intro__text {
  /* ширину ограничивает сам текст: max-width на .container сузил бы
     и сместил всю секцию, так как контейнер центрируется */
  margin: 0;
  max-width: 980px;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: rgba(35, 39, 40, 0.6);
}
.company-intro__em {
  color: #232728;
}

.company-numbers {
  padding-bottom: 100px;
  background: var(--bg-light);
  color: var(--text-grey);
}
.company-numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--stroke-grey-light);
}
.company-number {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 24px 0;
  border-left: 1px solid var(--stroke-grey-light);
}
.company-number:first-child {
  border-left: 0;
  padding-left: 0;
}
.company-number__value {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #232728;
}
.company-number__caption {
  margin: 0;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: rgba(35, 39, 40, 0.6);
}

.company-status {
  padding: 0 0 100px;
  background: var(--bg-light);
  color: var(--text-grey);
}
.company-status__title,
.company-certs__title {
  margin: 0 0 48px;
  font-size: var(--fs-page);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #232728;
}
.company-status__title-em {
  color: rgba(35, 39, 40, 0.45);
}
/* плоская сетка вместо скруглённых карточек — как в разделах базы знаний */
.company-status__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--stroke-grey-light);
  border-left: 1px solid var(--stroke-grey-light);
}
.company-status-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 36px 32px;
  background: #fff;
  box-shadow: inset -1px 0 0 var(--stroke-grey-light), inset 0 -1px 0 var(--stroke-grey-light);
}
.company-status-card__badge {
  margin-bottom: 8px;
}
.company-status-card__badge img {
  display: block;
  width: auto;
  height: 52px;
}
.company-status-card__title {
  margin: 0;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #232728;
}
/* на светлом акцент работает заливкой, а не цветом текста */
.company-status-card__note {
  align-self: flex-start;
  margin: 0;
  padding: 7px 12px;
  border-radius: var(--radius-xs);
  background: var(--accent);
  color: var(--accent-on);
  font-size: var(--fs-tag);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.company-status-card__text {
  margin: 0;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: rgba(35, 39, 40, 0.6);
}

.company-competences {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--stroke-grey-light);
}
.company-competences__label {
  display: block;
  margin-bottom: 20px;
  font-size: var(--fs-secondary);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(35, 39, 40, 0.5);
}
.company-competences__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.company-competences__item img {
  display: block;
  width: auto;
  height: 40px;
}

.company-certs {
  padding-bottom: 100px;
  background: var(--bg-light);
  color: var(--text-grey);
}
.company-certs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  gap: 20px;
  align-items: start;
}
.company-cert {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.company-cert__link {
  /* превью одного размера независимо от ориентации листа */
  position: relative;
  display: block;
  height: 360px;
  box-sizing: border-box;
  border: 1px solid var(--stroke-grey-light);
  overflow: hidden;
  background: #fff;
  transition: border-color .2s;
}
.company-cert__link:hover {
  border-color: #232728;
}
.company-cert__link picture {
  position: absolute;
  inset: 0;
  display: block;
}
.company-cert__link img {
  /* лист любой ориентации вписывается в одинаковую карточку */
  display: block;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  object-fit: contain;
}
.company-cert__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.company-cert__name {
  font-size: var(--fs-secondary);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #232728;
}
.company-cert__term {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(35, 39, 40, 0.5);
}

.company-cta {
  padding-bottom: 100px;
  background: var(--bg-light);
  color: var(--text-grey);
}
.company-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.company-cta__text {
  margin: 0;
  font-size: var(--fs-primary);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(35, 39, 40, 0.6);
}
.company-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.company-cta .btn--outline {
  border-color: rgba(35, 39, 40, 0.4);
  color: var(--text-grey);
}
.company-cta .btn--outline:hover {
  border-color: var(--text-grey);
  background: rgba(35, 39, 40, 0.06);
  color: var(--text-grey);
}

@media (max-width: 1100px) {
  .company-intro { padding: 64px 0; }
  .company-numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-number { padding: 24px 16px 0; }
  .company-number:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .company-number:nth-child(n + 3) { padding-top: 32px; }
  .company-status__grid { grid-template-columns: 1fr; }
  .company-numbers,
  .company-status,
  .company-certs,
  .company-cta { padding-bottom: 64px; }
}

@media (max-width: 560px) {
  .company-status-card { padding: 28px 24px; }
  .company-certs__grid { grid-template-columns: 1fr; }
  .company-cert__link { height: 300px; }
  .company-competences__item img { height: 32px; }
  .company-cta__buttons { width: 100%; }
  .company-cta__buttons .btn { flex: 1 1 100%; }
}

/* =========================================
   СВЕДЕНИЯ ОБ ОРГАНИЗАЦИИ — страница для аккредитации.
   Длинный документ с разделами, поэтому раскладка та же, что
   у услуг: прилипающее содержание слева, текст справа.
   ========================================= */
.legal-page {
  background: var(--bg-light);
  color: var(--text-grey);
}
.legal-main .legal-block {
  padding-top: 56px;
  scroll-margin-top: 110px;
}
.legal-main .legal-block:first-child { padding-top: 0; }
.legal-block__title {
  margin: 0 0 24px;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #232728;
}
.legal-text {
  margin: 0 0 16px;
  font-size: var(--fs-primary);
  line-height: 1.55;
  color: rgba(35, 39, 40, 0.75);
}
.legal-link {
  color: #232728;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-link:hover { color: var(--accent-ink, #232728); }

/* Реквизиты: две колонки на плоской сетке, как таблицы в базе знаний */
.legal-req {
  margin: 0;
  border-top: 1px solid var(--stroke-grey-light);
}
.legal-req__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--stroke-grey-light);
}
.legal-req__label {
  margin: 0;
  font-size: var(--fs-secondary);
  font-weight: 500;
  color: rgba(35, 39, 40, 0.55);
}
.legal-req__value {
  margin: 0;
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.45;
  color: #232728;
}

.legal-codes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--stroke-grey-light);
}
.legal-codes__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--stroke-grey-light);
}
.legal-codes__num {
  font-size: var(--fs-primary);
  font-weight: 500;
  color: var(--accent-ink, #232728);
}
.legal-codes__text {
  font-size: var(--fs-secondary);
  line-height: 1.5;
  color: rgba(35, 39, 40, 0.75);
}

.legal-service { margin-bottom: 28px; }
.legal-service:last-child { margin-bottom: 0; }
.legal-service__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #232728;
}
.legal-service__codes {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  color: rgba(35, 39, 40, 0.5);
}
.legal-prices {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-prices__item {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-secondary);
  line-height: 1.5;
  color: rgba(35, 39, 40, 0.75);
}
.legal-prices__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.legal-prices__item strong { color: #232728; }
.legal-note {
  margin: 8px 0 0;
  padding: 20px 24px;
  background: #fff;
  border-left: 3px solid var(--accent);
  font-size: var(--fs-secondary);
  line-height: 1.5;
  color: rgba(35, 39, 40, 0.75);
}
.legal-docs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal-docs__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-primary);
  font-weight: 500;
  color: #232728;
  text-decoration: none;
}
.legal-docs__link:hover { color: var(--accent-ink, #232728); text-decoration: underline; }
.legal-updated {
  margin: 32px 0 0;
  font-size: 13px;
  color: rgba(35, 39, 40, 0.5);
}

@media (max-width: 720px) {
  .legal-req__row,
  .legal-codes__item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* =========================================
   LIGHTBOX — просмотр картинок поверх страницы
   ========================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
  background: rgba(1, 1, 1, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox[hidden] {
  display: none;
}
.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  max-width: 100%;
  max-height: 100%;
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  background: #fff;
}
.lightbox__caption {
  font-size: var(--fs-secondary);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-60);
  text-align: center;
}
.lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--stroke-15);
  border-radius: 999px;
  background: transparent;
  color: var(--text-100);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.lightbox__close:hover {
  border-color: var(--stroke-100);
  background: rgba(231, 236, 237, 0.08);
}
@media (max-width: 560px) {
  .lightbox { padding: 16px; }
  .lightbox__close { top: 12px; right: 12px; }
  .lightbox__img { max-height: calc(100vh - 120px); }
}

/* =========================================
   ИНТЕГРАЦИИ — детальная страница сервиса.
   Палитра как у детальной услуги: тёмный hero, светлое тело.
   ========================================= */
.intg-answer {
  padding: 100px 0 0;
  background: var(--bg-light);
  color: var(--text-grey);
}
.intg-answer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.intg-answer__text {
  margin: 0;
  max-width: 980px;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.intg-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-top: 32px;
  border-top: 1px solid var(--stroke-grey-light);
}
.intg-facts__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.intg-facts__label {
  font-size: var(--fs-secondary);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.55);
}
.intg-facts__value {
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.intg-facts__item--note .intg-facts__value {
  font-size: var(--fs-secondary);
  color: rgba(57, 62, 65, 0.7);
}

.intg-block {
  padding: 80px 0 0;
  background: var(--bg-light);
  color: var(--text-grey);
}
.intg-block__title {
  margin: 0 0 32px;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-grey);
}
.intg-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--stroke-grey-light);
}
.intg-list__item {
  padding: 20px 0;
  border-bottom: 1px solid var(--stroke-grey-light);
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.intg-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.intg-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--stroke-grey-light);
  border-radius: var(--radius-sm);
  background: #fff;
}
.intg-card__num {
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(57, 62, 65, 0.35);
}
.intg-card__text {
  margin: 0;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.8);
}
.intg-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: intg-step;
}
.intg-steps__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--stroke-grey-light);
  counter-increment: intg-step;
}
.intg-steps__item::before {
  content: counter(intg-step, decimal-leading-zero);
  font-size: var(--fs-secondary);
  font-weight: 500;
  color: rgba(57, 62, 65, 0.45);
}
.intg-steps__title {
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.intg-steps__text {
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.7);
}
.intg-note {
  margin: 0;
  max-width: 900px;
  padding: 24px 28px;
  border-left: 2px solid var(--text-grey);
  background: #fff;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.85);
}
.intg-faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--stroke-grey-light);
}
.intg-faq__item {
  border-bottom: 1px solid var(--stroke-grey-light);
}
.intg-faq__q {
  display: block;
  position: relative;
  padding: 24px 40px 24px 0;
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-grey);
  cursor: pointer;
  list-style: none;
}
.intg-faq__q::-webkit-details-marker { display: none; }
.intg-faq__q::marker { content: ""; }
.intg-faq__q::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-size: 24px;
  line-height: 1;
  color: rgba(57, 62, 65, 0.45);
}
.intg-faq__item[open] .intg-faq__q::after {
  content: "–";
}
.intg-faq__a {
  margin: 0;
  padding: 0 40px 24px 0;
  max-width: 900px;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.75);
}
.intg-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.intg-siblings__link {
  display: inline-flex;
  align-items: center;
  height: var(--tag-h);
  padding: 0 var(--tag-pad-x);
  border: 1px solid var(--stroke-grey-light);
  border-radius: 999px;
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-grey);
  background: #fff;
  transition: border-color .2s, color .2s;
}
.intg-siblings__link:hover {
  border-color: var(--text-grey);
  color: var(--text-grey);
}
.intg-siblings__all {
  display: inline-block;
  margin-top: 24px;
  font-size: var(--fs-secondary);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.6);
}
.intg__hero-top {
  display: flex;
  gap: 8px;
}
.intg__crumb {
  display: inline-flex;
  align-items: center;
  height: var(--tag-h);
  padding: 0 var(--tag-pad-x);
  border: 1px solid var(--stroke-15);
  border-radius: 999px;
  font-size: var(--fs-tag);
  font-weight: 500;
  color: var(--text-60);
}
.intg-cta {
  padding: 80px 0 120px;
  background: var(--bg-light);
  color: var(--text-grey);
}
.intg-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.intg-cta__title {
  margin: 0;
  max-width: 900px;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-grey);
}
.intg-cta__text {
  margin: 0;
  max-width: 720px;
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.75);
}
.intg-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.intg-cta .btn--outline {
  border-color: rgba(57, 62, 65, 0.4);
  color: var(--text-grey);
}
.intg-cta .btn--outline:hover {
  border-color: var(--text-grey);
  background: rgba(57, 62, 65, 0.06);
  color: var(--text-grey);
}
.intg-cta__official {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(57, 62, 65, 0.55);
}
.intg-cta__official a {
  color: var(--text-grey);
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .intg-answer { padding-top: 64px; }
  .intg-block { padding-top: 64px; }
  .intg-facts { grid-template-columns: 1fr; }
  .intg-cards { grid-template-columns: 1fr; }
  .intg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intg-list { grid-template-columns: 1fr; }
  .intg-cta { padding: 64px 0 80px; }
}

@media (max-width: 560px) {
  .intg-steps { grid-template-columns: 1fr; }
  .intg-cta__buttons { width: 100%; }
  .intg-cta__buttons .btn { flex: 1 1 100%; }
}

/* Поиск по каталогу интеграций и плитки категории */
.intg-block--first {
  padding-top: 60px;
}
.intg-search {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin-bottom: 48px;
}
.intg-search__label {
  font-size: var(--fs-secondary);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.55);
}
.intg-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 20px;
  border: 1px solid var(--stroke-grey-light);
  border-radius: var(--radius-xs);
  background: #fff;
  font-family: inherit;
  font-size: var(--fs-primary);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-grey);
  transition: border-color .2s;
}
.intg-search__input:focus {
  outline: none;
  border-color: var(--text-grey);
}
.intg-search__input::placeholder {
  color: rgba(57, 62, 65, 0.4);
}
.intg-search__empty {
  margin: 0;
  font-size: var(--fs-secondary);
  font-weight: 500;
  color: rgba(57, 62, 65, 0.7);
}
.intg-search__empty a {
  color: var(--text-grey);
  text-decoration: underline;
}
/* Сетка карточек — стыкованные ячейки с тонкими разделителями,
   как блок фактов на главной: без скруглений и без «подпрыгивания».
   Линии рисует фон контейнера, просвечивая в зазорах. */
.intg-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--stroke-grey-light);
  border-left: 1px solid var(--stroke-grey-light);
}
.intg-tile {
  box-shadow: inset -1px 0 0 var(--stroke-grey-light), inset 0 -1px 0 var(--stroke-grey-light);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  background: #fff;
  color: var(--text-grey);
  transition: background .2s, color .2s;
}
.intg-tile:hover {
  background: var(--bg-light);
  color: var(--text-grey);
}
.intg-tile:hover .intg-tile__name { color: var(--text-grey); }
.intg-tile__name {
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.intg-tile__method {
  font-size: 13px;
  font-weight: 500;
  color: rgba(57, 62, 65, 0.5);
}
.intg-tile__text {
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.45;
  color: rgba(57, 62, 65, 0.75);
}

/* каталог на странице /integrations/ фильтруется теми же атрибутами */
.intg-catalog [data-intg-item][hidden],
.intg-catalog [data-intg-group][hidden] {
  display: none !important;
}

@media (max-width: 1100px) {
  .intg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .intg-tiles { grid-template-columns: 1fr; }
  .intg-search { margin-bottom: 32px; }
}

/* Сквозной блок «Почему Оверплан» — на страницах услуг и интеграций */
.why {
  padding: 80px 0 0;
  background: var(--bg-light);
  color: var(--text-grey);
}
.why__title {
  margin: 0 0 32px;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-grey);
}
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.why__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--stroke-grey-light);
}
.why__value {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-grey);
}
.why__text {
  margin: 0;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.75);
}

@media (max-width: 1100px) {
  .why { padding-top: 64px; }
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .why__grid { grid-template-columns: 1fr; }
}

/* =========================================
   УСЛУГИ — блоки детальной страницы
   ========================================= */
.svc-answer {
  padding: 80px 0 0;
  background: var(--bg-light);
  color: var(--text-grey);
}
.svc-answer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.svc-answer__text {
  margin: 0;
  max-width: 980px;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.svc-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding-top: 32px;
  border-top: 1px solid var(--stroke-grey-light);
}
.svc-facts__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svc-facts__label {
  font-size: var(--fs-secondary);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.55);
}
.svc-facts__value {
  margin: 0;
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}

.svc-block {
  padding: 80px 0 0;
  background: var(--bg-light);
  color: var(--text-grey);
}
.svc-block__title {
  margin: 0 0 32px;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-grey);
}
.svc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--stroke-grey-light);
}
.svc-list__item {
  padding: 20px 0;
  border-bottom: 1px solid var(--stroke-grey-light);
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.svc-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: svc-step;
}
.svc-steps__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--stroke-grey-light);
  counter-increment: svc-step;
}
.svc-steps__item::before {
  content: counter(svc-step, decimal-leading-zero);
  font-size: var(--fs-secondary);
  font-weight: 500;
  color: rgba(57, 62, 65, 0.45);
}
.svc-steps__name {
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.svc-steps__text {
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.7);
}
.svc-result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-result__item {
  position: relative;
  padding: 18px 0 18px 28px;
  border-bottom: 1px solid var(--stroke-grey-light);
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.svc-result__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 27px;
  width: 12px;
  height: 2px;
  background: var(--text-grey);
}

.svc-cta {
  padding: 80px 0 120px;
  background: var(--bg-light);
  color: var(--text-grey);
}
.svc-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.svc-cta__title {
  margin: 0;
  max-width: 900px;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-grey);
}
.svc-cta__text {
  margin: 0;
  max-width: 720px;
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.75);
}
.svc-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.svc-cta .btn--outline {
  border-color: rgba(57, 62, 65, 0.4);
  color: var(--text-grey);
}
.svc-cta .btn--outline:hover {
  border-color: var(--text-grey);
  background: rgba(57, 62, 65, 0.06);
  color: var(--text-grey);
}

@media (max-width: 1100px) {
  .svc-answer { padding-top: 64px; }
  .svc-block { padding-top: 64px; }
  .svc-facts { grid-template-columns: 1fr; }
  .svc-list,
  .svc-steps,
  .svc-result { grid-template-columns: 1fr; }
  .svc-cta { padding: 64px 0 80px; }
}

@media (max-width: 560px) {
  .svc-cta__buttons { width: 100%; }
  .svc-cta__buttons .btn { flex: 1 1 100%; }
}

/* =========================================
   ЛИЦЕНЗИИ — подбор и таблицы тарифов
   ========================================= */
.lic-quiz {
  padding: 80px 0 0;
  background: var(--bg-light);
  color: var(--text-grey);
}
.lic-quiz__title,
.lic-table-block__title,
.lic-faq__title {
  margin: 0 0 16px;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-grey);
}
.lic-quiz__lead,
.lic-table-block__lead {
  margin: 0 0 32px;
  max-width: 760px;
  font-size: var(--fs-primary);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.75);
}
.lic-quiz__box {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
  border: 1px solid var(--stroke-grey-light);
  border-radius: var(--radius-sm);
  background: #fff;
}
.lic-quiz__step {
  margin: 0;
  padding: 0;
  border: 0;
}
.lic-quiz__question {
  padding: 0 0 16px;
  font-size: var(--fs-primary);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.lic-quiz__options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.lic-quiz__option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--stroke-grey-light);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.lic-quiz__option:hover {
  border-color: var(--text-grey);
}
.lic-quiz__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lic-quiz__option:has(input:checked) {
  border-color: var(--text-grey);
  background: rgba(57, 62, 65, 0.06);
}
.lic-quiz__option-label {
  font-size: var(--fs-secondary);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.lic-quiz__option-hint {
  font-size: 13px;
  font-weight: 500;
  color: rgba(57, 62, 65, 0.55);
}
.lic-quiz__result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--stroke-grey-light);
}
.lic-quiz__result[hidden] {
  display: none;
}
.lic-quiz__result-label {
  font-size: var(--fs-secondary);
  font-weight: 500;
  color: rgba(57, 62, 65, 0.55);
}
.lic-quiz__result-name {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-grey);
}
.lic-quiz__result-price {
  margin: 0;
  font-size: var(--fs-primary);
  font-weight: 500;
  color: var(--text-grey);
}
.lic-quiz__result-why {
  margin: 0;
  max-width: 700px;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.45;
  color: rgba(57, 62, 65, 0.75);
}
.lic-quiz__result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.lic-quiz__result-actions .btn--outline {
  border-color: rgba(57, 62, 65, 0.4);
  color: var(--text-grey);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.lic-quiz__result-actions .btn--outline:hover {
  border-color: var(--text-grey);
  background: rgba(57, 62, 65, 0.06);
}

.lic-table-block {
  padding: 80px 0 0;
  background: var(--bg-light);
  color: var(--text-grey);
}
.lic-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--stroke-grey-light);
  background: #fff;
}
.lic-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-secondary);
}
.lic-table th,
.lic-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--stroke-grey-light);
  vertical-align: top;
}
.lic-table thead th {
  font-weight: 500;
  color: rgba(57, 62, 65, 0.55);
  white-space: nowrap;
}
.lic-table tbody tr:last-child th,
.lic-table tbody tr:last-child td {
  border-bottom: 0;
}
.lic-table tbody th {
  font-weight: 500;
  color: var(--text-grey);
}
.lic-table__name {
  display: block;
  font-size: var(--fs-primary);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.lic-table__note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(57, 62, 65, 0.55);
}

/* Состав редакций под таблицей: цену видно в таблице, а здесь — что входит */
.lic-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--stroke-grey-light);
  border-left: 1px solid var(--stroke-grey-light);
}
.lic-feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  background: #fff;
  box-shadow: inset -1px 0 0 var(--stroke-grey-light), inset 0 -1px 0 var(--stroke-grey-light);
}
.lic-feature__name {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #232728;
}
.lic-feature__price {
  font-size: var(--fs-secondary);
  font-weight: 500;
  color: var(--accent-ink, #232728);
}
.lic-feature__price-note {
  color: rgba(35, 39, 40, 0.5);
}
.lic-feature__list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lic-feature__item {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-secondary);
  line-height: 1.4;
  color: rgba(35, 39, 40, 0.7);
}
.lic-feature__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.lic-table-block__note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(35, 39, 40, 0.55);
}

@media (max-width: 1100px) {
  .lic-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .lic-features { grid-template-columns: 1fr; }
}

.lic-note-block {
  padding: 32px 0 0;
  background: var(--bg-light);
}
.lic-note {
  margin: 0;
  max-width: 900px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(57, 62, 65, 0.6);
}
.lic-note a {
  color: var(--text-grey);
  text-decoration: underline;
}

.lic-faq {
  padding: 80px 0 0;
  background: var(--bg-light);
  color: var(--text-grey);
}
.lic-faq__list {
  border-top: 1px solid var(--stroke-grey-light);
}

@media (max-width: 1100px) {
  .lic-quiz { padding-top: 64px; }
  .lic-table-block { padding-top: 64px; }
  .lic-faq { padding-top: 64px; }
  .lic-quiz__box { padding: 24px; }
}

@media (max-width: 560px) {
  .lic-quiz__options { flex-direction: column; }
  .lic-quiz__option { width: 100%; box-sizing: border-box; }
}

/* Страница раздела услуг: плитки услуг переиспользуют стили каталога интеграций */
.svc-block--first {
  padding-top: 60px;
}

/* Интеграции: развилка «готовое приложение или разработка» */
.intg-market {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.intg-market__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--stroke-grey-light);
  border-radius: var(--radius-sm);
  background: #fff;
}
.intg-market__label {
  font-size: var(--fs-secondary);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(57, 62, 65, 0.55);
}
.intg-market__text {
  margin: 0;
  font-size: var(--fs-secondary);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}
.intg-market__note {
  margin: 20px 0 0;
  max-width: 900px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(57, 62, 65, 0.6);
}

@media (max-width: 1100px) {
  .intg-market { grid-template-columns: 1fr; }
}

/* =========================================
   УСЛУГА НА ТЕЛЕФОНЕ
   Блок стоит в конце файла: правила выше по файлу перебивали его,
   потому что специфичность одинаковая и побеждает последнее правило.
   ========================================= */
@media (max-width: 720px) {
  .svc-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 48px;
  }
  .svc-aside {
    position: static;
    display: contents;
  }
  .svc-main {
    grid-column: auto;
    order: 2;
  }
  .svc-aside .article-toc {
    order: 1;
    overflow: visible;
    padding-top: 0;
    border-top: 0;
  }
  .svc-aside .article-cta { order: 3; }
  .svc-aside .svc-detail__chip,
  .svc-aside .article-lead__title { display: none; }
}

/* ===================================================================
   База знаний: хабы /help/ и /bitrix24/, список инструкций,
   служебные подписи детальных страниц. Блок держим в конце файла,
   чтобы мобильные правила ниже не перебивались десктопными. */

.help-cats {
  background: var(--bg-light);
  color: var(--text-grey);
  padding: 80px 0;
}
.help-cats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--stroke-grey-light);
  border-left: 1px solid var(--stroke-grey-light);
}
.help-cat {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  position: relative;
  padding: 32px 28px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: background .2s ease;
}
.help-cat { box-shadow: inset -1px 0 0 var(--stroke-grey-light), inset 0 -1px 0 var(--stroke-grey-light); }
.help-cat:hover { background: var(--bg-light); }
.help-cat__icon {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 20px;
}
.help-cat__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.help-cat__title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.help-cat__text,
.help-cat__meta {
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-grey-light);
}
.help-cat__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-grey);
}
.help-cat__meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-grey-light);
}

/* Вводный текст под списком инструкций */
.help-intro {
  background: var(--bg-light);
  color: var(--text-grey);
  padding: 16px 0 48px;
}
.help-intro__title {
  margin: 0 0 16px;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #232728;
}
.help-intro__text {
  max-width: 54rem;
}
.help-intro__text p {
  margin: 0 0 14px;
  font-size: var(--fs-primary);
  line-height: 1.6;
  color: rgba(35, 39, 40, 0.75);
}
.help-intro__text p:last-child { margin-bottom: 0; }

.help-promo {
  background: var(--bg-light);
  padding: 0 0 80px;
}
.article-cta--wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title action" "text action";
  gap: 8px 40px;
  align-items: center;
  padding: 40px;
}
.article-cta--wide .article-cta__title { grid-area: title; margin: 0; }
.article-cta--wide .article-cta__text { grid-area: text; margin: 0; max-width: 46rem; }
.article-cta--wide .article-cta__btn { grid-area: action; margin: 0; }

.help-feed {
  background: var(--bg-light);
  color: var(--text-grey);
  padding: 80px 0 40px;
}
.help-feed__empty {
  margin: 0;
  font-size: 18px;
  color: var(--text-grey-light);
}
.help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--stroke-grey-light);
  border-left: 1px solid var(--stroke-grey-light);
  border-right: 1px solid var(--stroke-grey-light);
}
.help-list__item { box-shadow: inset 0 -1px 0 var(--stroke-grey-light); }
.help-list__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 28px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: background .2s ease;
}
.help-list__link:hover { background: var(--bg-light); }
.help-list__name {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.help-list__lead {
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-grey-light);
}

.help-checked,
.tool-tariffs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-60);
}
.help-source {
  margin: 40px 0 0;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--stroke-grey-light);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-grey-light);
}
.help-source a { color: var(--text-grey); }

.tool-limits {
  margin: 40px 0 0;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--stroke-grey-light);
}
.tool-limits__title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.tool-limits__list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-grey-light);
}

@media (max-width: 1023px) {
  .help-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-cta--wide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "text" "action";
    gap: 12px;
    padding: 32px;
  }
  .article-cta--wide .article-cta__btn { justify-self: start; }
}

@media (max-width: 767px) {
  .help-cats { padding: 48px 0; }
  .help-cats__grid { grid-template-columns: minmax(0, 1fr); }
  .help-cat { padding: 24px; gap: 16px; }
  .help-cat__title { font-size: 20px; }
  .help-promo { padding: 0 0 48px; }
  .help-feed { padding: 48px 0 24px; }
  .help-list__link { padding: 20px 24px; }
  .help-list__name { font-size: 18px; }
  .tool-limits { padding: 24px; }
}

/* Таблицы в тексте на узких экранах: прокручиваем, а не сплющиваем колонки.
   Четырёхколоночные таблицы (сроки реакции, сравнения) иначе нечитаемы. */
@media (max-width: 640px) {
  .article-lead__body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .article-lead__body table tbody,
  .article-lead__body table thead {
    display: table;
    width: 100%;
    min-width: 520px;
  }
}

/* Скриншоты интерфейса в инструкциях: рамка отделяет чужой интерфейс
   от нашего текста, ширина ограничена колонкой. */
.help-article .article-lead__body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(1, 1, 1, .08);
}
.help-article .article-lead__body .help-source-note {
  margin-top: -8px;
  font-size: 14px;
  color: var(--text-grey-light);
}

/* ===================================================================
   Выпадающие списки в верхнем меню — продолжение самой шапки:
   тот же полупрозрачный фон с размытием, тонкая линия вместо рамки,
   акцент лаймом. Плоско, как остальные поверхности шаблона. */

.header__nav-group {
  position: relative;
  display: inline-flex;
}
.header__nav-link--has-sub {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.header__nav-caret {
  font-size: 8px;
  opacity: .5;
  transition: transform .2s ease, opacity .2s ease;
}
.header__nav-group:hover .header__nav-caret,
.header__nav-group:focus-within .header__nav-caret,
.header__nav-group.is-open .header__nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.header__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 50;
}
.header__nav-group:hover .header__sub,
.header__nav-group:focus-within .header__sub,
.header__nav-group.is-open .header__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.header__sub-inner {
  padding: 8px 0;
  background: rgba(1, 1, 1, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--stroke-15);
  border-bottom: 1px solid var(--stroke-15);
}
.header__sub-all,
.header__sub-link {
  display: block;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-60);
  text-decoration: none;
  transition: color .2s;
}
.header__sub-all {
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke-15);
  color: var(--text-40);
}
.header__sub-all:hover,
.header__sub-link:hover { color: var(--accent-text); }
.header__sub-list { display: grid; }
.header__sub--wide .header__sub-inner { width: 640px; }
.header__sub--wide .header__sub-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Мобильное меню: разделы раскрываются по тапу, подпункты — тем же
   списком, что и основные, но тише по тону */
.popup-menu-group summary { list-style: none; cursor: pointer; }
.popup-menu-group summary::-webkit-details-marker { display: none; }
.popup-menu-link--has-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.popup-menu-caret {
  font-size: 12px;
  opacity: .4;
  transition: transform .2s ease;
}
.popup-menu-group[open] .popup-menu-caret { transform: rotate(180deg); }
.popup-menu-sub { display: flex; flex-direction: column; }
.popup-menu-sublink {
  padding: 10px 0 10px 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-40);
  text-decoration: none;
  border-bottom: 1px solid var(--stroke-15);
}
.popup-menu-sublink:last-child { border-bottom: 0; }
.popup-menu-sublink:hover,
.popup-menu-sublink--all { color: var(--text-60); }
.popup-menu-sublink:hover { color: var(--accent-text); }

@media (max-width: 1365px) {
  .header__sub--wide .header__sub-inner { width: 520px; }
}

/* ===================================================================
   Цвет направления. Атрибут проставляет шаблон по разделу страницы,
   дальше все акцентные элементы красятся от --accent. */

[data-accent="mint"] {
  --accent: var(--mint);
  --accent-on: #010101;
  --accent-text: var(--mint);
  --accent-glow: rgba(0, 255, 200, 0.85);
  --accent-ink: #00876A;
}
[data-accent="aqua"] {
  --accent: var(--aqua);
  --accent-on: #010101;
  --accent-text: var(--aqua);
  --accent-glow: rgba(0, 251, 255, 0.85);
  --accent-ink: #00737A;
}
/* синий остался в палитре, но направлению больше не назначен */
[data-accent="blue"] {
  --accent: var(--blue);
  --accent-on: #FFFFFF;
  --accent-text: #8C98FF;
  --accent-glow: rgba(96, 116, 255, 0.85);
  --accent-ink: #3C52FC;
}
[data-accent="coral"] {
  --accent: var(--coral);
  --accent-on: #010101;
  --accent-text: var(--coral);
  --accent-glow: rgba(255, 158, 122, 0.85);
  --accent-ink: #D1532B;
}

/* Полоса в логотипе собирает цвета всех направлений — но только на главной:
   на внутренних страницах она остаётся одноцветной и держит акцент раздела.
   Деления идут от светлого к тёмному, синий замыкает. */
[data-home] {
  --logo-seg-1: var(--lime);
  --logo-seg-2: var(--mint);
  --logo-seg-3: var(--aqua);
  --logo-seg-4: var(--coral);
}

/* Карточка направления на главной красится своим цветом: data-accent
   переопределяет переменные для поддерева, поэтому кнопка внутри
   карточки подхватывает тот же цвет. */
.svc-card--tinted {
  background: var(--accent);
  color: var(--accent-on);
}
.svc-card--tinted .svc-card__heading,
.svc-card--tinted .svc-card__list a { color: var(--accent-on); }
.svc-card--tinted .svc-card__list a:hover { opacity: .7; }
.svc-card--tinted .svc-card__btn {
  border-color: var(--accent-on);
  color: var(--accent-on);
}
.svc-card--tinted .svc-card__btn:hover {
  background: var(--accent-on);
  color: var(--accent);
}

/* Цитата на главной: портрет и слова о подходе. Плоско, без рамок —
   фото работает как отдельный блок рядом с текстом. */
.home-quote {
  background: var(--bg-light);
  color: var(--text-grey);
  padding: 96px 0;
}
.home-quote__figure {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin: 0;
}
.home-quote__photo {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
}
.home-quote__body { display: flex; flex-direction: column; gap: 28px; }
.home-quote__text {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.home-quote__author { display: flex; flex-direction: column; gap: 4px; }
.home-quote__name {
  font-size: var(--fs-secondary);
  font-weight: 500;
}
.home-quote__role {
  font-size: 14px;
  color: var(--text-grey-light);
}

@media (max-width: 900px) {
  .home-quote { padding: 56px 0; }
  .home-quote__figure {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .home-quote__photo { width: 220px; }
}