/**
 * Design System v2 — общие примитивы marketing-страниц.
 * Типографика, page shell, кнопки lg, stats, panels.
 * Layout секций остаётся в page-*.css / home-v2.css.
 */

/* -------------------------------------------------------------------------
 * Page shell
 * ------------------------------------------------------------------------- */

.ds-page {
  font-family: var(--font-text);
  color: var(--text-body);
}

.ds-page__main {
  box-sizing: border-box;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 28px var(--container-pad) 88px;
}

@media (max-width: 767px) {
  .ds-page__main {
    padding-top: 16px;
    padding-bottom: 56px;
  }
}

/* -------------------------------------------------------------------------
 * Section rhythm (все marketing-страницы)
 * ------------------------------------------------------------------------- */

.ds-section,
.home-v2-advantages,
.home-v2-catalog,
.home-v2-articles,
.home-v2-about,
.home-v2-awards,
.home-v2-certificates,
.about-directions,
.about-goal,
.about-stats,
.about-timeline,
.about-awards,
.about-cta,
.service-stats,
.service-advantages,
.service-cta-light,
.service-directions,
.service-cases,
.service-form-section,
.service-roadmap,
.service-reviews {
  margin-top: 0;
  margin-bottom: var(--section-gap);
}

.ds-hero,
.home-v2-hero,
.about-hero,
.service-hero {
  margin-bottom: var(--section-gap-hero);
}

.ds-page__main > :last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------- */

.ds-hero__title,
.home-v2-hero__title,
.about-hero__title,
.service-hero__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--fw-bold);
  line-height: 1.14;
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  text-wrap: balance;
}

.ds-hero__text,
.home-v2-hero__text,
.about-hero__text,
.service-hero__subtitle {
  margin: 0 0 32px;
  max-width: 640px;
  font-size: var(--text-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

.ds-section__title,
.home-v2-section__title,
.about-hero__subtitle,
.about-section__title,
.service-section__title,
.about-cta__title,
.home-v2-about__title,
.service-cta-light__title,
.service-form__title {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}

.ds-section__subtitle,
.service-section__subtitle {
  margin: -12px 0 28px;
  max-width: 640px;
  font-size: var(--text-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

.ds-text,
.ds-text--lead,
.about-goal__lead,
.about-goal__body,
.service-cta-light__text,
.home-v2-about__text {
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

.ds-text--lead,
.about-goal__lead {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}

.about-hero__subtitle {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--color-primary);
  text-wrap: balance;
}

.ds-card__title,
.home-v2-advantages__item-title,
.home-v2-article-card__title,
.home-v2-awards__card-title,
.about-directions__title,
.service-advantages__title,
.service-cases__title,
.service-roadmap__title,
.service-reviews__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-card);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}

.ds-caption,
.about-directions__text,
.about-stats__label,
.about-timeline__text,
.service-stats__label,
.service-advantages__text,
.service-cases__excerpt,
.service-roadmap__text,
.service-reviews__text,
.home-v2-advantages__item-text,
.home-v2-awards__card-sub {
  font-size: var(--text-caption);
  line-height: var(--lh-relaxed);
}

/* -------------------------------------------------------------------------
 * Stats
 * ------------------------------------------------------------------------- */

.ds-stat__value,
.about-stats__value,
.service-stats__value {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--color-primary);
}

.ds-stat__label,
.about-stats__label,
.service-stats__label {
  font-size: var(--text-caption);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

/* -------------------------------------------------------------------------
 * Panels
 * ------------------------------------------------------------------------- */

.ds-panel,
.ds-panel--sunken {
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

/* -------------------------------------------------------------------------
 * Buttons (marketing pages; header compact btn остаётся 14px в header-v2)
 * ------------------------------------------------------------------------- */

.ds-page .ds-btn,
.home-v2 .ds-btn,
.about-page .ds-btn,
.service-page .ds-btn {
  font-family: var(--font-display);
  font-size: var(--text-btn);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

.ds-btn--lg {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  min-height: 52px;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-btn);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}