/* =========================================================
   СТРАНИЦА "О НАС" — стили, специфичные для страницы.
   Hero, сайдбар, футер и .cta-strip — общие элементы сайта,
   не трогаем.

   ИДЕЯ КОМПОЗИЦИИ (осознанно другая, чем в предыдущей версии):
   никаких карточек-коробок с рамкой и тенью — они превращали
   страницу в "набор одинаковых виджетов". Вместо этого —
   типографика и волосяные линии для цифр и принципов, и ОДНА
   крупная тёмная панель для команды — единственное место, где
   страница "повышает голос" (тот же радиус, что у hero, чтобы
   два акцентных блока визуально рифмовались друг с другом).
   Между ними — много воздуха, как на страницах Apple.
   ========================================================= */

/* Общий заголовок секции — используется в "Цифрах" и "Принципах".
   .eyebrow здесь вне .section-head (тот вариант завязан на соседний
   флекс-контейнер), поэтому стиль подписи задаём локально. */
.ab-section-head { max-width: 640px; margin-bottom: 48px; }
.ab-section-head .eyebrow {
  display: block;
  color: var(--color-accent-dark);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.ab-section-head h2 { font-size: clamp(28px, 3.2vw, 38px); }

/* =========================================================
   ЦИФРЫ — одна крупная цифра несёт вес заголовка, три остальные
   идут ниже мелким рядом через волосяные линии. Ни у одной нет
   фона, рамки или тени: вес держит сама типографика, а не "карточка".
   ========================================================= */

.ab-numbers-hero {
  display: flex;
  align-items: flex-end;
  gap: 44px;
  flex-wrap: wrap;
  padding-bottom: 44px;
  margin-bottom: 44px;
  border-bottom: 1px solid rgba(43, 47, 51, 0.1);
}
.ab-numbers-hero-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(90px, 11vw, 152px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--color-text-strong);
}
.ab-numbers-hero-text {
  flex: 1 1 280px;
  max-width: 380px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0 0 14px;
}
@media (max-width: 767px) {
  .ab-numbers-hero {
    flex-direction: column; align-items: flex-start; gap: 16px;
    padding-bottom: 28px; margin-bottom: 28px;
  }
  .ab-numbers-hero-value { font-size: clamp(64px, 18vw, 90px); }
  /* flex: 1 1 280px задумывался как базовая ШИРИНА в горизонтальной
     раскладке — при переключении на колонку тот же 280px становится
     базовой ВЫСОТОЙ (flex-basis в column-контейнере считается по
     высоте), и под текстом появляется пустой блок ровно в 280px,
     как бы мало текста в нём ни было. Сбрасываем во flex-раскладку
     без роста и без навязанной высоты. */
  .ab-numbers-hero-text { flex: 0 1 auto; max-width: none; margin-bottom: 0; }
}

.ab-numbers-row { display: flex; flex-wrap: wrap; }
.ab-numbers-item {
  flex: 1 1 200px;
  padding: 0 36px;
  border-left: 1px solid rgba(43, 47, 51, 0.1);
}
.ab-numbers-item:first-child { padding-left: 0; border-left: none; }
.ab-numbers-item-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 32px);
  color: var(--color-text-strong);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.ab-numbers-item-label {
  display: block;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--color-muted);
  max-width: 22ch;
}
@media (max-width: 599px) {
  .ab-numbers-row { flex-direction: column; }
  .ab-numbers-item {
    flex-basis: auto;
    padding: 20px 0;
    border-left: none;
    border-top: 1px solid rgba(43, 47, 51, 0.1);
  }
  .ab-numbers-item:first-child { padding-top: 0; border-top: none; }
}

/* =========================================================
   ИСТОРИЯ И КОМАНДА — единственная крупная цветная поверхность
   раздела: тёмная панель того же радиуса, что у hero. Только текст:
   о создателе — одна строка с небольшим портретом внизу панели.
   ========================================================= */

.ab-team-panel {
  display: flex;
  background: var(--color-text-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 899px) {
  .ab-team-panel { flex-direction: column; }
}

.ab-team-content { flex: 1; max-width: 820px; padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 899px) { .ab-team-content { padding: 44px 32px; } }
@media (max-width: 480px) { .ab-team-content { padding: 36px 22px; } }

.ab-team-content .eyebrow {
  display: block;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.ab-team-content h2 { color: #fff; font-size: clamp(26px, 2.8vw, 32px); margin: 0 0 22px; }

.ab-team-lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 20px;
}

.ab-team-content p:not(.ab-team-lead):not(.ab-team-signature) {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
  margin: 0 0 16px;
}
.ab-team-content strong { color: #fff; }

/* Строка о создателе: небольшой портрет и одно предложение — акцент панели
   на проекте и команде, а не на человеке */
.ab-team-founder {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ab-team-founder img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
}
.ab-team-signature {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

/* =========================================================
   ПРИНЦИПЫ — тот же язык, что у цифр: волосяные линии, никаких
   карточек. Иконка по смыслу пункта, не порядковый номер —
   пункты равнозначны, а не последовательность шагов.
   ========================================================= */

.ab-principles-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 40px;
}
@media (max-width: 599px) { .ab-principles-list { grid-template-columns: 1fr; } }

.ab-principle-row { padding-top: 28px; border-top: 1px solid rgba(43, 47, 51, 0.1); }
/* Сплошная заливка + аккуратное направленное свечение — тот же
   язык, что у иконки в hero и у карточки "0" в блоке цифр: один
   акцентный приём на весь сайт, а не отдельное решение для каждого
   места. Свечение узкое и прицельное (небольшой blur, низкая
   непрозрачность), не размытое пятно вокруг всей иконки. */
.ab-principle-row i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-accent);
  color: #06231a;
  font-size: 17px;
  margin-bottom: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 14px -6px rgba(29, 217, 122, 0.55);
}
.ab-principle-row h3 { font-size: 16px; line-height: 1.3; margin-bottom: 8px; }
.ab-principle-row p { font-size: 14.5px; line-height: 1.65; color: var(--color-muted); margin: 0; }
/* =========================================================
   ПОДВОДКА ПОД ЗАГОЛОВКОМ СЕКЦИИ

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

.ab-lead-under-head {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 14px 0 0;
}

/* =========================================================
   СТАНДАРТЫ — две колонки на волосяных линиях, тот же язык,
   что у блока «Цифры» и «Принципы»: никаких карточек с тенью,
   вес держит типографика. Это не навигация, а пояснительный
   перечень, поэтому сетка из плиток здесь неуместна.
   ========================================================= */

.ab-standards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 0;
}
@media (max-width: 767px) { .ab-standards { grid-template-columns: 1fr; } }

.ab-standard {
  padding-top: 26px;
  margin-top: 26px;
  border-top: 1px solid rgba(43, 47, 51, 0.1);
}
/* Первые две ячейки — верхний ряд, у них линия сверху лишняя */
.ab-standards > .ab-standard:nth-child(1),
.ab-standards > .ab-standard:nth-child(2) { margin-top: 0; border-top: none; padding-top: 0; }
@media (max-width: 767px) {
  .ab-standards > .ab-standard:nth-child(2) {
    margin-top: 26px; padding-top: 26px;
    border-top: 1px solid rgba(43, 47, 51, 0.1);
  }
}

.ab-standard h3 {
  font-size: 16px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--color-text-strong);
}
.ab-standard p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0;
}
.ab-standard strong { color: var(--color-text-strong); font-weight: 600; }

/* =========================================================
   ХРОНИКА ИЗМЕНЕНИЙ — вертикальный список с меткой периода
   слева. Метка набирается акцентным цветом, но без заливки:
   на странице уже есть тёмная панель команды, второй крупный
   цветной блок начал бы с ней спорить.
   ========================================================= */

.ab-changes {
  display: flex;
  flex-direction: column;
}

.ab-change {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid rgba(43, 47, 51, 0.1);
}
.ab-change:first-child { border-top: none; padding-top: 0; }

.ab-change-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-accent-dark);
  letter-spacing: -0.01em;
}

.ab-change p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0;
}

@media (max-width: 599px) {
  .ab-change { grid-template-columns: 1fr; gap: 8px; }
}

/* =========================================================
   РЕКВИЗИТЫ — строгий перечень «ключ — значение». Оформление
   намеренно сдержанное: это юридический блок, он должен
   читаться как документ, а не как рекламная врезка.
   ========================================================= */

.ab-legal {
  border-top: 1px solid rgba(43, 47, 51, 0.1);
}

.ab-legal-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(43, 47, 51, 0.08);
}

.ab-legal-key {
  font-size: 13.5px;
  color: var(--color-muted);
}
.ab-legal-val {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-strong);
}

@media (max-width: 599px) {
  .ab-legal-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
}