/* ============================================
   PAGES / SECTIONS
   Стили конкретных блоков страницы:
   header, mobile menu, hero и далее.
   ============================================ */

/* ============================================
   HEADER
   ============================================ */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--color-border-soft);
  /* backdrop-filter намеренно не используется: он создаёт containing block
     для position: fixed у .mobile-menu, из-за чего меню позиционируется
     относительно .header (76px), а не viewport. */
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  min-width: 0;
}

/* ---------- Logo ---------- */
.header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--color-graphite);
}

.header__logo svg {
  display: block;
  width: 196px;
  height: auto;
}

.header__logo:hover,
.header__logo:focus-visible {
  color: var(--color-graphite);
}

.header__logo:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* ---------- Nav (desktop) ---------- */
.header__nav {
  display: none; /* появляется на десктопе */
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-soft);
  transition: color var(--transition-base);
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--color-primary-dark);
}

.nav__link--active {
  font-weight: 600;
  color: var(--color-primary-dark);
}

/* ---------- Nav dropdown (desktop) ---------- */
.nav__item--has-dropdown {
  position: relative;
}

.nav__link--toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}

.nav__link--toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 4px;
}

.nav__caret {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.nav__item--has-dropdown.is-open .nav__caret {
  transform: rotate(180deg);
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: var(--z-dropdown);
  min-width: 320px;
  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility 0s linear var(--transition-base);
}

/* "Мостик" между кнопкой и панелью — курсор не теряет hover */
.nav__dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav__item--has-dropdown.is-open .nav__dropdown,
.nav__item--has-dropdown:hover:where(:not(.is-hover-dismissed)) .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility 0s linear 0s;
}

.nav__item--has-dropdown.is-hover-dismissed:not(.is-open) .nav__dropdown {
  transition: none;
}

.nav__dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__dropdown-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  color: var(--color-text);
  transition: background var(--transition-base);
}

.nav__dropdown-link:hover,
.nav__dropdown-link:focus-visible {
  background: var(--color-primary-extra-soft);
  color: var(--color-text);
  outline: none;
}

.nav__dropdown-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.nav__dropdown-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.nav__dropdown-link--active .nav__dropdown-name {
  color: var(--color-primary-dark);
}

.nav__dropdown-all {
  display: block;
  margin-top: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--color-border-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.nav__dropdown-all:hover {
  color: var(--color-primary-hover);
}

@media (max-width: 1099px) {
  /* На мобильном/планшете dropdown скрыт — раскрытие в mobile-menu */
  .nav__dropdown {
    display: none;
  }
}

/* ---------- Mobile menu — expanded profiles group ---------- */
.mobile-menu__group {
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--color-border-soft);
}

.mobile-menu__group-title {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
}

.mobile-menu__group-title--active {
  font-weight: 700;
  color: var(--color-primary-dark);
}

.mobile-menu__sublist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 4px 16px;
}

.mobile-menu__sublink {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  font-size: 15px;
  color: var(--color-text-soft);
}

.mobile-menu__sublink:hover {
  color: var(--color-primary-dark);
}

.mobile-menu__sublink-name {
  font-weight: 600;
}

.mobile-menu__sublink-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.mobile-menu__sublink--active {
  color: var(--color-primary-dark);
}

.mobile-menu__sublink--active .mobile-menu__sublink-meta {
  color: var(--color-primary-dark);
}

/* ---------- Header CTA (desktop) ---------- */
.header__cta {
  display: none;
  flex-shrink: 0;
}

/* ---------- Burger (mobile) ---------- */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.burger__line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

.burger.is-open .burger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger.is-open .burger__line:nth-child(2) {
  opacity: 0;
}

.burger.is-open .burger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Header — desktop ---------- */
@media (min-width: 1100px) {
  .header__nav,
  .header__cta {
    display: inline-flex;
  }
  .burger {
    display: none;
  }
}

@media (min-width: 1100px) and (max-width: 1199px) {
  .header__nav .nav__list {
    column-gap: 12px;
  }
}

/* ============================================
   MOBILE MENU
   ============================================ */
.mobile-menu {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: calc(var(--z-header) - 1);
  display: flex;
  flex-direction: column;
  padding: 32px 24px 40px;
  background: var(--color-surface);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow),
    visibility 0s linear var(--transition-slow);
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow),
    visibility 0s linear 0s;
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}

.mobile-menu__link {
  display: block;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-soft);
  transition: color var(--transition-base);
}

.mobile-menu__link:hover {
  color: var(--color-primary-dark);
}

.mobile-menu__link--active {
  font-weight: 700;
  color: var(--color-primary-dark);
}

@media (min-width: 992px) {
  .mobile-menu {
    display: none;
  }
}

/* Когда меню открыто — фиксируем скролл страницы */
body.is-locked {
  overflow: hidden;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  padding-block: var(--section-padding-sm);
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero {
    padding-block: var(--section-padding);
  }
}

.hero__inner {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 992px) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.hero__content {
  max-width: 600px;
}

.hero__title {
  margin-bottom: 20px;
}

.hero__subtitle {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 32px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .hero__cta .btn {
    width: 100%;
  }
}

.hero__media {
  position: relative;
}

.hero__illustration {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

/* ============================================
   STATS
   ============================================ */
.stats {
  background: var(--color-surface-soft);
}

.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   AUDIENCE
   ============================================ */
.audience__grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 768px) {
  .audience__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   WHY CHOOSE US (УТП)
   ============================================ */
.usp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.usp-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.usp-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  margin-bottom: 16px;
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
}

.usp-card__icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.usp-card__title {
  margin: 0 0 8px;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.usp-card__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

@media (min-width: 600px) {
  .usp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .usp-grid--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .usp-grid--6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .usp-card {
    padding: 24px 20px;
  }
}

/* ============================================
   PROFILES SECTION (slider on homepage)
   ============================================ */
.profiles-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.profiles-section__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.profiles-section__all {
  white-space: nowrap;
}

.profiles-section__buttons {
  display: flex;
  gap: 8px;
}

.profiles-section__list {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Компенсируем контейнерный padding, чтобы крайняя карточка
     могла докрутиться до snap-старта */
  margin-inline: -16px;
  padding-inline: 16px;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.profiles-section__list::-webkit-scrollbar {
  display: none;
}

.profiles-section__list > li {
  flex: 0 0 calc(100% - 20px);
  scroll-snap-align: start;
  min-width: 0;
}

@media (min-width: 600px) {
  .profiles-section__list > li {
    flex: 0 0 calc(50% - 10px);
  }
}

@media (min-width: 992px) {
  .profiles-section__list > li {
    flex: 0 0 calc(33.333% - 14px);
  }
}

@media (max-width: 767px) {
  .profiles-section__header {
    align-items: flex-start;
  }

  .profiles-section__nav {
    width: 100%;
    justify-content: space-between;
  }
}

/* ============================================
   CASES
   ============================================ */
.cases__grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .cases__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .cases__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Section background variant ---------- */
.section--bg {
  background: var(--color-surface-soft);
}

/* ---------- Featured case (large card) ---------- */
.case-featured {
  display: grid;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  text-decoration: none;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.case-featured:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .case-featured {
    grid-template-columns: 1.2fr 1fr;
  }
}

.case-featured__media {
  background: var(--color-surface-muted);
  min-height: 280px;
  display: flex;
  align-items: stretch;
}

.case-featured__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .case-featured__media {
    min-height: 220px;
  }
}

.case-featured__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  justify-content: center;
}

@media (min-width: 992px) {
  .case-featured__body {
    padding: 48px;
  }
}

.case-featured__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.case-featured__title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

.case-featured__desc {
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.case-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-soft);
}

.case-featured__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.case-featured__meta-item svg {
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.case-featured__link {
  align-self: flex-start;
  margin-top: 8px;
}

/* ---------- Filter tabs ---------- */
.cases-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.cases-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}

.cases-filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.cases-filter-btn.is-active {
  color: var(--color-text-inverse);
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 4px 12px rgba(61, 127, 107, 0.18);
}

/* ============================================
   CASE DETAIL PAGE
   ============================================ */
.case-detail-hero { padding-block: 32px 40px; background: var(--color-surface); border-bottom: 1px solid var(--color-border-soft); }
.case-detail-hero__grid { display: grid; gap: 24px; align-items: center; }
.case-detail-hero__content { display: grid; gap: 16px; align-content: center; }
.case-detail-hero__content > .badge { justify-self: start; }
.case-detail-hero__title { max-width: 700px; margin: 0; color: var(--color-text); font-size: clamp(32px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.04em; }
.case-detail-hero__text { max-width: 640px; margin: 0; color: var(--color-text-muted); font-size: 16px; line-height: 1.6; }
.case-detail-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.case-detail-hero__visual { margin: 0; min-width: 0; }
.case-detail-hero__visual img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.case-facts { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
.case-fact { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 88px; padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); }
.case-fact__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--color-primary-dark); flex-shrink: 0; border-radius: var(--radius-sm); background: var(--color-primary-extra-soft); }
.case-fact__icon svg { width: 22px; height: 22px; }
.case-fact__icon--location { color: var(--color-primary-dark); background: var(--color-primary-soft); }
.case-fact__icon--building { color: var(--color-accent-dark); background: var(--color-accent-soft); }
.case-fact__icon--profile { color: var(--color-primary-dark); background: var(--color-primary-extra-soft); }
.case-fact__icon--structure { color: var(--color-accent-dark); background: var(--color-accent-soft); }
.case-fact span:last-child { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.case-fact small { color: var(--color-text-light); font-size: 12px; }
.case-fact strong { color: var(--color-text); font-size: 14px; line-height: 1.35; }
.case-detail-content { background: var(--color-page); }
.case-detail-content__grid { display: grid; gap: 32px; }
.case-detail-sidebar { display: grid; gap: 24px; align-content: start; }
.case-toc, .case-consultation { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); }
.case-toc { padding: 20px; }
.case-toc__title { margin: 0 0 16px; color: var(--color-text); font-size: 16px; }
.case-toc__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.case-toc__list a { display: block; min-height: 36px; padding: 8px 10px; color: var(--color-text-muted); font-size: 13px; border-left: 2px solid transparent; }
.case-toc__list a:hover, .case-toc__list a:focus, .case-toc__list a[aria-current="location"] { color: var(--color-primary-dark); border-left-color: var(--color-primary-dark); background: var(--color-primary-extra-soft); }
.case-consultation { display: grid; gap: 12px; }
.case-consultation__title { margin: 0; color: var(--color-text); font-size: 16px; line-height: 1.35; }
.case-consultation p { margin: 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.case-consultation .btn { width: 100%; min-width: 0; justify-self: stretch; padding-inline: 12px; gap: 6px; font-size: 12px; line-height: 1.3; text-align: center; white-space: normal; }
.case-detail-content__main { display: grid; gap: 40px; min-width: 0; }
.case-copy { display: grid; gap: 12px; }
.case-copy h2, .case-profile-section h2, .case-table-section h2 { margin: 0; color: var(--color-text); }
.case-copy p { margin: 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.65; }
.case-copy strong { color: var(--color-text); }
.case-check-list { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.case-check-list li { position: relative; padding-left: 20px; color: var(--color-text); font-size: 14px; line-height: 1.5; }
.case-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary-dark); font-weight: 700; }
.case-profile-section, .case-table-section { display: grid; gap: 16px; }
.case-profile-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.case-profile-card { display: grid; grid-template-columns: 1fr 120px; gap: 16px; align-items: center; padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.case-profile-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.case-profile-card h3 { margin: 0 0 4px; color: var(--color-text); font-size: 17px; }
.case-profile-card p { margin: 0 0 12px; color: var(--color-text-muted); font-size: 12px; line-height: 1.45; }
.case-profile-card img { width: 120px; height: 72px; object-fit: contain; }
.case-detail-page .table-wrap { border-radius: var(--radius-md); }
.case-detail-page .table { min-width: 620px; }
.case-detail-page .table th, .case-detail-page .table td { padding: 12px 14px; font-size: 13px; }
.case-detail-page .table tbody th { color: var(--color-text); font-weight: 600; background: var(--color-surface); }
.case-result-panel { display: grid; gap: 32px; align-items: center; }
.case-result-panel__label { display: block; margin-bottom: 8px; color: var(--color-primary-dark); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.case-result-panel h2 { margin: 0 0 12px; }
.case-result-panel p { max-width: 680px; margin: 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.65; }
.case-result-panel__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.case-result-panel__stats div { display: grid; gap: 4px; }
.case-result-panel__stats strong { color: var(--color-primary-dark); font-size: 24px; }
.case-result-panel__stats span { color: var(--color-text-muted); font-size: 12px; line-height: 1.35; }
.case-document-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.case-document-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; min-height: 76px; padding: 14px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.case-document-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.case-document-card__type { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 28px; color: var(--color-primary-dark); background: var(--color-primary-soft); border-radius: var(--radius-xs); font-size: 11px; font-weight: 700; }
.case-document-card > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.case-document-card strong { color: var(--color-text); font-size: 13px; line-height: 1.3; }
.case-document-card small { color: var(--color-text-muted); font-size: 11px; line-height: 1.35; }
.case-document-card .link-arrow { font-size: 0; }
.case-document-card .link-arrow::after { font-size: 18px; }
.case-gallery { display: grid; grid-template-columns: 1fr; gap: 16px; }
.case-gallery__item { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); background: var(--color-surface-soft); transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); }
.case-gallery__item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.case-gallery__item:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 4px; }
.case-gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery-modal__dialog { max-width: min(1120px, calc(100vw - 32px)); padding: 48px 16px 16px; background: var(--color-text); }
.gallery-modal__title { position: absolute; top: 16px; left: 16px; margin: 0; color: var(--color-text-inverse); font-size: 14px; font-weight: 600; }
.gallery-modal__image { width: 100%; max-height: calc(100vh - 112px); object-fit: contain; }
.gallery-modal .modal__close { color: var(--color-text-inverse); }
.gallery-modal .modal__close:hover, .gallery-modal .modal__close:focus-visible { color: var(--color-text-inverse); background: rgba(255, 255, 255, 0.14); }
@media (min-width: 600px) { .case-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 480px) { .gallery-modal__dialog { max-width: none; padding: 48px 8px 8px; } }
.case-similar-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.case-similar-card { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; padding: 12px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); }
.case-similar-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.case-similar-card img { width: 120px; height: 80px; object-fit: cover; border-radius: var(--radius-xs); }
.case-similar-card > span { display: grid; gap: 5px; }
.case-similar-card strong { color: var(--color-text); font-size: 13px; }
.case-similar-card small { color: var(--color-text-muted); font-size: 11px; }
.case-similar-card .link-arrow { font-size: 12px; }
.case-detail-cta { display: grid; gap: 32px; align-items: center; padding: 48px; }
.case-detail-cta .cta-panel__title { margin: 0; }
.case-detail-cta .cta-panel__text { margin-top: 24px; }
.case-detail-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.case-detail-cta > img { width: 100%; height: auto; }
@media (min-width: 600px) { .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case-document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .case-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 992px) { .case-similar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .case-detail-hero { padding-block: 48px 56px; } .case-detail-hero__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; } .case-facts { gap: 16px; margin-top: 48px; } .case-detail-content__grid { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; } .case-toc { position: sticky; top: 96px; } .case-detail-cta { grid-template-columns: 1fr 1fr; gap: 48px; padding: 56px 64px; } }
@media (min-width: 992px) { .case-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px) { .case-detail-content__grid { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; } .case-profile-grid { grid-template-columns: repeat(2, 1fr); } .case-result-panel { grid-template-columns: 1.2fr 1fr; gap: 64px; } }
@media (min-width: 1200px) { .case-detail-hero__grid { gap: 64px; } .case-detail-content__grid { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; } .case-document-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .case-detail-hero__actions, .case-detail-cta__actions { display: grid; } .case-detail-hero__actions .btn, .case-detail-cta__actions .btn { width: 100%; } .case-detail-cta { padding: 32px; } .case-profile-card { grid-template-columns: 1fr; } .case-profile-card img { width: 100%; height: 96px; } .case-result-panel__stats { grid-template-columns: 1fr; } }

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  background: var(--color-surface-soft);
}

/* ============================================
   CONTACT / FORM SECTION
   ============================================ */
.contact {
  background: var(--color-surface);
}

.contact__inner {
  display: grid;
  gap: 48px;
}

@media (min-width: 992px) {
  .contact__inner {
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: start;
  }
}

.contact__info {
  max-width: 480px;
}

.contact__title {
  margin-bottom: 16px;
}

.contact__text {
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 32px;
}

.contact__details {
  display: grid;
  gap: 20px;
}

.contact__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact__item-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact__item-icon svg {
  width: 22px;
  height: 22px;
}

.contact__item-label {
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: 2px;
}

.contact__item-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.contact__item-value a {
  color: var(--color-text);
  transition: color var(--transition-base);
}

.contact__item-value a:hover {
  color: var(--color-primary-dark);
}

.contact__form-wrapper {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .contact__form-wrapper {
    padding: 40px;
  }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--color-surface-soft);
  border-top: 1px solid var(--color-border-soft);
  padding-top: 72px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 600px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1.2fr;
    gap: 32px;
  }
}

.footer__brand {
  max-width: 280px;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  color: var(--color-graphite);
}

.footer__logo-image {
  display: block;
  width: 196px;
  max-width: none;
  height: auto;
  flex: 0 0 196px;
}

.footer__logo:hover,
.footer__logo:focus-visible {
  color: var(--color-graphite);
}

.footer__logo:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

.footer__desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer__column-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 18px;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__link {
  font-size: 14px;
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.footer__link:hover {
  color: var(--color-primary-dark);
}

.footer__contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.footer__contact-label {
  font-size: 13px;
  color: var(--color-text-light);
}

.footer__contact-value {
  font-size: 14px;
  color: var(--color-text);
}

.footer__contact-value a {
  color: inherit;
  transition: color var(--transition-base);
}

.footer__contact-value a:hover {
  color: var(--color-primary-dark);
}

.footer__social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.footer__social-link {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}

.footer__social-link:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.footer__social-link svg {
  width: 20px;
  height: 20px;
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 56px;
  padding-block: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-light);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__legal a {
  color: var(--color-text-light);
  transition: color var(--transition-base);
}

.footer__legal a:hover {
  color: var(--color-primary-dark);
}

.footer__bottom-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Filter state must take precedence over card layout display rules. */
.norm-grid > li[hidden],
.docs-content li[hidden],
.bim-grid > li[hidden],
.certificates-docs-grid > li[hidden],
#katalogi-cards > li[hidden] {
  display: none;
}

.footer__producer {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--color-text-muted);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity var(--transition-base);
}

.footer__producer:hover,
.footer__producer:focus-visible {
  opacity: 1;
}

.footer__producer-label {
  font-size: 12px;
  line-height: 1;
  white-space: normal;
}

.footer__producer-logo {
  display: block;
  flex-shrink: 0;
  width: 96px;
  height: 22px;
  object-fit: contain;
  object-position: left center;
}

.footer__copyright {
  margin: 0;
}

@media (max-width: 767px) {
  .footer__bottom-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ============================================
   SECTION TITLE (внутри секции)
   ============================================ */
.section__title {
  margin-bottom: 8px;
}

.section__subtitle {
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 600px;
}

.section__header--centered {
  text-align: center;
}

.section__header--centered .section__subtitle {
  margin-inline: auto;
}

.section__header--gap {
  margin-block-end: 32px;
}

.section__header--gap-sm {
  margin-block-end: 24px;
}

/* ============================================
   PAGE HERO (внутренние страницы)
   ============================================ */
.page-hero {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .page-hero {
    padding-block: var(--section-padding);
  }
}

.page-hero__subtitle {
  margin-top: 16px;
  font-size: clamp(16px, 2vw, 18px);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 680px;
}

/* ============================================
   CATALOG FILTERS
   ============================================ */
.filters__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

@media (min-width: 600px) {
  .filters__panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .filters__panel {
    grid-template-columns: repeat(4, 1fr) auto;
    align-items: end;
  }
}

.filters__group {
  display: grid;
  gap: 8px;
}

.filters__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.filters__reset {
  align-self: end;
}

@media (max-width: 991px) {
  .filters__reset {
    grid-column: 1 / -1;
  }
}

/* ============================================
   CATALOG GRID
   ============================================ */
.catalog__results {
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.catalog__results strong {
  color: var(--color-text);
}

.catalog__grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 600px) {
  .catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .catalog__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.catalog__empty {
  text-align: center;
  padding: 64px 24px;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.catalog__empty p {
  font-size: 16px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

/* ============================================
   DOCUMENTS PAGE
   ============================================ */
.documents__section-title {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-soft);
}

.documents__featured {
  margin-bottom: 48px;
}

.documents__grid--featured {
  display: grid;
  gap: 20px;
}

@media (min-width: 768px) {
  .documents__grid--featured {
    grid-template-columns: repeat(2, 1fr);
  }
}

.documents__list {
  display: grid;
  gap: 16px;
  margin-bottom: 48px;
}

.documents__list:last-child {
  margin-bottom: 0;
}

/* ============================================
   STATS (updated for stat-card)
   ============================================ */
.stats {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
}

/* ============================================
   QUICK ACCESS CARDS
   ============================================ */
.quick-access__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  grid-auto-rows: 1fr;
}

@media (min-width: 600px) {
  .quick-access__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .quick-access__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.quick-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.quick-card--static:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border-soft);
  transform: none;
}

.quick-card--cta {
  background: var(--color-primary-extra-soft);
  border-color: var(--color-primary);
}

.quick-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.quick-card__icon svg {
  width: 28px;
  height: 28px;
}

.quick-card--cta .quick-card__icon {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.quick-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}

.quick-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ============================================
   REQUEST SECTION
   ============================================ */
.request-section__inner {
  display: grid;
  gap: 48px;
}

@media (min-width: 992px) {
  .request-section__inner {
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: start;
  }
}

.request-section__text {
  margin-top: 16px;
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.request-section__benefits {
  margin-top: 32px;
}

.request-section__benefits .h4 {
  margin-bottom: 16px;
}

.benefits-list {
  display: grid;
  gap: 12px;
}

.benefits-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--color-text);
}

.benefits-list__item svg {
  flex-shrink: 0;
  color: var(--color-primary-dark);
  margin-top: 2px;
}

.request-section__form {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .request-section__form {
    padding: 40px;
  }
}

/* ============================================
   FAQ SECTION
   ============================================ */
.faq .accordion {
  margin-top: 32px;
  max-width: 800px;
}

/* ============================================
   SECTION HEADER SUBTITLE
   ============================================ */
.section-header__sub {
  margin-top: 8px;
  font-size: 16px;
  color: var(--color-text-muted);
}

/* ============================================
   HEADER WITH TOPBAR (variant with phone/email)
   ============================================ */
.header--topbar {
  height: auto;
}

.header__topbar {
  display: none;
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 14px;
}

@media (min-width: 992px) {
  .header__topbar {
    display: block;
  }
}

.header__topbar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-block: 10px;
}

.header__contacts {
  display: flex;
  gap: 24px;
  align-items: center;
}

.header__contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--transition-base);
}

.header__contact:hover {
  color: var(--color-primary-dark);
}

.header__contact svg {
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.header--topbar .header__inner {
  min-height: var(--header-height);
}

.mobile-menu__contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
  margin-bottom: 20px;
  border-top: 1px solid var(--color-border-soft);
}

@media (min-width: 992px) {
  .mobile-menu__contacts {
    display: none;
  }
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumbs {
  padding-block: 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs__item:not(:last-child)::after {
  content: "›";
  color: var(--color-text-light);
  font-size: 18px;
  line-height: 1;
}

.breadcrumbs__item a {
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.breadcrumbs__item a:hover {
  color: var(--color-primary-dark);
}

.breadcrumbs__item--current span {
  color: var(--color-text);
  font-weight: 500;
}

/* ============================================
   PROFILE HERO
   ============================================ */
.profile-hero {
  padding-block: var(--section-padding);
  background: var(--color-surface);
}

.profile-hero__inner {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 992px) {
  .profile-hero__inner {
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: stretch;
  }

  .profile-hero__content {
    flex-grow: 1;
  }

  .profile-hero__cta {
    margin-top: auto;
  }
}

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

.profile-hero__title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.profile-hero__subtitle {
  font-size: 20px;
  color: var(--color-text-soft);
  font-weight: 500;
  margin: 0;
}

.profile-hero__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.profile-hero__text p {
  margin-bottom: 12px;
}

.profile-hero__text p:last-child {
  margin-bottom: 0;
}

.profile-hero__benefit {
  margin-top: 16px !important;
  padding: 12px 16px;
  background: var(--color-surface-muted);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text);
  font-weight: 500;
}

.profile-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .profile-hero__cta .btn {
    width: 100%;
  }
}

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

.profile-hero__image {
  background: var(--color-surface-muted);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.profile-hero__image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.profile-hero__scheme {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: 20px;
}

.profile-hero__scheme svg,
.profile-hero__scheme img {
  width: 100%;
  height: auto;
}

/* ============================================
   PROFILE FEATURES (icons row)
   ============================================ */
.profile-hero__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border-soft);
}

@media (min-width: 768px) {
  .profile-hero__features {
    grid-template-columns: repeat(4, 1fr);
  }
}

.profile-feature {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-feature__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-feature__icon svg {
  width: 24px;
  height: 24px;
}

.profile-feature__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
}

/* ============================================
   KEY SPECS (4 cards row)
   ============================================ */
.key-specs {
  padding-block: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
}

.key-specs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  margin-top: 32px;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .key-specs__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.key-spec {
  padding: 20px 24px;
  border-right: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.key-spec:last-child {
  border-right: none;
}

@media (max-width: 767px) {
  .key-spec:nth-child(2n) {
    border-right: none;
  }
  .key-spec:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (min-width: 768px) {
  .key-spec {
    border-bottom: none;
  }
}

.key-spec__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.key-spec__icon {
  width: 28px;
  height: 28px;
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.key-spec__icon svg {
  width: 100%;
  height: 100%;
}

.key-spec__label {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.key-spec__value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .key-spec__value {
    font-size: 28px;
  }
}

/* ============================================
   PROFILE CONTENT (geometry + key info)
   ============================================ */
.profile-content {
  padding-top: 80px;
}

.profile-content__grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 992px) {
  .profile-content__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

.profile-content__geometry,
.profile-content__key,
.profile-desc__applications {
  padding: 32px;
}

@media (max-width: 767px) {
  .profile-content__geometry,
  .profile-content__key,
  .profile-desc__applications {
    padding: 24px;
  }
}

.profile-content__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.geometry-drawing {
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
  padding: 24px;
}

.geometry-drawing svg,
.geometry-drawing img {
  width: 100%;
  height: auto;
}

/* Profile info list (definition list) */
.profile-info {
  display: grid;
  gap: 14px;
}

.profile-info__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 15px;
}

.profile-info__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.profile-info__row dt {
  color: var(--color-text-muted);
  font-weight: 500;
  flex-shrink: 0;
}

.profile-info__row dd {
  color: var(--color-text);
  font-weight: 600;
  text-align: right;
}

/* ============================================
   PROFILE DESCRIPTION + APPLICATIONS
   ============================================ */
.profile-desc__grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 992px) {
  .profile-desc__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: start;
  }
}

.profile-desc__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.profile-desc__text p {
  margin-bottom: 16px;
}

.profile-desc__text p:last-child {
  margin-bottom: 0;
}

.applications-list {
  display: grid;
  gap: 14px;
}

.applications-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.5;
}

.applications-list__item svg {
  flex-shrink: 0;
  color: var(--color-primary-dark);
  margin-top: 2px;
}

.applications-list__note {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-soft);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-light);
}

/* ============================================
   PROFILE CRITERIA + LIMITATIONS
   ============================================ */
.profile-criteria {
  display: grid;
  grid-column: 1 / -1;
  gap: 16px;
  margin-top: 32px;
}

@media (min-width: 768px) {
  .profile-criteria {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

.profile-when,
.profile-limits {
  padding: 32px;
  border-radius: var(--radius-md);
}

.profile-when {
  background: var(--color-success-soft);
  border: 1px solid var(--color-success);
  border-left: 4px solid var(--color-success);
}

.profile-limits {
  background: var(--color-error-soft);
  border: 1px solid var(--color-error);
  border-left: 4px solid var(--color-error);
}

.profile-when .profile-content__title,
.profile-limits .profile-content__title {
  margin-bottom: 16px;
  font-size: 20px;
}

.when-list,
.limits-list {
  display: grid;
  gap: 12px;
}

.when-list__item,
.limits-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
}

.when-list__item svg,
.limits-list__item svg {
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px;
  height: 20px;
}

.when-list__item svg {
  color: var(--color-success);
}

.limits-list__item svg {
  color: var(--color-error);
}

.profile-limits__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
}

@media (max-width: 767px) {
  .profile-when,
  .profile-limits {
    padding: 24px;
  }
}

/* ============================================
   PROFILE DOCS (4 cards)
   ============================================ */
.docs-grid {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

@media (min-width: 600px) {
  .docs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .docs-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.doc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 24px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.doc-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.doc-card__icon {
  width: 64px;
  height: 80px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-soft);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.doc-card__icon svg {
  width: 24px;
  height: 24px;
}

.doc-card__ext {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-inverse);
  background: var(--color-primary-dark);
  white-space: nowrap;
}

.doc-card__icon--dwg .doc-card__ext {
  background: #3a4a5c;
}

.doc-card__icon--bim .doc-card__ext {
  background: #a88232;
}

.doc-card__icon--cert .doc-card__ext {
  background: #4f8f72;
}

.doc-card__content {
  flex: 1;
  min-width: 0;
}

.doc-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}

.doc-card__meta {
  font-size: 13px;
  color: var(--color-text-light);
  line-height: 1.5;
}

.doc-card__btn {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0 auto;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-surface);
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.doc-card__btn:hover {
  background: var(--color-primary-soft);
}

.profile-docs__note {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-light);
  max-width: 720px;
}

/* ============================================
   RELATED PROFILES (slider)
   ============================================ */
.related-profiles__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.related-profiles__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.related-profiles__intro .section__subtitle {
  margin: 0;
}

.related-profiles__nav {
  display: flex;
  gap: 8px;
}

.related-profiles__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

@media (max-width: 767px) {
  .related-profiles__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .related-profiles__actions {
    justify-content: stretch;
    margin-top: 24px;
  }

  .related-profiles__actions .btn {
    width: 100%;
  }
}

.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}

.slider-btn:hover:not(:disabled) {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.slider-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.slider-btn svg {
  width: 20px;
  height: 20px;
}

.related-profiles__list {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Скрываем скроллбар: навигация через prev/next, свайп сохранён */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0;
  -webkit-overflow-scrolling: touch;
}

.related-profiles__list::-webkit-scrollbar {
  display: none;
}

.related-profiles__list > li {
  flex: 0 0 calc(100% - 20px);
  scroll-snap-align: start;
}

@media (min-width: 600px) {
  .related-profiles__list > li {
    flex: 0 0 calc(50% - 10px);
  }
}

@media (min-width: 992px) {
  .related-profiles__list > li {
    flex: 0 0 calc(33.333% - 14px);
  }
}

.related-profile-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.related-profile-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.related-profile-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.related-profile-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  flex-shrink: 0;
}

.related-profile-card__subtitle {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.4;
}

/* Чертёж — отдельный блок между head и specs, на всю ширину карточки.
   Контейнер — фон-подложка (по образцу .profile-card__drawing из каталога),
   картинка внутри — contain по max-height, чтобы профиль читался целиком. */
.related-profile-card__drawing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: 12px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.related-profile-card__drawing svg,
.related-profile-card__drawing img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 600px) {
  .related-profile-card__drawing svg,
  .related-profile-card__drawing img {
    max-height: 160px;
  }
}

.related-profile-card__specs {
  display: grid;
  gap: 6px;
}

.related-profile-card__specs > div {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.related-profile-card__specs dt {
  color: var(--color-text-muted);
}

.related-profile-card__specs dd {
  color: var(--color-text);
  font-weight: 600;
}

.related-profile-card--current {
  cursor: default;
  background: var(--color-surface-muted);
  border-color: var(--color-primary-extra-soft);
  opacity: 0.92;
}

.related-profile-card--current:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary-extra-soft);
}

.related-profile-card--current .related-profile-card__title {
  color: var(--color-text-muted);
}

.related-profile-card__current-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.related-profile-card__current-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-dark);
}

/* ============================================
   PROFILE FAQ
   ============================================ */
.profile-faq__head {
  max-width: 760px;
  margin-bottom: 32px;
}

.profile-faq__sub {
  margin-top: 12px;
  color: var(--color-text-soft);
  font-size: 15px;
  line-height: 1.6;
}

.profile-faq .accordion {
  max-width: 900px;
}

/* ============================================
   PROFILE CTA (with skeleton)
   ============================================ */
.profile-cta {
  padding-block: var(--section-padding);
}

.profile-cta__panel {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 48px;
  background: linear-gradient(135deg, var(--color-primary-extra-soft) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
}

@media (min-width: 992px) {
  .profile-cta__panel {
    grid-template-columns: 1.4fr 1fr;
    padding: 56px 64px;
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .profile-cta__panel {
    padding: 32px;
  }
}

.profile-cta__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 12px;
}

.profile-cta__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  max-width: 520px;
}

.profile-cta__trust {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.profile-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .profile-cta__actions .btn {
    width: 100%;
  }
}

.profile-cta__visual {
  display: none;
}

@media (min-width: 992px) {
  .profile-cta__visual {
    display: block;
  }
}

.profile-cta__visual svg {
  width: 100%;
  height: auto;
}

.profile-cta__image {
  display: block;
  margin: 0;
}

.profile-cta__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ============================================
   CASE CARD with location badge
   ============================================ */
.case-card__location {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-xs);
}

.case-card__image {
  position: relative;
}

/* ============================================
   FOOTER WITH SOCIAL & NOTE
   ============================================ */
.footer__note {
  font-size: 13px;
  color: var(--color-text-light);
  font-style: italic;
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-wrap: wrap;
  }
  
  .footer__note {
    flex-basis: 100%;
    text-align: right;
    margin-top: -8px;
  }
}

/* Dark footer variant */
.footer--dark {
  background: var(--color-text);
  border-top: none;
}

.footer--dark .footer__logo-image {
  filter: brightness(0) invert(1);
}

.footer--dark .footer__desc,
.footer--dark .footer__column-title,
.footer--dark .footer__contact-label,
.footer--dark .footer__contact-value,
.footer--dark .footer__link,
.footer--dark .footer__link:hover,
.footer--dark .footer__social-link {
  color: rgba(255, 255, 255, 0.85);
}

.footer--dark .footer__column-title,
.footer--dark .footer__contact-label,
.footer--dark .footer__link:hover {
  color: rgba(255, 255, 255, 1);
}

.footer--dark .footer__social-link:hover {
  color: var(--color-primary);
}

.footer--dark .footer__legal a {
  color: rgba(255, 255, 255, 0.5);
}

.footer--dark .footer__legal a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.footer--dark .footer__bottom {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.footer--dark .footer__bottom p,
.footer--dark .footer__note {
  color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   STUD BOLTS PAGE
   ============================================ */
.stud-bolts-hero { padding: 48px 0 64px; background: var(--color-surface); border-bottom: 1px solid var(--color-border-soft); }
.stud-bolts-hero__inner { display: grid; gap: 32px; align-items: center; }
.stud-bolts-hero__content { max-width: 560px; }
.stud-bolts-hero__title { margin: 16px 0; font-size: clamp(40px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.04em; color: var(--color-text); }
.stud-bolts-hero__lead { margin: 0 0 16px; font-size: 22px; line-height: 1.4; color: var(--color-text); }
.stud-bolts-hero__text { max-width: 500px; margin: 0; color: var(--color-text-muted); line-height: 1.65; }
.stud-bolts-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.stud-bolts-hero__visual { min-width: 0; padding: 12px 0; }
.stud-bolts-hero__visual svg { display: block; width: 100%; height: auto; }
.stud-bolts-benefits { background: var(--color-surface); }
.stud-bolts-benefits__list { display: grid; gap: 1px; padding: 0; margin: 0; list-style: none; border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); overflow: hidden; }
.stud-bolts-benefit { display: flex; gap: 16px; padding: 24px; background: var(--color-surface); }
.stud-bolts-benefit__icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--color-primary); border-radius: 50%; color: var(--color-primary-dark); }
.stud-bolts-benefit__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stud-bolts-benefit h2 { margin: 0 0 6px; font-size: 16px; color: var(--color-text); }
.stud-bolts-benefit p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.stud-bolts-section { padding: 64px 0; }
.stud-bolts-section--soft { background: var(--color-surface-soft); }
.stud-bolts-section h2 { margin: 0 0 24px; color: var(--color-text); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-heading h2 { margin: 8px 0 0; }
.eyebrow { color: var(--color-primary-dark); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.stud-bolts-size-grid, .stud-bolts-info-grid, .stud-bolts-use-grid, .stud-bolts-reasons { display: grid; gap: 16px; }
.stud-bolts-size-card { padding: 20px; }
.stud-bolts-size-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stud-bolts-size-card h3 { margin: 0; color: var(--color-text); font-size: 18px; }
.stud-bolts-size-card__drawing { display: flex; align-items: center; min-height: 144px; margin: 16px 0; padding: 0; background: transparent; border-radius: 0; color: var(--color-text); }
.stud-bolts-size-card__drawing img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.stud-bolts-size-card__drawing svg { width: 100%; height: auto; }
.stud-bolts-size-card dl { display: grid; gap: 8px; margin: 0; }
.stud-bolts-size-card dl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--color-border-soft); padding-bottom: 6px; font-size: 12px; }
.stud-bolts-size-card dt { color: var(--color-text-muted); }
.stud-bolts-size-card dd { margin: 0; color: var(--color-text); text-align: right; }
.stud-bolts-info-card { display: flex; gap: 16px; padding: 24px; color: inherit; }
.stud-bolts-info-card:hover, .stud-bolts-use-card:hover { color: inherit; }
.stud-bolts-info-card__icon { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid var(--color-primary); border-radius: 50%; color: var(--color-primary-dark); }
.stud-bolts-info-card__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stud-bolts-info-card__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.stud-bolts-info-card h3 { margin: 0 0 8px; font-size: 16px; color: var(--color-text); }
.stud-bolts-info-card p { margin: 0 0 12px; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.stud-bolts-info-card .link-arrow { margin-top: auto; }
.stud-bolts-use-card { color: inherit; }
.stud-bolts-use-card__image { aspect-ratio: 16 / 7; overflow: hidden; background: var(--color-surface-soft); }
.stud-bolts-use-card__image img { width: 100%; height: 100%; object-fit: cover; }
.stud-bolts-use-card h3 { margin: 16px 16px 6px; font-size: 16px; color: var(--color-text); }
.stud-bolts-use-card p { margin: 0 16px 20px; color: var(--color-text-muted); font-size: 13px; }
.stud-bolts-reasons { display: grid; gap: 16px; }
.stud-bolts-reason { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px; }
.stud-bolts-reason__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--color-primary-dark); background: var(--color-primary-extra-soft); }
.stud-bolts-reason__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stud-bolts-reason strong { color: var(--color-primary-dark); font-size: 20px; line-height: 1; text-align: center; }
.stud-bolts-reason h3 { margin: 0 0 4px; font-size: 14px; color: var(--color-text); }
.stud-bolts-reason p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--color-text-muted); }
.stud-bolts-cta { padding: 48px 0; background: var(--color-primary-extra-soft); border-block: 1px solid var(--color-border); }
.stud-bolts-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.stud-bolts-cta h2 { margin: 0 0 8px; color: var(--color-text); }
.stud-bolts-cta p { margin: 0; color: var(--color-text-muted); }
@media (min-width: 768px) { .stud-bolts-hero { padding-block: 64px 80px; } .stud-bolts-hero__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; } .stud-bolts-benefits__list { grid-template-columns: repeat(2, 1fr); } .stud-bolts-benefit:nth-child(odd) { border-right: 1px solid var(--color-border-soft); } .stud-bolts-benefit:nth-child(-n + 2) { border-bottom: 1px solid var(--color-border-soft); } .stud-bolts-size-grid, .stud-bolts-info-grid { grid-template-columns: repeat(2, 1fr); } .stud-bolts-use-grid { grid-template-columns: repeat(3, 1fr); } .stud-bolts-reasons { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .stud-bolts-size-grid { grid-template-columns: repeat(4, 1fr); } .stud-bolts-info-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) { .section-heading { align-items: flex-start; flex-direction: column; } .stud-bolts-hero__actions .btn { flex: 1 1 100%; } }
@media (max-width: 480px) { .stud-bolts-section { padding-block: 48px; } .stud-bolts-hero__lead { font-size: 18px; } .stud-bolts-benefit, .stud-bolts-info-card { padding: 20px 16px; } }


.footer--dark .btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* ============================================
   REQUEST PAGE — HERO
   ============================================ */
.request-hero {
  padding-block: var(--section-padding-sm) var(--section-padding);
  background: var(--color-surface);
}

@media (min-width: 768px) {
  .request-hero {
    padding-block: var(--section-padding);
  }
}

.request-hero__inner {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 992px) {
  .request-hero__inner {
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: stretch;
  }

  .request-hero__visual {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .request-hero__visual img {
    align-self: center;
  }
}

.request-hero__title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 20px;
}

.request-hero__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 32px;
  max-width: 520px;
}

.request-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .request-hero__cta .btn {
    width: 100%;
  }
}

.request-hero__visual {
  position: relative;
}

.request-hero__visual svg,
.request-hero__visual img {
  width: 100%;
  height: auto;
  max-width: 480px;
  margin-inline: auto;
  display: block;
}

.request-hero__checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
  margin-top: 24px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

@media (min-width: 600px) {
  .request-hero__checklist {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 992px) {
  .request-hero__checklist {
    margin-top: auto;
  }
}

.request-hero__checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.request-hero__checklist svg {
  color: var(--color-primary-dark);
  flex-shrink: 0;
  max-width: 18px;
}

/* ============================================
   REQUEST FORM + SIDEBAR
   ============================================ */
.request-form__grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 992px) {
  .request-form__grid {
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    align-items: start;
  }
}

.request-form__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .request-form__card {
    padding: 40px;
  }
}

.request-form__card .h2 {
  margin-bottom: 32px;
  font-size: clamp(22px, 3vw, 28px);
}

/* Radio chips */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radio-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.radio-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-chip span {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}

.radio-chip input:checked + span {
  background: var(--color-primary-extra-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.radio-chip input:focus-visible + span {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.radio-chip:hover span {
  border-color: var(--color-primary);
}

/* File drop zone */
.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 32px 20px;
  background: var(--color-surface);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    background var(--transition-base),
    border-color var(--transition-base);
}

.file-drop:hover,
.file-drop--active {
  background: var(--color-primary-extra-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.file-drop svg {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}

.file-drop__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-drop__primary {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.file-drop__secondary {
  font-size: 14px;
  color: var(--color-text-muted);
}

.file-drop__link {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.file-drop__hint {
  font-size: 13px;
  color: var(--color-text-light);
}

/* File list */
.file-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.file-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
}

.file-list__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.file-list__icon svg {
  width: 16px;
  height: 16px;
}

.file-list__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.file-list__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-list__size {
  font-size: 12px;
  color: var(--color-text-light);
}

.file-list__remove {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.file-list__remove:hover {
  background: var(--color-error-soft);
  color: var(--color-error);
}

.file-list__remove svg {
  width: 16px;
  height: 16px;
}

/* Checkbox */
.form-field--checkbox {
  margin-top: 4px;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkbox__box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition:
    background var(--transition-base),
    border-color var(--transition-base);
}

.checkbox__box svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-inverse);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.checkbox input:checked + .checkbox__box {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.checkbox input:checked + .checkbox__box svg {
  opacity: 1;
}

.checkbox input:focus-visible + .checkbox__box {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.checkbox__text {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
}

/* ---------- Checkbox group (multi-select inline list / grid) ---------- */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
}
.checkbox-group--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 16px;
}

.form-label--required-mark {
  color: var(--color-error);
}

/* Form footer — stack (для формы запроса) */
.form__footer--stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  justify-content: flex-start;
  margin-top: 12px;
}

.form__footer--stack .btn {
  width: 100%;
}

.form__footer--stack .form__privacy {
  text-align: center;
  font-size: 12px;
}

/* ============================================
   SIDEBAR (Что приложить, Кому подходит, Шаги, Контакты)
   ============================================ */
.request-form__sidebar {
  display: grid;
  gap: 20px;
}

.sidebar-card {
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.sidebar-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 16px;
}

.sidebar-card__icon {
  width: 28px;
  height: 28px;
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.sidebar-card__icon svg {
  width: 100%;
  height: 100%;
}

.sidebar-list {
  display: grid;
  gap: 12px;
}

.sidebar-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.4;
}

.sidebar-list__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-list__icon svg {
  width: 14px;
  height: 14px;
}

/* Tag chips */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--color-primary-extra-soft);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary-dark);
}

/* Step list */
.step-list {
  display: grid;
  gap: 16px;
  counter-reset: step;
}

.step-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.4;
}

.step-list__num {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Mini contact list */
.contact-mini {
  display: grid;
  gap: 12px;
}

.contact-mini li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.4;
}

.contact-mini a {
  color: var(--color-text);
  transition: color var(--transition-base);
}

.contact-mini a:hover {
  color: var(--color-primary-dark);
}

.contact-mini__icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary-dark);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-mini__icon svg {
  width: 100%;
  height: 100%;
}

/* ============================================
   WHAT YOU GET (Что вы получите)
   ============================================ */
.what-get .h2,
.popular-profiles .h2 {
  margin-bottom: 32px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .benefits-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.benefit-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.benefit-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.benefit-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-card__icon svg {
  width: 24px;
  height: 24px;
}

.benefit-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.benefit-card__text {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ============================================
   POPULAR PROFILES (mini cards)
   ============================================ */
.popular-profiles__list {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .popular-profiles__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .popular-profiles__list {
    grid-template-columns: repeat(6, 1fr);
  }
}

.mini-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 20px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.mini-profile-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.mini-profile-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.mini-profile-card__drawing {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-profile-card__drawing svg,
.mini-profile-card__drawing img {
  width: 100%;
  height: 56px;
  object-fit: contain;
}

.mini-profile-card__tags {
  display: flex;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-light);
}

.mini-profile-card__tags span {
  position: relative;
}

.mini-profile-card__tags span:not(:last-child)::after {
  content: "·";
  margin-left: 8px;
  color: var(--color-border-strong);
}

.mini-profile-card--all {
  background: var(--color-primary-extra-soft);
  border-color: var(--color-primary);
  justify-content: center;
  color: var(--color-primary-dark);
}

.mini-profile-card--all .mini-profile-card__title {
  color: var(--color-primary-dark);
}

.mini-profile-card--all svg {
  color: var(--color-primary-dark);
}

/* ============================================
   TRUST STRIP (горизонтальная полоса)
   ============================================ */
.trust-strip {
  padding-block: 24px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.trust-strip__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (min-width: 600px) {
  .trust-strip__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .trust-strip__list {
    grid-template-columns: repeat(5, 1fr);
  }
}

.trust-strip__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
}

.trust-strip__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-strip__icon svg {
  width: 22px;
  height: 22px;
}

/* ============================================
   HELP CTA (Нужна помощь)
   ============================================ */
.help-cta__panel {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 48px;
  background: linear-gradient(135deg, var(--color-primary-extra-soft) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
}

@media (min-width: 992px) {
  .help-cta__panel {
    grid-template-columns: 1.3fr 1fr;
    padding: 56px 64px;
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .help-cta__panel {
    padding: 32px;
  }
}

.help-cta__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 12px;
}

.help-cta__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  max-width: 520px;
}

.help-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .help-cta__actions .btn {
    width: 100%;
  }
}

.help-cta__visual {
  display: none;
}

@media (min-width: 992px) {
  .help-cta__visual {
    display: block;
  }
}

.help-cta__visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================
   DOCUMENTS PAGE (redesigned)
   ============================================ */

/* --- Hero --- */
.docs-hero {
  padding-block: var(--section-padding-sm) var(--section-padding);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
}

@media (min-width: 768px) {
  .docs-hero {
    padding-block: var(--section-padding);
  }
}

.docs-hero__inner {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 992px) {
  .docs-hero__inner {
    grid-template-columns: 1.3fr 1fr;
    gap: 64px;
  }
}

.docs-hero__title {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 20px;
}

.docs-hero__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  max-width: 560px;
}

/* --- Поиск --- */
.docs-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 560px;
  margin-bottom: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.docs-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.docs-search__input {
  flex: 1;
  height: 52px;
  padding: 14px 18px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--color-text);
  font-family: inherit;
}

.docs-search__input::placeholder {
  color: var(--color-text-light);
}

.docs-search__btn {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer;
  transition: background var(--transition-base);
  flex-shrink: 0;
}

.docs-search__btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.docs-search__btn:hover {
  background: var(--color-primary-hover);
}

.docs-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .docs-hero__cta .btn {
    width: 100%;
  }
}

.docs-hero__visual {
  display: none;
}

@media (min-width: 992px) {
  .docs-hero__visual {
    display: block;
  }
}

.docs-hero__visual img {
  width: 100%;
  height: auto;
  max-width: 480px;
  margin-inline: auto;
  display: block;
}

/* --- Tabs --- */
.docs-section {
  padding-block: var(--section-padding-sm);
}

.news-filter-section {
  padding-block: 24px 0;
}

.news-filter-section .gost-tabs {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .docs-section {
    padding-block: var(--section-padding);
  }

  .news-filter-section {
    padding-block: 32px 0;
  }
}

.docs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  background: var(--color-surface-soft);
  border-radius: var(--radius-md);
  margin-bottom: 32px;
  border: 1px solid var(--color-border-soft);
}

.docs-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.docs-tab:hover {
  color: var(--color-text);
}

.docs-tab.is-active {
  color: var(--color-text-inverse);
  background: var(--color-primary-dark);
}

.docs-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-inverse);
}

.docs-tab__icon--pdf { background: #c95c5c; }
.docs-tab__icon--dwg { background: #3a4a5c; }
.docs-tab__icon--bim { background: #a88232; }

/* Когда активный таб — белая иконка */
.docs-tab.is-active .docs-tab__icon {
  color: var(--color-text-inverse);
}

.docs-section .doc-card__top {
  min-width: 0;
}

.docs-section .docs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 992px) {
  .docs-section .docs-grid {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 40px;
  }
}

.docs-sidebar {
  display: grid;
  gap: 20px;
  align-self: start;
}

.docs-sidebar__card {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.docs-sidebar__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-soft);
}

.docs-sidebar__list {
  display: grid;
  gap: 4px;
}

.docs-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.docs-sidebar__link:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.docs-sidebar__icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.docs-sidebar__icon svg {
  width: 14px;
  height: 14px;
}

.docs-sidebar__arrow {
  margin-left: auto;
  color: var(--color-text-light);
  flex-shrink: 0;
  transition: color var(--transition-base), transform var(--transition-base);
}

.docs-sidebar__link:hover .docs-sidebar__arrow {
  color: var(--color-primary-dark);
  transform: translateX(2px);
}

/* --- Content --- */
.docs-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  min-width: 0;
}

.docs-content > section {
  min-width: 0;
}

.docs-content__title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

/* --- Doc card (большой, с описанием) --- */
.docs-list {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .docs-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .docs-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.doc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  height: 100%;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.doc-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.doc-card--featured {
  /* Используется для популярных (более компактные) */
  padding: 18px;
}

.doc-card__top {
  display: flex;
  align-items: center; /* Центрируем бейдж и заголовок по высоте */
  gap: 12px;
  min-height: 28px; /* Фиксированная высота для выравнивания */
}

.doc-card__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-inverse);
  flex-shrink: 0;
  text-transform: uppercase;
}

.doc-card__type--pdf { background: #c95c5c; }
.doc-card__type--dwg { background: #3a4a5c; }
.doc-card__type--bim { background: #a88232; }
.doc-card__type--cert { background: #4f8f72; }

.doc-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  margin: 0; /* Убираем дефолтные отступы */
}

.doc-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  flex: 1;
}

.doc-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  color: var(--color-text-light);
  padding-top: 8px;
  border-top: 1px solid var(--color-border-soft);
}

.doc-card__meta span {
  position: relative;
}

.doc-card__meta span:not(:last-child)::after {
  content: "·";
  margin-left: 12px;
  color: var(--color-border-strong);
}

.doc-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-surface);
  align-self: flex-start;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.doc-card__btn:hover {
  background: var(--color-primary-soft);
}

/* --- СТО grid --- */
.sto-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .sto-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sto-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base);
}

.sto-card:hover {
  box-shadow: var(--shadow-sm);
}

.sto-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sto-card__icon svg {
  width: 28px;
  height: 28px;
}

.sto-card__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sto-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0; /* Сбрасываем дефолтные отступы h3 */
}

.sto-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 6px;
}

.sto-card__meta {
  font-size: 12px;
  color: var(--color-text-light);
  font-weight: 500;
}

.sto-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-surface);
  flex-shrink: 0;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.sto-card__btn:hover {
  background: var(--color-primary-soft);
}

@media (max-width: 600px) {
  .sto-card {
    grid-template-columns: auto 1fr;
  }
  .sto-card__btn {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* --- Документы по профилям --- */
.docs-profiles__list {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .docs-profiles__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .docs-profiles__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .docs-profiles__list {
    grid-template-columns: repeat(5, 1fr);
  }
}

.docs-profile-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 108px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.docs-profile-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.docs-profile-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px; /* Фиксируем высоту для стабильности */
}

.docs-profile-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  flex-shrink: 0;
  margin: 0; /* Сбрасываем дефолтные отступы h3 */
}

.docs-profile-card__drawing {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.docs-profile-card__drawing svg {
  width: 100%;
  height: 28px;
}

.docs-profile-card__arrow {
  color: var(--color-text-light);
  flex-shrink: 0;
  transition: color var(--transition-base), transform var(--transition-base);
}

.docs-profile-card:hover .docs-profile-card__arrow {
  color: var(--color-primary-dark);
  transform: translateX(2px);
}

.docs-profile-card__meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  padding-top: 12px;
  border-top: 1px solid var(--color-border-soft);
}

.docs-profile-card__meta span {
  white-space: nowrap;
}

.docs-profile-card__meta strong {
  color: var(--color-text);
  font-weight: 700;
}

/* --- Последние обновления --- */
.updates-list {
  display: grid;
  gap: 16px;
}

.update-card {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 20px;
  align-items: center; /* Центрируем все элементы по вертикали */
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base);
}

.update-card:hover {
  box-shadow: var(--shadow-sm);
}

.update-card__type {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-inverse);
  text-transform: uppercase;
  flex-shrink: 0;
}

.update-card__type--pdf { background: #c95c5c; }
.update-card__type--dwg { background: #3a4a5c; }
.update-card__type--bim { background: #a88232; }

.update-card__body {
  min-width: 0;
}

.update-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline; /* Выравнивание по базовой линии текста */
  gap: 16px;
  margin-bottom: 6px;
}

.update-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0; /* Сбрасываем дефолтные отступы h3 */
}

.update-card__date {
  font-size: 13px;
  color: var(--color-text-light);
  white-space: nowrap;
  flex-shrink: 0;
}

.update-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.update-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-surface);
  flex-shrink: 0;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.update-card__btn:hover {
  background: var(--color-primary-soft);
}

@media (max-width: 700px) {
  .update-card {
    grid-template-columns: 60px 1fr;
  }
  .update-card__btn {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* --- CTA --- */
.docs-cta__panel {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 48px;
  background: linear-gradient(135deg, var(--color-primary-extra-soft) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
}

@media (min-width: 992px) {
  .docs-cta__panel {
    grid-template-columns: 1.3fr 1fr;
    padding: 56px 64px;
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .docs-cta__panel {
    padding: 32px;
  }
}

.docs-cta__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 12px;
}

.docs-cta__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  max-width: 520px;
}

.docs-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .docs-cta__actions .btn {
    width: 100%;
  }
}

.docs-cta__visual {
  display: none;
}

@media (min-width: 992px) {
  .docs-cta__visual {
    display: block;
  }
}

.docs-cta__visual img {
  display: block;
  width: calc(100% + 160px);
  max-width: none;
  height: auto;
  margin-inline: -80px;
}

.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .stats__grid {
    gap: 24px;
  }
}

/* Mobile: горизонтальный разделитель между строками */
.stats__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.stats__item:last-child {
  border-bottom: none;
}

.stats__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--color-primary-dark);
}

.stats__icon svg {
  width: 26px;
  height: 26px;
}

.stats__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.1;
  min-width: 110px;
}

.stats__label {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Tablet 2×2: вертикальный разделитель + горизонтальный между рядами */
@media (min-width: 600px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 28px 24px;
    border-bottom: 1px solid var(--color-border-soft);
    border-right: 1px solid var(--color-border-soft);
  }
  /* Правая колонка — без правой рамки */
  .stats__item:nth-child(2n) {
    border-right: none;
  }
  /* Последняя строка — без нижней рамки */
  .stats__item:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .stats__value {
    font-size: 28px;
    min-width: auto;
  }
}

/* Desktop 4 в ряд: только вертикальные разделители */
@media (min-width: 992px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .stats__item {
    padding: 36px 32px;
    border-bottom: none;
    border-right: 1px solid var(--color-border-soft);
  }
  .stats__item:last-child {
    border-right: none;
  }
  /* Сбрасываем nth-last-child с планшетного брейкпоинта */
  .stats__item:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .stats__value {
    font-size: 32px;
  }
}

/* ============================================
   AUDIENCE ROUTER
   ============================================ */
.audience {
  background: var(--color-surface-soft);
}

.audience__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .audience__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 20px;
  }
}

/* Mobile: горизонтальная карточка (иконка + текст + стрелка) */
.audience-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.audience-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.audience-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  color: var(--color-primary-dark);
}

.audience-card__icon svg {
  width: 24px;
  height: 24px;
}

.audience-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.audience-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.audience-card__text {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.audience-card__arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform var(--transition-base), color var(--transition-base);
}

.audience-card__arrow svg {
  width: 20px;
  height: 20px;
}

.audience-card:hover .audience-card__arrow {
  color: var(--color-primary-dark);
  transform: translateX(4px);
}

/* Desktop: вертикальная карточка (иконка → заголовок → текст → стрелка снизу) */
@media (min-width: 768px) {
  .audience-card {
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
  }

  .audience-card__body {
    gap: 16px;
  }

  .audience-card__title {
    font-size: 18px;
  }

  .audience-card__text {
    font-size: 14px;
  }

  .audience-card__arrow {
    margin-top: auto;
  }
}

/* ============================================
   POPULAR PROFILES
   ============================================ */
.profiles-section {
  background: var(--color-page);
}

.section-header__sub {
  margin-top: 6px;
  font-size: 15px;
  color: var(--color-text-muted);
}

.profiles-grid {
  list-style: none;
}

.profile-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.profile-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.profile-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.profile-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  min-width: 0;
  flex: 1;
}

.profile-card__drawing {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 12px;
}

.profile-card__drawing svg {
  width: 100%;
  height: auto;
}

.profile-card__drawing img {
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.profile-card__specs {
  display: grid;
  gap: 0;
  flex: 1;
}

.profile-card__spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border-soft);
}

.profile-card__spec:last-child {
  border-bottom: none;
}

.profile-card__spec dt {
  color: var(--color-text-muted);
}

.profile-card__spec dd {
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
}

.profile-card__link {
  margin-top: auto;
  font-size: 14px;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  padding-top: 32px;
  padding-bottom: 48px;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: center;
}

.hero__title {
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 20px;
}

.hero__subtitle {
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 520px;
  margin-bottom: 28px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__cta .btn {
  flex: 1 1 100%;
}

@media (min-width: 480px) {
  .hero__cta .btn {
    flex: 0 0 auto;
  }
}

@media (min-width: 768px) {
  .hero {
    padding-top: 48px;
    padding-bottom: 72px;
  }
  .hero__subtitle {
    font-size: 18px;
    margin-bottom: 36px;
  }
}

@media (min-width: 992px) {
  .hero {
    padding-top: 64px;
    padding-bottom: 96px;
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 48px;
  }
}

/* ---------- Hero media (иллюстрация + подложка-сетка) ---------- */
.hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface-hero);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hero__illustration {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

/* ============================================
   GOST STANDARTS PAGE (ГОСТ и нормативная база)
   ============================================ */

/* --- Hero --- */
.gost-hero {
  padding-block: var(--section-padding-sm) var(--section-padding);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
}

@media (min-width: 768px) {
  .gost-hero {
    padding-block: var(--section-padding);
  }
}

.gost-hero__inner {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 992px) {
  .gost-hero__inner {
    grid-template-columns: 1.25fr 1fr;
    gap: 56px;
  }
}

.gost-hero__title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 20px;
}

.gost-hero__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  max-width: 560px;
}

.gost-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .gost-hero__cta .btn {
    width: 100%;
  }
}

.gost-hero__visual {
  display: none;
}

@media (min-width: 992px) {
  .gost-hero__visual {
    display: block;
  }
}

.gost-hero__visual img {
  width: 100%;
  height: auto;
  max-width: 520px;
  margin-inline: auto;
  display: block;
  border-radius: var(--radius-md);
}

/* Поиск переиспользуем .docs-search — см. выше */

/* --- Вкладки (горизонтальная панель фильтров) --- */
.gost-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  margin-bottom: 32px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

.gost-tabs::-webkit-scrollbar {
  height: 4px;
}

.gost-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.gost-tabs::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.gost-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.gost-tab:hover {
  color: var(--color-text);
}

.gost-tab.is-active {
  color: var(--color-text-inverse);
  background: var(--color-primary-dark);
}

.gost-tab svg {
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .gost-tab {
    padding: 10px 18px;
    font-size: 15px;
  }
}

/* --- Двухколоночный layout --- */
.gost-section {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .gost-section {
    padding-block: var(--section-padding);
  }
}

.gost-layout {
  display: grid;
  gap: 32px;
  min-width: 0;
}

@media (min-width: 992px) {
  .gost-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}

/* --- Sidebar --- */
.gost-sidebar {
  display: grid;
  gap: 16px;
  align-self: start;
}

.gost-sidebar__card {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.gost-sidebar__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-soft);
}

.gost-sidebar__list {
  display: grid;
  gap: 2px;
}

.gost-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.gost-sidebar__link:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.gost-sidebar__icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gost-sidebar__icon svg {
  width: 14px;
  height: 14px;
}

.gost-sidebar__arrow {
  margin-left: auto;
  color: var(--color-text-light);
  flex-shrink: 0;
  transition: color var(--transition-base), transform var(--transition-base);
}

.gost-sidebar__link:hover .gost-sidebar__arrow {
  color: var(--color-primary-dark);
  transform: translateX(2px);
}

/* --- Контент --- */
.gost-content {
  display: grid;
  gap: 48px;
  min-width: 0;
}

.gost-section__title {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

/* --- Карточка нормативного документа --- */
.norm-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  min-width: 0;
}

.norm-grid > li {
  display: flex;
  min-width: 0;
}

.norm-grid .norm-card {
  width: 100%;
  height: 100%;
}

@media (min-width: 600px) {
  .norm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .norm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.norm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  min-width: 0;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.norm-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.norm-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 26px;
}

.norm-card__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-inverse);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.norm-card__type--gost { background: #c95c5c; }
.norm-card__type--sp { background: #3a4a5c; }
.norm-card__type--sto { background: #3d7f6b; }
.norm-card__type--method { background: #7c5e9c; }
.norm-card__type--guide { background: #d5b36a; }
.norm-card__type--cert { background: #4f8f72; }

.norm-card__download {
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  background: transparent;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  transition:
    color var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
}

.norm-card__download:hover {
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.norm-card__download svg {
  width: 16px;
  height: 16px;
}

.norm-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
}

.norm-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  flex: 1;
  overflow-wrap: anywhere;
}

.norm-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--color-text-light);
  padding-top: 12px;
  border-top: 1px solid var(--color-border-soft);
  margin-top: auto;
}

.norm-card__meta span {
  position: relative;
}

.norm-card__meta span:not(:last-child)::after {
  content: "·";
  margin-left: 10px;
  color: var(--color-border-strong);
}

/* --- Сетка для ГОСТ/СП по теме (4 в ряд) --- */
.norm-grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .norm-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .norm-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.norm-grid--4 .norm-card {
  padding: 18px;
}

.norm-grid--4 .norm-card__title {
  font-size: 14px;
}

/* --- Документы по профилям (горизонтальная полоса) --- */
.profile-mini-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 600px) {
  .profile-mini-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .profile-mini-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }
}

.profile-mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.profile-mini:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.profile-mini__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.profile-mini__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin: 0;
}

.profile-mini__arrow {
  color: var(--color-text-light);
  flex-shrink: 0;
  transition: color var(--transition-base), transform var(--transition-base);
}

.profile-mini:hover .profile-mini__arrow {
  color: var(--color-primary-dark);
  transform: translateX(2px);
}

.profile-mini__drawing {
  display: flex;
  align-items: center;
  padding: 6px 0;
}

.profile-mini__drawing svg {
  width: 100%;
  height: 28px;
}

.profile-mini__formats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  padding-top: 8px;
  border-top: 1px solid var(--color-border-soft);
}

.profile-mini__formats span {
  padding: 2px 6px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-xs);
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* --- Последние обновления (горизонтальные строки) --- */
.updates-rows {
  display: grid;
  gap: 12px;
}

.update-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base);
}

.update-row:hover {
  box-shadow: var(--shadow-sm);
}

.update-row__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-inverse);
  text-transform: uppercase;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.update-row__icon--pdf { background: #c95c5c; }
.update-row__icon--sp { background: #3a4a5c; }
.update-row__icon--method { background: #7c5e9c; }

.update-row__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.update-row__date {
  font-size: 13px;
  color: var(--color-text-light);
  font-weight: 500;
}

.update-row__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  margin: 0;
}

.update-row__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.update-row__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-dark);
  flex-shrink: 0;
  transition: color var(--transition-base);
}

.update-row__link::after {
  content: "→";
  transition: transform var(--transition-base);
}

.update-row__link:hover {
  color: var(--color-primary-hover);
}

.update-row__link:hover::after {
  transform: translateX(3px);
}

@media (max-width: 700px) {
  .update-row {
    grid-template-columns: 56px 1fr;
  }
  .update-row__link {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
  }
  .update-row__link::after {
    margin-left: 4px;
  }
}

/* --- CTA (Не нашли нужный нормативный документ?) --- */
.gost-cta__panel {
  position: relative;
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 48px;
  background: linear-gradient(135deg, var(--color-primary-extra-soft) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

@media (min-width: 992px) {
  .gost-cta__panel {
    grid-template-columns: 1.3fr 1fr;
    padding: 56px 64px;
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .gost-cta__panel {
    padding: 32px;
  }
}

.gost-cta__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 12px;
}

.gost-cta__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  max-width: 520px;
}

.gost-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .gost-cta__actions .btn {
    width: 100%;
  }
}

.gost-cta__visual {
  display: none;
}

@media (min-width: 992px) {
  .gost-cta__visual {
    display: block;
  }
}

.gost-cta__visual img {
  width: 100%;
  height: auto;
  max-width: 480px;
  margin-inline: auto;
  display: block;
  border-radius: var(--radius-md);
}
/* ============================================
   BIM / IFC-МОДЕЛИ PAGE
   ============================================ */

/* --- Hero --- */
.bim-hero {
  padding-block: var(--section-padding-sm) var(--section-padding);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
}

@media (min-width: 768px) {
  .bim-hero {
    padding-block: var(--section-padding);
  }
}

.bim-hero__inner {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 992px) {
  .bim-hero__inner {
    grid-template-columns: 1.25fr 1fr;
    gap: 56px;
  }
}

.bim-hero__title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 20px;
}

.bim-hero__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  max-width: 560px;
}

.bim-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .bim-hero__cta .btn {
    width: 100%;
  }
}

.bim-hero__visual {
  display: none;
}

@media (min-width: 992px) {
  .bim-hero__visual {
    display: block;
  }
}

.bim-hero__visual svg {
  width: 100%;
  height: auto;
  max-width: 520px;
  margin-inline: auto;
  display: block;
}

/* --- Вкладки --- */
.bim-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  margin-bottom: 32px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

.bim-tabs::-webkit-scrollbar {
  height: 4px;
}

.bim-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.bim-tabs::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.bim-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.bim-tab:hover {
  color: var(--color-text);
}

.bim-tab.is-active {
  color: var(--color-text-inverse);
  background: var(--color-primary-dark);
}

.bim-tab svg,
.bim-tab__icon {
  flex-shrink: 0;
}

.bim-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-inverse);
  letter-spacing: 0.02em;
}

.bim-tab__icon--revit { background: #3a4a5c; }
.bim-tab__icon--ifc { background: #7c5e9c; }
.bim-tab__icon--dwg { background: #5b6b7a; }
.bim-tab__icon--node { background: #3d7f6b; }
.bim-tab__icon--guide { background: #a88232; }

.bim-tab.is-active .bim-tab__icon {
  /* Когда активный — иконка поверх зелёного */
  filter: brightness(1.05);
}

@media (min-width: 768px) {
  .bim-tab {
    padding: 10px 18px;
    font-size: 15px;
  }
}

/* --- Двухколоночный layout --- */
.bim-section {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .bim-section {
    padding-block: var(--section-padding);
  }
}

.bim-layout {
  display: grid;
  gap: 32px;
  min-width: 0;
}

@media (min-width: 992px) {
  .bim-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}

/* --- Sidebar --- */
.bim-sidebar {
  display: grid;
  gap: 16px;
  align-self: start;
}

.bim-sidebar__card {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.bim-sidebar__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-soft);
}

.bim-sidebar__list {
  display: grid;
  gap: 2px;
}

.bim-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-xs);
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.bim-sidebar__link:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.bim-sidebar__icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bim-sidebar__icon svg {
  width: 14px;
  height: 14px;
}

.bim-sidebar__arrow {
  margin-left: auto;
  color: var(--color-text-light);
  flex-shrink: 0;
  transition: color var(--transition-base), transform var(--transition-base);
}

.bim-sidebar__link:hover .bim-sidebar__arrow {
  color: var(--color-primary-dark);
  transform: translateX(2px);
}

/* --- Контент --- */
.bim-content {
  display: grid;
  gap: 48px;
  min-width: 0;
}

.bim-section__title {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

/* --- Карточка BIM-модели --- */
.bim-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  min-width: 0;
}

@media (min-width: 600px) {
  .bim-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .bim-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bim-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  min-width: 0;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.bim-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.bim-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 26px;
}

.bim-card__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-inverse);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bim-card__type--revit { background: #3a4a5c; }
.bim-card__type--ifc   { background: #7c5e9c; }
.bim-card__type--dwg   { background: #5b6b7a; }
.bim-card__type--node  { background: #3d7f6b; }
.bim-card__type--guide { background: #a88232; }
.bim-card__type--pdf   { background: #c95c5c; }
.bim-card__type--bim   { background: #3d7f6b; }

.bim-card__download {
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  background: transparent;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  transition:
    color var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
}

.bim-card__download:hover {
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.bim-card__download svg {
  width: 16px;
  height: 16px;
}

.bim-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  margin: 0;
}

.bim-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  flex: 1;
}

.bim-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--color-text-light);
  padding-top: 12px;
  border-top: 1px solid var(--color-border-soft);
  margin-top: auto;
}

.bim-card__meta span {
  position: relative;
}

.bim-card__meta span:not(:last-child)::after {
  content: "·";
  margin-left: 10px;
  color: var(--color-border-strong);
}

/* --- Наборы узлов (2 в ряд на десктопе для горизонтальных карточек) --- */
.bim-grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .bim-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Узлы: карточка с мини-визуалом слева --- */
.node-card {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  min-width: 0;
  height: 100%;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.node-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.node-card__visual {
  width: 130px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.node-card__visual svg {
  width: 100%;
  height: auto;
  max-height: 110px;
}

.node-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.node-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

.node-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.node-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--color-text-light);
  padding-top: 8px;
  border-top: 1px solid var(--color-border-soft);
  margin-top: 4px;
}

.node-card__meta span {
  position: relative;
}

.node-card__meta span:not(:last-child)::after {
  content: "·";
  margin-left: 10px;
  color: var(--color-border-strong);
}

.node-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
  margin-top: 4px;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.node-card__btn:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.node-card__btn svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 600px) {
  .node-card {
    flex-direction: column;
  }
  .node-card__visual {
    width: 100%;
    height: 80px;
  }
}

/* --- CTA --- */
.bim-cta__panel {
  position: relative;
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 48px;
  background: linear-gradient(135deg, var(--color-primary-extra-soft) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

@media (min-width: 992px) {
  .bim-cta__panel {
    grid-template-columns: 1.3fr 1fr;
    padding: 56px 64px;
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .bim-cta__panel {
    padding: 32px;
  }
}

.bim-cta__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 12px;
}

.bim-cta__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  max-width: 520px;
}

.bim-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .bim-cta__actions .btn {
    width: 100%;
  }
}

.bim-cta__visual {
  display: none;
}

@media (min-width: 992px) {
  .bim-cta__visual {
    display: block;
  }
}

.bim-cta__visual svg {
  width: 100%;
  height: auto;
  max-width: 480px;
  margin-inline: auto;
  display: block;
}

/* ============================================
   NEWS PAGE (Новости)
   ============================================ */

/* --- Двухколоночный layout: featured + sidebar --- */
.news-layout {
  display: grid;
  gap: 32px;
  min-width: 0;
}

@media (min-width: 992px) {
  .news-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
  }
}

/* --- Featured (главная новость) --- */
.news-featured-section {
  padding-block: 32px var(--section-padding-sm);
}

.news-featured-section__title {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-text);
}

@media (min-width: 768px) {
  .news-featured-section {
    padding-block: 40px var(--section-padding-sm);
  }

  .news-featured-section__title {
    margin-bottom: 16px;
  }
}

.news-featured {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 992px) {
  .news-featured {
    grid-template-columns: 1.1fr 1fr;
  }
}

.news-featured__media {
  position: relative;
  background: var(--color-surface-muted);
  min-height: 240px;
  overflow: hidden;
}

@media (min-width: 992px) {
  .news-featured__media {
    min-height: 100%;
  }
}

.news-featured__media img,
.news-featured__media svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card__image {
  overflow: hidden;
  margin: -24px -24px 10px;
  background: var(--color-surface-muted);
  aspect-ratio: 16 / 9;
}

.news-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-featured__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

@media (min-width: 768px) {
  .news-featured__body {
    padding: 40px;
  }
}

@media (min-width: 992px) {
  .news-featured__body {
    padding: 32px;
  }
}

.news-featured__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.news-featured__meta time {
  font-size: 13px;
  color: var(--color-text-light);
  font-weight: 500;
}

.news-featured__title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
}

.news-featured__desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 560px;
}

.news-featured__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .news-featured__actions .btn {
    width: 100%;
  }
}

/* --- Sidebar (Популярные темы + Подписка) --- */
.news-sidebar {
  display: grid;
  gap: 16px;
  align-self: start;
}

.news-sidebar__card {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.news-sidebar__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-soft);
}

.news-sidebar__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.news-sidebar__topics .badge {
  cursor: pointer;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.news-sidebar__topics .badge:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.news-sidebar__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.news-subscribe-form {
  display: grid;
  gap: 12px;
}

.news-subscribe-form__input-wrap {
  position: relative;
}

.news-subscribe-form__input {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px 12px 42px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text);
  outline: none;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.news-subscribe-form__input::placeholder {
  color: var(--color-text-light);
}

.news-subscribe-form__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.news-subscribe-form__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary-dark);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.news-subscribe-form__submit {
  width: 100%;
}

.news-subscribe-form__consent {
  margin-top: 0;
}

.news-subscribe-form__consent .checkbox__text {
  font-size: 12px;
  line-height: 1.45;
}

.news-subscribe-form__consent.has-error .checkbox__box {
  border-color: var(--color-error);
}

.news-subscribe-form__error {
  margin: 8px 0 0;
  color: var(--color-error);
  font-size: 12px;
  line-height: 1.4;
}

.news-sidebar__legal {
  font-size: 12px;
  color: var(--color-text-light);
  line-height: 1.4;
  margin-top: 12px;
}

.news-sidebar__legal a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Последние публикации (сетка карточек) --- */
.news-section {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .news-section {
    padding-block: var(--section-padding);
  }
}

.news-grid {
  list-style: none;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .news-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.news-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.news-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
}

.news-card__top time {
  font-size: 12px;
  color: var(--color-text-light);
  font-weight: 500;
  white-space: nowrap;
}

.news-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
}

.news-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  flex: 1;
  margin: 0;
}

.news-card .link-arrow {
  margin-top: 4px;
  font-size: 14px;
}

/* --- Категории (Новости по направлениям) --- */
.news-categories {
  background: var(--color-surface-soft);
}

.news-categories__grid {
  list-style: none;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .news-categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .news-categories__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.category-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.category-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.category-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.category-card__icon svg {
  width: 22px;
  height: 22px;
}

.category-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.category-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.category-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.category-card__count {
  padding-top: 12px;
  border-top: 1px solid var(--color-border-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.category-card__count::after {
  content: "→";
  font-weight: 400;
  transition: transform var(--transition-base);
}

.category-card:hover .category-card__count::after {
  transform: translateX(3px);
}

/* --- Архив (аккордеон по годам) --- */
.news-archive {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .news-archive {
    padding-block: var(--section-padding);
  }
}

.archive {
  display: grid;
  gap: 12px;
  max-width: 880px;
}

.archive-year {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-base);
}

.archive-year[open] {
  border-color: var(--color-primary);
}

.archive-year__title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
  transition: background var(--transition-base);
}

.archive-year__title::-webkit-details-marker {
  display: none;
}

.archive-year__title:hover {
  background: var(--color-surface-soft);
}

.archive-year__year {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.archive-year__count {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-left: auto;
}

.archive-year__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-surface-soft);
  color: var(--color-text-soft);
  transition: transform var(--transition-base);
}

.archive-year[open] .archive-year__chevron {
  transform: rotate(180deg);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.archive-months {
  list-style: none;
  padding: 0 24px 20px;
  display: grid;
  gap: 4px;
}

@media (min-width: 600px) {
  .archive-months {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

@media (min-width: 768px) {
  .archive-months {
    grid-template-columns: repeat(3, 1fr);
  }
}

.archive-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.archive-month:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.archive-month__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-radius: var(--radius-full);
  transition: color var(--transition-base), background var(--transition-base);
}

.archive-month:hover .archive-month__count {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ============================================
   NEWS DETAIL PAGE (Детальная страница новости)
   ============================================ */

.news-article-section {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .news-article-section {
    padding-block: var(--section-padding);
  }
}

/* --- Контейнер статьи: типографика --- */
.news-article {
  display: grid;
  gap: 40px;
  min-width: 0;
}

.news-article__head {
  display: grid;
  gap: 24px;
}

.news-article__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.news-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.news-article__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.news-article__meta-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary-dark);
}

.news-article__meta-item a {
  color: var(--color-primary-dark);
  transition: color var(--transition-base);
}

.news-article__meta-item a:hover {
  color: var(--color-primary-hover);
}

.news-article__hero {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.news-article__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-article__hero svg {
  display: block;
  width: 100%;
  height: 100%;
}

.news-article__lead {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--color-text);
  font-weight: 500;
  margin: 0;
  max-width: 720px;
}

/* --- Секции внутри статьи --- */
.news-article__section {
  display: grid;
  gap: 20px;
}

.news-article__section h2 {
  margin: 0;
}

.news-article__section p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 720px;
}

.news-article__section ul {
  margin: 0;
  padding: 0;
}

/* --- Highlighted блок (Ключевые изменения) --- */
.news-article__highlight {
  display: grid;
  gap: 16px;
  padding: 24px 28px;
  background: var(--color-primary-extra-soft);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .news-article__highlight {
    padding: 28px 32px;
  }
}

.news-article__highlight > p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0;
  max-width: none;
}

.news-article__highlight-list {
  list-style: none;
  display: grid;
  gap: 10px;
}

.news-article__highlight-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
}

.news-article__highlight-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d7f6b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* --- Pull-quote --- */
.news-article__quote {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 28px 28px 28px 76px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

@media (min-width: 768px) {
  .news-article__quote {
    padding: 32px 32px 32px 88px;
  }
}

.news-article__quote-mark {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 36px;
  height: 36px;
}

@media (min-width: 768px) {
  .news-article__quote-mark {
    left: 28px;
    top: 28px;
    width: 44px;
    height: 44px;
  }
}

.news-article__quote-text {
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
  font-style: italic;
}

.news-article__quote-author {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* --- Медиа-ряд (2 картинки) --- */
.news-article__media-row {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}

@media (min-width: 768px) {
  .news-article__media-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

.news-article__media {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
}

.news-article__media svg,
.news-article__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Feature list (Что нового) --- */
.news-feature-list {
  list-style: none;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .news-feature-list {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

.news-feature-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-primary-extra-soft);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary-soft);
}

.news-feature-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.news-feature-list__icon svg {
  width: 16px;
  height: 16px;
}

.news-feature-list__text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  align-self: center;
}

/* --- Блок скачивания каталога --- */
.news-article__note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 720px;
}

.news-article__download {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-lg);
  grid-template-columns: auto 1fr;
}

@media (min-width: 768px) {
  .news-article__download {
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    padding: 20px 28px;
  }
}

.news-article__download-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.news-article__download-icon svg {
  width: 22px;
  height: 22px;
}

.news-article__download-text {
  min-width: 0;
}

.news-article__download-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
}

.news-article__download-btn {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (min-width: 768px) {
  .news-article__download-btn {
    grid-column: auto;
    justify-self: end;
  }
}

@media (max-width: 480px) {
  .news-article__download-btn {
    width: 100%;
  }
}

/* --- Update grid (Что вошло в обновление) --- */
.news-update-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .news-update-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px) {
  .news-update-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.news-update-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.news-update-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.news-update-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.news-update-card__icon svg {
  width: 22px;
  height: 22px;
}

.news-update-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
}

.news-update-card__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
}

.news-update-card .link-arrow {
  margin-top: 4px;
  font-size: 13px;
}

/* --- Related cards (Связанные материалы) --- */
.news-related-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .news-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .news-related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.news-related-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.news-related-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.news-related-card__media {
  aspect-ratio: 16 / 9;
  background: var(--color-surface-soft);
  overflow: hidden;
}

.news-related-card__media svg {
  display: block;
  width: 100%;
  height: 100%;
}

.news-related-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  flex: 1;
}

.news-related-card__body .badge {
  align-self: flex-start;
}

.news-related-card__body time {
  font-size: 12px;
  color: var(--color-text-light);
  font-weight: 500;
  margin-bottom: 4px;
}

.news-related-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
}

.news-related-card__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
}

.news-related-card .link-arrow {
  font-size: 13px;
  margin-top: 8px;
}

/* ============================================
   NEWS DETAIL — SIDEBAR (overrides / extensions)
   ============================================ */

/* --- О новости: definition list --- */
.news-sidebar__defs {
  display: grid;
  gap: 14px;
  margin: 0;
}

.news-sidebar__def {
  display: grid;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border-soft);
}

.news-sidebar__def:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.news-sidebar__def dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.news-sidebar__def dd {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

.news-sidebar__def dd a {
  color: var(--color-primary-dark);
  transition: color var(--transition-base);
}

.news-sidebar__def dd a:hover {
  color: var(--color-primary-hover);
}

/* --- Связанные документы в сайдбаре --- */
.news-sidebar__docs {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.news-sidebar-doc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition:
    background var(--transition-base),
    border-color var(--transition-base);
}

.news-sidebar-doc:hover {
  background: var(--color-primary-extra-soft);
  border-color: var(--color-primary);
}

.news-sidebar-doc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 48px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-inverse);
  flex-shrink: 0;
}

.news-sidebar-doc__icon--pdf { background: #c95c5c; }
.news-sidebar-doc__icon--dwg { background: #3a4a5c; }
.news-sidebar-doc__icon--bim { background: #a88232; }

.news-sidebar-doc__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.news-sidebar-doc__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-sidebar-doc__meta {
  font-size: 11px;
  color: var(--color-text-light);
}

.news-sidebar-doc__action {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.news-sidebar-doc__action svg {
  width: 14px;
  height: 14px;
}

.news-sidebar__all-link {
  display: inline-flex;
  margin-top: 16px;
  font-size: 13px;
}

/* --- Похожие профили в сайдбаре --- */
.news-sidebar__profiles {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}

/* --- Поделиться --- */
.news-share {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.news-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  transition:
    background var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}

.news-share__btn:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
}

.news-share__btn svg {
  width: 20px;
  height: 20px;
}

/* --- CTA-вариант карточки в сайдбаре --- */
.sidebar-card--cta {
  background: linear-gradient(135deg, var(--color-primary-extra-soft) 0%, var(--color-surface) 100%);
  border-color: var(--color-primary);
}

.news-sidebar__cta-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}

/* ============================================
   NEWS DETAIL — FINAL CTA
   ============================================ */

.news-final-cta {
  padding-block: var(--section-padding);
}

.news-final-cta__inner {
  position: relative;
  display: grid;
  gap: 28px;
  align-items: center;
  padding: 36px;
  background: linear-gradient(135deg, var(--color-primary-extra-soft) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

@media (min-width: 768px) {
  .news-final-cta__inner {
    padding: 48px 56px;
    grid-template-columns: 1.4fr auto;
    gap: 40px;
  }
}

.news-final-cta__text {
  display: grid;
  gap: 12px;
}

.news-final-cta__text h2 {
  margin: 0;
}

.news-final-cta__text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 560px;
}

.news-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .news-final-cta__actions .btn {
    width: 100%;
  }
}

.news-final-cta__visual {
  display: none;
}

@media (min-width: 992px) {
  .news-final-cta__visual {
    display: block;
    position: absolute;
    right: 32px;
    bottom: 0;
    width: 280px;
    opacity: 0.55;
    pointer-events: none;
  }
}

.news-final-cta__visual svg {
  display: block;
  width: 100%;
  height: auto;
}

/* На десктопе визуал не должен перекрывать текст */
@media (min-width: 1200px) {
  .news-final-cta__inner {
    padding-right: 280px;
  }
}

/* ============================================
   CONSULTATION PAGE
   ============================================ */

/* --- Hero --- */
.consultation-hero {
  padding-block: var(--section-padding-sm) var(--section-padding);
  background: var(--color-surface);
}

@media (min-width: 768px) {
  .consultation-hero {
    padding-block: var(--section-padding);
  }
}

.consultation-hero__inner {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 992px) {
  .consultation-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.consultation-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.consultation-hero__title {
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--color-text);
}

.consultation-hero__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 520px;
}

.consultation-hero__topics {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.consultation-hero__topics-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.consultation-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.consultation-topics li {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--color-primary-extra-soft);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary-dark);
}

.consultation-hero__visual img {
  width: 100%;
  height: auto;
  max-width: 640px;
  margin-inline: auto;
  display: block;
}

/* --- Form + Sidebar --- */
.consultation-form__grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 992px) {
  .consultation-form__grid {
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    align-items: start;
  }
}

.consultation-form__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .consultation-form__card {
    padding: 40px;
  }
}

.consultation-form__card .h2 {
  margin-bottom: 32px;
  font-size: clamp(22px, 3vw, 28px);
}

.consultation-form__sidebar {
  display: grid;
  gap: 20px;
}

/* --- Consultation topics list (sidebar) --- */
.consultation-topics-list {
  list-style: none;
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.consultation-topics-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.4;
}

.consultation-topics-list svg {
  flex-shrink: 0;
  color: var(--color-primary-dark);
  margin-top: 2px;
}

/* --- Experts section --- */
.experts-grid {
  list-style: none;
  display: grid;
  gap: 24px;
  padding: 0;
  margin: 0;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .experts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.expert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 28px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.expert-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.expert-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.expert-card__avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.expert-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.expert-card__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.expert-card__role {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

.expert-card__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 0;
}

.expert-card__tags li {
  padding: 4px 10px;
  background: var(--color-primary-extra-soft);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary-dark);
}

/* --- CTA --- */
.consultation-cta__panel {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 48px;
  background: linear-gradient(135deg, var(--color-primary-extra-soft) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
}

@media (min-width: 992px) {
  .consultation-cta__panel {
    grid-template-columns: 1.3fr 1fr;
    padding: 56px 64px;
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .consultation-cta__panel {
    padding: 32px;
  }
}

.consultation-cta__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 12px;
}

.consultation-cta__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  max-width: 520px;
}

.consultation-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .consultation-cta__actions .btn {
    width: 100%;
  }
}

.consultation-cta__visual {
  display: none;
}

@media (min-width: 992px) {
  .consultation-cta__visual {
    display: block;
  }
}

.consultation-cta__visual img {
  width: 120%;
  max-width: none;
  height: auto;
  margin-inline: -10%;
  display: block;
}

/* ============================================
   CONTACT PAGE
   ============================================ */

/* --- Hero --- */
.contact-hero {
  padding-block: 0 var(--section-padding-sm);
  background: var(--color-surface);
}

.contact-hero__inner {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 992px) {
  .contact-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

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

.contact-hero__title {
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--color-text);
}

.contact-hero__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 520px;
}

.contact-hero__visual svg {
  width: 100%;
  height: auto;
}

/* --- Office section (3 cards) --- */
.office-grid {
  list-style: none;
  display: grid;
  gap: 20px;
}

@media (min-width: 600px) {
  .office-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.office-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.office-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.office-item__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.office-item__image svg {
  width: 100%;
  height: 100%;
}

.office-item__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.office-item__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  width: fit-content;
}

.office-item__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.office-item__address {
  font-size: 14px;
  color: var(--color-text-muted);
}

.office-item__desc {
  font-size: 13px;
  color: var(--color-text-light);
}

/* --- Department section --- */
.dept-grid {
  list-style: none;
  display: grid;
  gap: 20px;
}

@media (min-width: 600px) {
  .dept-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .dept-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dept-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.dept-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.dept-card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-extra-soft);
  border-radius: var(--radius-md);
  color: var(--color-primary-dark);
}

.dept-card__icon svg {
  width: 24px;
  height: 24px;
}

.dept-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.dept-card__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.dept-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.dept-card__contacts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-soft);
}

.dept-card__contacts li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.dept-card__contacts svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.dept-card__contacts a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.dept-card__contacts a:hover {
  color: var(--color-primary-hover);
}

.dept-card__ext {
  font-size: 12px;
  color: var(--color-text-light);
}

/* --- Contact form (grid + sidebar) --- */
.contact-form__grid {
  display: grid;
  gap: 32px;
  align-items: start;
}

@media (min-width: 992px) {
  .contact-form__grid {
    grid-template-columns: 1fr 280px;
    gap: 32px;
  }
}

.contact-form__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}

@media (min-width: 768px) {
  .contact-form__card {
    padding: 40px;
  }
}

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

.contact-direct {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-direct__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-direct__phone,
.contact-direct__email {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-decoration: none;
}

.contact-direct__phone:hover,
.contact-direct__email:hover {
  color: var(--color-primary-hover);
}

.contact-direct__hours {
  font-size: 13px;
  color: var(--color-text-muted);
  padding-left: 30px;
}

/* --- CTA --- */
.contact-cta__panel {
  display: grid;
  gap: 32px;
  padding: 48px;
  background: linear-gradient(135deg, var(--color-primary-extra-soft), var(--color-surface));
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
}

@media (min-width: 992px) {
  .contact-cta__panel {
    grid-template-columns: 1.3fr 1fr;
    padding: 56px 64px;
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .contact-cta__panel {
    padding: 32px;
  }
}

.contact-cta__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.contact-cta__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-top: 14px;
  max-width: 520px;
}

.contact-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

@media (max-width: 480px) {
  .contact-cta__actions .btn {
    width: 100%;
  }
}

.contact-cta__visual {
  display: none;
}

@media (min-width: 992px) {
  .contact-cta__visual {
    display: block;
  }
}

.contact-cta__visual svg {
  width: 100%;
  height: auto;
}

/* ============================================
   PRODUCTION REFERENCE LAYOUT
   ============================================ */
.production-ref { background: var(--color-page); }
.production-ref__hero { background: var(--color-surface); border-bottom: 1px solid var(--color-border-soft); overflow: hidden; }
.production-ref__hero-grid { display: grid; gap: 24px; align-items: center; padding-block: 16px 32px; }
.production-ref__hero-copy h1 { margin: 24px 0 12px; font-size: clamp(36px, 4vw, 52px); line-height: 1.05; white-space: nowrap; color: var(--color-text); }
.production-ref__hero-copy p { max-width: 500px; margin: 0 0 24px; color: var(--color-text-muted); line-height: 1.55; }
.production-ref__hero-media { min-width: 0; margin-inline: -16px; }
.production-ref__hero-media img { display: block; width: 100%; height: 280px; object-fit: cover; }
.breadcrumb { display: flex; gap: 8px; color: var(--color-text-light); font-size: 12px; }
.breadcrumb a:hover { color: var(--color-primary-dark); }
.production-ref__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.production-ref__stats { padding-block: 16px; background: var(--color-page); }
.production-ref__stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.production-ref__stat { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); }
.production-ref__stat-icon, .production-ref__line-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-primary-dark); font-size: 24px; }
.production-ref__stat strong { display: block; color: var(--color-text); font-size: 18px; }
.production-ref__stat span:last-child { display: block; color: var(--color-text-muted); font-size: 12px; }
.production-ref__two-col { display: grid; gap: 16px; }
.production-ref__cap-grid { display: grid; gap: 16px; margin-top: 20px; }
.production-ref__cap-grid article { padding-left: 14px; border-left: 2px solid var(--color-primary); }
.production-ref__cap-grid b, .production-ref__equipment-grid b { display: block; color: var(--color-text); font-size: 14px; }
.production-ref__cap-grid p, .production-ref__equipment-grid p { margin: 6px 0 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.45; }
.production-ref__cap-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--color-border-soft); }
.production-ref__cap-note-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; color: var(--color-primary-dark); background: var(--color-primary-extra-soft); border-radius: var(--radius-sm); }
.production-ref__cap-note-icon svg { width: 22px; height: 22px; }
.production-ref__cap-note b { display: block; color: var(--color-text); font-size: 14px; }
.production-ref__cap-note p { margin: 4px 0 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.5; }
.production-ref__feature { overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); }
.production-ref__feature img { display: block; width: 100%; height: auto; }
.production-ref__feature-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 32px; padding: 16px; color: var(--color-text); font-size: 12px; font-weight: 600; }
.production-ref__feature-list span { padding-left: 10px; border-left: 2px solid var(--color-primary); }
.production-ref__process { background: var(--color-surface-soft); }
.production-ref__steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.production-ref__steps li { display: grid; gap: 8px; padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); }
.production-ref__steps strong { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--color-text-inverse); background: var(--color-primary-dark); border-radius: 50%; }
.production-ref__steps b { color: var(--color-text); font-size: 14px; }
.production-ref__steps p { margin: 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.4; }
.production-ref__equipment-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.production-ref__equipment-grid .card { padding: 16px; }
.production-ref__section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.production-ref__section-head .h2 { margin: 0; }
.production-ref__profile-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.production-ref__profile-grid .profile-card { min-width: 0; padding: 12px; text-align: center; }
.production-ref__profile-grid .profile-card strong { font-size: 12px; }
.production-ref__profile-grid .profile-card img { display: block; width: 100%; height: 88px; object-fit: contain; margin: 8px 0; }
.production-ref__profile-grid .profile-card span { color: var(--color-text-muted); font-size: 11px; }
.production-ref__section-header { margin-bottom: 32px; }
.production-ref__line-icon { width: 32px; height: 32px; margin-bottom: 16px; color: var(--color-primary-dark); }
.production-ref__line-icon svg { width: 28px; height: 28px; }
.production-ref__quality-card { display: grid; gap: 24px; min-width: 0; }
.production-ref__quality-copy { min-width: 0; }
.production-ref__quality-side { display: grid; gap: 16px; min-width: 0; }
.production-ref__quality-image { min-height: 220px; margin: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); }
.production-ref__quality-card .production-ref__quality-image { border: 0; border-radius: var(--radius-md); }
.production-ref__quality-image img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.production-ref__audience-card { min-width: 0; }
.production-ref__check-list, .production-ref__audience { display: grid; gap: 0; margin: 20px 0 0; padding: 0; list-style: none; }
.production-ref__check-list li, .production-ref__audience li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border-soft); }
.production-ref__check-list li:last-child, .production-ref__audience li:last-child { border-bottom: 0; }
.production-ref__list-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; color: var(--color-primary-dark); background: var(--color-primary-extra-soft); border-radius: var(--radius-xs); }
.production-ref__list-icon svg { width: 20px; height: 20px; }
.production-ref__list-copy { display: grid; gap: 4px; min-width: 0; }
.production-ref__check-list b, .production-ref__audience b { color: var(--color-text); font-size: 13px; }
.production-ref__check-list span:not(.production-ref__list-icon), .production-ref__audience span:not(.production-ref__list-icon) { color: var(--color-text-muted); font-size: 12px; line-height: 1.45; }

.production-ref__cta .cta-panel h2 { margin: 0 0 12px; }
.production-ref__cta .cta-panel p { max-width: 520px; margin: 0 0 20px; color: var(--color-text-muted); }
.production-ref__cta .cta-panel img { width: 100%; max-height: 256px; object-fit: contain; }
@media (min-width: 600px) { .production-ref__cap-grid { grid-template-columns: repeat(2,1fr); } .production-ref__equipment-grid { grid-template-columns: repeat(3,1fr); } .production-ref__profile-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 768px) { .production-ref__hero-grid { grid-template-columns: .8fr 1.2fr; min-height: 360px; padding-block: 16px 40px; } .production-ref__hero-media { margin-inline: 0 -24px; } .production-ref__hero-media img { height: 360px; } .production-ref__stats-grid { grid-template-columns: repeat(4,1fr); } .production-ref__two-col { grid-template-columns: 1fr 1fr; } .production-ref__steps { grid-template-columns: repeat(5,1fr); gap: 12px; } .production-ref__steps li { min-height: 180px; } .production-ref__quality-grid { grid-template-columns: 1fr; } .production-ref__quality-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; } .production-ref__quality-card .production-ref__quality-image { min-height: 100%; } .production-ref__quality-card .production-ref__quality-image img { min-height: 100%; } .production-ref__quality-image { min-height: 280px; } .production-ref__quality-image img { min-height: 280px; } .production-ref__profile-grid { grid-template-columns: repeat(6,1fr); } .production-ref__cta .cta-panel { grid-template-columns: 1fr 1.1fr; padding: 32px 40px; } }
@media (min-width: 992px) { .production-ref__hero-grid { min-height: 400px; } .production-ref__hero-media img { height: 400px; } .production-ref__equipment-grid { grid-template-columns: repeat(5,1fr); } }
/* ============================================
   SELECTION PAGE — ПОДБОР ПО НАГРУЗКЕ
   ============================================ */

/* ---------- Hero (канонический светлый, как у .page-hero) ---------- */
.selection-hero {
  background: var(--color-surface-soft);
  color: var(--color-text);
  overflow: hidden;
}

.selection-hero__inner {
  display: grid;
  gap: 48px;
  align-items: center;
  padding-block: var(--section-padding);
}

@media (min-width: 992px) {
  .selection-hero__inner {
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
  }
}

.selection-hero__title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.selection-hero__text {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 0 24px;
}

.selection-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .selection-hero__cta .btn {
    width: 100%;
  }
}

.selection-hero__cta .btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.selection-hero__cta .btn--secondary:hover {
  background: var(--color-primary-extra-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

.selection-hero__visual {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: 8px;
  border: 1px solid var(--color-border-soft);
}

.selection-hero__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* ---------- Табы сценариев (CSS-only) ---------- */
/* Быстрые пресеты нагрузки — ряд чипов под формой калькулятора.
   Заменяет старые табы scen-tabs: один клик — набор значений по типу объекта. */
.calc-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  margin-top: 8px;
  border-top: 1px solid var(--color-border-soft);
}

.calc-presets__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-right: 4px;
}

.calc-presets__chip {
  min-height: 36px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}

.calc-presets__chip:hover {
  color: var(--color-primary-dark);
  background: var(--color-primary-extra-soft);
  border-color: var(--color-primary);
}

.calc-presets__chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.calc-presets__chip--active,
.calc-presets__chip--active:hover {
  color: var(--color-text-inverse);
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

@media (max-width: 767px) {
  .calc-grid,
  .calc-cols,
  .calc-col,
  .calc-form {
    min-width: 0;
    max-width: 100%;
  }
  .calc-grid,
  .calc-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .calc-result__solution {
    flex-wrap: wrap;
  }
  .calc-presets__label {
    width: 100%;
    margin-right: 0;
    margin-bottom: 4px;
  }
}

/* ---------- Калькулятор ----------
   Двухстрочная раскладка: сначала параметры (.calc-form),
   ниже — результат подбора (.calc-result). На всех ширинах одна колонка,
   чтобы длинная панель результата не теснила форму на десктопе. */
.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.calc-cols {
  display: grid;
  gap: 20px;
}

@media (min-width: 768px) {
  .calc-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.calc-form .form-field + .form-field {
  margin-top: 16px;
}

.form-hint {
  font-size: 12px;
  color: var(--color-text-light);
  margin-top: 4px;
}

/* ---------- Слайдеры ---------- */
.slider-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    to right,
    var(--color-primary) 0%,
    var(--color-primary) var(--fill, 50%),
    var(--color-border) var(--fill, 50%),
    var(--color-border) 100%
  );
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--color-primary-dark);
  border: 3px solid var(--color-surface);
  box-shadow: 0 2px 6px rgba(36, 52, 71, 0.25);
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--transition-base);
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--color-primary-dark);
  border: 3px solid var(--color-surface);
  box-shadow: 0 2px 6px rgba(36, 52, 71, 0.25);
  border-radius: 50%;
  cursor: pointer;
}

.slider:focus-visible {
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-text-light);
  margin-top: 2px;
  padding: 0 2px;
}

.slider-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary-dark);
  letter-spacing: -0.01em;
  margin-top: 4px;
  line-height: 1;
}

/* Панель кнопки в нижней колонке формы */
.calc-form .btn--primary {
  margin-top: 20px;
}

/* ---------- Результат ---------- */
.calc-result {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  background:
    linear-gradient(
      135deg,
      var(--color-primary-extra-soft),
      var(--color-surface)
    );
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.calc-result__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-soft);
}

.calc-result__title svg {
  color: var(--color-primary-dark);
}

/* Двухколоночная раскладка внутри результата:
   слева — схема + график областей, справа — профиль + материалы.
   На мобильных экранах — стек в одну колонку. */
.calc-result__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 768px) {
  .calc-result__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }
}

.calc-result__visual,
.calc-result__output {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.calc-result__stats {
  display: grid;
  gap: 12px;
}

.calc-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-block: 8px;
  border-bottom: 1px dashed var(--color-border-soft);
}

.calc-stat:last-child {
  border-bottom: none;
}

.calc-stat__label {
  font-size: 13px;
  color: var(--color-text-muted);
}

.calc-stat__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.calc-stat__value--negative {
  color: var(--color-warning);
}

/* Сводка по материалам в .calc-result — 2 колонки × 2 строки. */
.calc-result__computed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 16px;
  row-gap: 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-soft);
}

.calc-result__computed-title {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.calc-result__computed .calc-stat {
  padding-block: 8px;
}

/* На маленьких экранах — в одну колонку, чтобы не ломать вёрстку. */
@media (max-width: 480px) {
  .calc-result__computed {
    grid-template-columns: 1fr;
  }
}

/* Кнопка «Скопировать параметры» — лёгкий ghost-action под submit.
   После успешного копирования JS добавляет .calc-copy--success → иконка
   и текст кратко уходят в success-цвет (на 1.8s). */
.calc-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-primary-dark);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.calc-copy:hover {
  background: var(--color-primary-extra-soft);
  color: var(--color-primary-hover);
}

.calc-copy:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.calc-copy svg {
  flex-shrink: 0;
}

.calc-copy--success,
.calc-copy--success:hover {
  color: var(--color-success);
  background: var(--color-success-soft);
}

/* Дисклеймер про ориентировочный характер подбора. */
.calc-result__disclaimer {
  margin-top: 4px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-left: 3px solid var(--color-border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Мини-схема q/L: балка с распределённой нагрузкой и пролётом.
   Параметризуется из JS: размерная линия L укорачивается по пролёту,
   стрелки q утолщаются/темнеют по нагрузке (через --q-fraction). */
.calc-diagram {
  margin: 4px 0 0;
  padding: 16px 20px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.calc-diagram__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 140px;
}

.calc-diagram__beam {
  stroke: var(--color-primary-dark);
  stroke-width: 3;
  stroke-linecap: round;
}

.calc-diagram__support {
  fill: var(--color-primary-dark);
}

.calc-diagram__arrows line,
.calc-diagram__arrows polyline {
  stroke: var(--color-primary);
  stroke-width: calc(1.2px + 1.5 * var(--q-fraction, 0.5));
  opacity: calc(0.55 + 0.45 * var(--q-fraction, 0.5));
  fill: none;
  stroke-linecap: round;
  transition:
    stroke-width var(--transition-slow),
    opacity var(--transition-slow),
    stroke var(--transition-base);
}

/* Высокая нагрузка (>80 % диапазона) — стрелки уходят в warning-цвет. */
.calc-diagram--high-load .calc-diagram__arrows line,
.calc-diagram--high-load .calc-diagram__arrows polyline {
  stroke: var(--color-warning);
}

.calc-diagram__dim line {
  stroke: var(--color-text-muted);
  stroke-width: 1;
  transition: x2 var(--transition-slow);
}

.calc-diagram__label {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-main);
  text-anchor: middle;
  dominant-baseline: middle;
}

.calc-diagram__label--q {
  fill: var(--color-primary-dark);
}

.calc-diagram__label--l {
  fill: var(--color-text);
}

.calc-diagram--high-load .calc-diagram__label--q {
  fill: var(--color-warning);
}

/* ---------- График подбора в .calc-result ----------
   Области применения 6 профилей по осям «пролёт L × нагрузка q».
   Прямоугольники рисуются полупрозрачными; активная область (в которую
   попадает точка текущего ввода) подсвечивается ярче. Точка плавно
   движется за слайдерами через transition на cx/cy. */
.calc-chart {
  margin: 4px 0 0;
  padding: 12px 16px 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.calc-chart__caption {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.calc-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  overflow: visible;
}

.calc-chart__grid line {
  stroke: var(--color-border);
  stroke-width: 1;
}

.calc-chart__ticks-x line,
.calc-chart__ticks-y line {
  stroke: var(--color-text-muted);
  stroke-width: 1;
}

.calc-chart__labels-x text,
.calc-chart__labels-y text {
  font-size: 9px;
  font-family: var(--font-main);
  fill: var(--color-text-muted);
}

/* Области: полупрозрачные, тонкая обводка primary. */
.calc-chart__area {
  fill: var(--color-primary-extra-soft);
  fill-opacity: 0.55;
  stroke: var(--color-primary);
  stroke-width: 1;
  stroke-opacity: 0.6;
  transition:
    fill-opacity var(--transition-slow),
    stroke-opacity var(--transition-slow),
    stroke-width var(--transition-slow);
}

/* Интерактивные области: график можно исследовать наведением и кликом. */
.calc-chart__area {
  cursor: pointer;
}

.calc-chart__area:hover,
.calc-chart__area:focus-visible {
  fill-opacity: 0.85;
  stroke: var(--color-primary-dark);
  stroke-width: 2;
  stroke-opacity: 1;
  outline: none;
}

.calc-chart__area-label {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-main);
  fill: var(--color-text-muted);
  text-anchor: middle;
  dominant-baseline: middle;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  transition: fill var(--transition-base);
}

.calc-chart__area-label:hover,
.calc-chart__area-label:focus-visible {
  fill: var(--color-primary-dark);
  font-weight: 700;
}


.calc-chart__area-label--active {
  fill: var(--color-primary-dark);
  font-weight: 700;
}

.calc-chart__point {
  fill: var(--color-primary-dark);
  stroke: var(--color-surface);
  stroke-width: 2;
  transition:
    cx var(--transition-slow),
    cy var(--transition-slow);
}

.calc-chart__axis-label {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-main);
  fill: var(--color-primary-dark);
  dominant-baseline: middle;
}

.calc-chart__axis-label--x {
  text-anchor: middle;
}

.calc-chart__axis-label--y {
  text-anchor: start;
}

@media (prefers-reduced-motion: reduce) {
  .calc-chart__area,
  .calc-chart__area-label,
  .calc-chart__point {
    transition: none;
  }
}

.calc-result__solution {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  margin-top: 4px;
}

.calc-result__solution-label {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.calc-result__profile {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary-dark);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.calc-result__profile:hover {
  color: var(--color-primary-hover);
}

/* Пульсация панели результата после нажатия «Подобрать профиль».
   Расширяющееся кольцо вокруг рамки — короткий визуальный отклик,
   подтверждающий, что действие сработало. */
.calc-result--pulse {
  animation: calc-result-pulse 0.8s ease-out;
}

@keyframes calc-result-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--color-primary), var(--shadow-sm);
  }
  60% {
    box-shadow: 0 0 0 8px var(--color-primary-soft), var(--shadow-sm);
  }
  100% {
    box-shadow: 0 0 0 12px transparent, var(--shadow-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc-result--pulse {
    animation: none;
  }
}

.badge--success {
  color: var(--color-success-dark);
  background: var(--color-success-soft);
}

.badge--accent {
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
}

/* ---------- Рекомендуемые профили ---------- */
.profiles-grid {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}

@media (min-width: 600px) {
  .profiles-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .profiles-grid { grid-template-columns: repeat(3, 1fr); }
}

.profile-card--active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft), var(--shadow-sm);
  background: linear-gradient(180deg, var(--color-primary-extra-soft) 0%, var(--color-surface) 60%);
}

/* ---------- Матрица подбора ---------- */
.table--matrix th,
.table--matrix td {
  text-align: center;
  vertical-align: middle;
}

.table--matrix tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  font-size: 14px;
}

.table--matrix thead th {
  background: var(--color-primary-extra-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
  border-bottom: 2px solid var(--color-primary);
}

.table--matrix .is-highlight {
  background: var(--color-primary-extra-soft);
  color: var(--color-primary-dark);
  font-weight: 600;
  position: relative;
}

.table--matrix thead th.is-highlight::after {
  content: attr(data-highlight-caption);
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary-dark);
  opacity: 0.7;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table--matrix tbody td.is-highlight {
  border-left: 1px solid var(--color-primary);
  border-right: 1px solid var(--color-primary);
}

.table--matrix tbody tr:last-child td.is-highlight {
  border-bottom: 1px solid var(--color-primary);
}

.table--matrix .is-ok {
  color: var(--color-success);
}

.rate {
  font-family: "Inter", "Arial", sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  user-select: none;
}
.rate::before,
.rate::after {
  display: none;
}

/* Подменим "●●●○○" на цветные кружки через CSS color trick */
.rate {
  color: var(--color-border-strong);
}

.rate--2 { color: var(--color-primary); opacity: 0.65; }
.rate--3,
.rate--4,
.rate--5 {
  color: var(--color-primary-dark);
}

/* ---------- Как читать подбор ---------- */
.howto-grid {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

@media (min-width: 600px)  { .howto-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .howto-grid { grid-template-columns: repeat(4, 1fr); } }

.howto-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.howto-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.howto-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.howto-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

.howto-card__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------- Скачать документацию ---------- */
.selection-docs-grid {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

@media (min-width: 768px) {
  .selection-docs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .selection-docs-grid { grid-template-columns: repeat(4, 1fr); }
}

.selection-docs-grid .document-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
}

.selection-docs-grid .document-card__icon {
  margin-bottom: 4px;
}

.selection-docs-grid .document-card__content {
  width: 100%;
  min-width: 0;
}

.selection-docs-grid .document-card__download {
  margin-top: auto;
}

/* ---------- CTA подбор ---------- */
.selection-cta__panel {
  position: relative;
  background: linear-gradient(
    135deg,
    var(--color-primary-extra-soft),
    var(--color-surface)
  );
  border-color: var(--color-primary);
  overflow: hidden;
}

/* Иконка-маркер внутри ссылки "Поиск" в шапке */
.nav__link-search-icon {
  margin-right: 4px;
  vertical-align: -2px;
}

/* ============================================
   SEARCH PAGE (Поиск по сайту)
   Стили уникальных блоков страницы поиска:
   чипы быстрых запросов, сайдбар фильтров,
   карточки результатов разных типов,
   популярные запросы и поисковая CTA.
   ============================================ */

/* ---------- Hero (override surface and CTA colors) ---------- */
.sr-hero {
  padding-block: 32px 48px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
}

@media (min-width: 768px) {
  .sr-hero {
    padding-block: 48px;
  }
}

.sr-hero__inner {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 992px) {
  .sr-hero__inner {
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
  }
}

.sr-hero__title {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 16px;
}

.sr-hero__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  max-width: 560px;
}

/* Растягиваем .docs-search на всю доступную ширину */
.sr-hero__search .docs-search {
  max-width: none;
}

.sr-hero__search {
  margin-bottom: 20px;
}

/* ---------- Чипы быстрых запросов под полем поиска ---------- */
.sr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sr-chips__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-soft);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}

.sr-chips__chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: var(--color-primary-extra-soft);
}

.sr-chips__chip svg {
  flex-shrink: 0;
  color: var(--color-primary-dark);
}

.sr-hero__visual {
  display: none;
}

@media (min-width: 992px) {
  .sr-hero__visual {
    display: block;
  }
}

.sr-hero__visual img,
.sr-hero__visual svg {
  width: 100%;
  height: auto;
  max-width: 520px;
  margin-inline: auto;
  display: block;
}

@media (min-width: 1200px) {
  .search-page .header--topbar .header__inner {
    min-height: 72px;
  }

  .search-page .nav__list {
    gap: 16px;
  }

  .search-page .footer {
    padding-top: 48px;
  }

  .search-page .footer__grid {
    gap: 24px;
  }

  .search-page .footer__column-title {
    margin-bottom: 12px;
  }

  .search-page .footer__list {
    gap: 8px;
  }

  .search-page .footer__contact-item {
    margin-bottom: 12px;
  }

  .search-page .footer__bottom {
    margin-top: 32px;
  }
}

/* ---------- Панель «Найдено N материалов» + сортировка ---------- */
.sr-results-bar {
  padding-block: 16px;
  border-bottom: 1px solid var(--color-border-soft);
}

@media (min-width: 768px) {
  .sr-results-bar {
    padding-block: 24px;
  }
}

.sr-results-bar__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 768px) {
  .sr-results-bar__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.sr-results-bar__count {
  font-size: 15px;
  color: var(--color-text-muted);
}

.sr-results-bar__count strong {
  font-weight: 700;
  color: var(--color-primary-dark);
}

.sr-results-bar__sort {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.sr-results-bar__sort .form-select {
  width: auto;
  height: 44px;
  padding: 10px 36px 10px 14px;
  font-size: 14px;
}

/* ---------- Табы типа материала ---------- */
.sr-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 4px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-soft);
  border-radius: 0;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

.sr-tabs::-webkit-scrollbar {
  height: 4px;
}

.sr-tabs::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.sr-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.sr-tab:hover {
  color: var(--color-text);
}

.sr-tab.is-active {
  color: var(--color-text-inverse);
  background: var(--color-primary-dark);
}

.sr-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: inherit;
}

.sr-tab__icon svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .sr-tab {
    padding: 10px 18px;
    font-size: 15px;
  }
}

/* ---------- Двухколоночный layout: фильтры + результаты ---------- */
.sr-section {
  padding-block: 32px 48px;
}

@media (min-width: 768px) {
  .sr-section {
    padding-block: 48px;
  }
}

.sr-layout {
  display: grid;
  gap: 32px;
  min-width: 0;
}

@media (min-width: 992px) {
  .sr-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
}

/* ---------- Сайдбар с чекбоксами ---------- */
.sr-sidebar {
  display: grid;
  gap: 16px;
  align-self: start;
}

@media (max-width: 991px) {
  .sr-sidebar {
    /* На мобильном/планшете скрываем сайдбар, на десктопе раскрыт */
    /* Эта заглушка скрывает именно длинный сайдбар; фильтрация остаётся доступна через табы */
  }
}

@media (min-width: 992px) {
  .sr-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 16px);
  }
}

.sr-sidebar__card {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.sr-sidebar__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-soft);
}

.sr-sidebar__group {
  display: grid;
  gap: 4px;
}

.sr-sidebar__show-more {
  margin-top: 8px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: transparent;
  border: none;
  cursor: pointer;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition-base);
}

.sr-sidebar__show-more:hover {
  color: var(--color-primary-hover);
}

.sr-sidebar__show-more svg {
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.sr-sidebar__show-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.sr-sidebar__hidden {
  display: none;
}

.sr-sidebar__hidden.is-open {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

/* ---------- Чекбокс фильтра ---------- */
.sr-checkbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-base);
}

.sr-checkbox:hover {
  background: var(--color-primary-extra-soft);
}

.sr-checkbox__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text);
  min-width: 0;
}

.sr-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.sr-checkbox__box {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background var(--transition-base),
    border-color var(--transition-base);
}

.sr-checkbox__box svg {
  width: 12px;
  height: 12px;
  color: var(--color-text-inverse);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.sr-checkbox input:checked + .sr-checkbox__box {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.sr-checkbox input:checked + .sr-checkbox__box svg {
  opacity: 1;
}

.sr-checkbox input:focus-visible + .sr-checkbox__box {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.sr-checkbox__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-checkbox__count {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
  flex-shrink: 0;
}

.sr-checkbox input:checked ~ .sr-checkbox__count {
  color: var(--color-primary-dark);
  font-weight: 700;
}

/* ---------- Кнопка сброса фильтров ---------- */
.sr-sidebar__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-primary-extra-soft);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.sr-sidebar__reset:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.sr-sidebar__reset svg {
  flex-shrink: 0;
}

/* ---------- Колонка результатов ---------- */
.sr-results {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.sr-results__empty {
  display: none;
  text-align: center;
  padding: 64px 24px;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.sr-results.is-empty .sr-results__empty {
  display: block;
}

.sr-results.is-empty [data-result] {
  display: none;
}

.sr-results__empty p {
  font-size: 16px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.sr-results__empty-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

/* ---------- Универсальная карточка результата ---------- */
.sr-result {
  position: relative;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

@media (max-width: 767px) {
  .sr-result {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 16px;
  }
  .sr-result__action {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.sr-result:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

/* ---------- Мини-визуал (для профилей и документов) ---------- */
.sr-result__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  padding: 12px;
  min-height: 96px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .sr-result__visual {
    min-height: 64px;
    padding: 8px;
  }
}

.sr-result__visual svg,
.sr-result__visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 84px;
  object-fit: contain;
}

.sr-result__visual img {
  max-width: 100%;
}

@media (min-width: 768px) {
  .sr-result__visual img {
    max-height: 96px;
  }
}

.sr-result__visual text {
  fill: var(--color-text-muted);
}

.sr-result__visual line {
  stroke: var(--color-border-strong);
}

.sr-result__visual path {
  stroke: currentColor;
}

/* Иконка типа файла (PDF, IFC, doc) */
.sr-result__icon {
  width: 80px;
  height: 96px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  flex-shrink: 0;
  padding: 12px 8px;
  gap: 6px;
}

@media (max-width: 767px) {
  .sr-result__icon {
    width: 56px;
    height: 72px;
  }
}

.sr-result__icon svg {
  display: block;
  width: 28px;
  height: 28px;
  color: currentColor;
}

@media (max-width: 767px) {
  .sr-result__icon svg {
    width: 22px;
    height: 22px;
  }
}

.sr-result__icon-tag {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 32px;
  padding: 2px 8px;
  text-align: center;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.sr-result__icon--pdf {
  color: var(--color-error);
  border-color: var(--color-error);
}

.sr-result__icon-tag--pdf {
  color: var(--color-error);
  background: var(--color-error-soft);
  border: 1px solid var(--color-error);
}
.sr-result__icon-tag--ifc {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary);
}
.sr-result__icon-tag--doc {
  color: var(--color-text-soft);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
}

.sr-result__icon--doc {
  color: var(--color-text-soft);
  border-color: var(--color-border);
}

.sr-result__icon--article {
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
  background: var(--color-primary-extra-soft);
}

/* Цветной кубик IFC (для BIM-результата) */
.sr-result__icon--ifc {
  background: var(--color-primary-extra-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.sr-result__icon--ifc svg {
  width: 32px;
  height: 32px;
  color: currentColor;
}

/* ---------- Тело карточки (заголовок + описание + мета) ---------- */
.sr-result__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sr-result__top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sr-result__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  background: var(--color-primary-extra-soft);
  color: var(--color-primary-dark);
  white-space: nowrap;
}

.sr-result__badge--accent {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

.sr-result__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

.sr-result__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

.sr-result__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-light);
}

.sr-result__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sr-result__meta-item strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Действие справа (Скачать / Подробнее / Перейти) */
.sr-result__action {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 0;
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: transparent;
  border: 1px solid transparent;
  transition:
    color var(--transition-base),
    background var(--transition-base);
  align-self: center;
}

.sr-result__action:hover,
.sr-result__action:focus-visible {
  color: var(--color-primary-hover);
  background: var(--color-primary-extra-soft);
}

.sr-result__action:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.sr-result__action svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ---------- Профильный результат (мини-схема профиля + specs) ---------- */
.sr-result--profile .sr-result__visual {
  background: var(--color-surface);
}

.sr-result__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.sr-result__specs span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sr-result__specs strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ---------- Карточка кейса (с миниатюрой) ---------- */
.sr-result--case {
  grid-template-columns: 180px minmax(0, 1fr) auto;
}

@media (max-width: 767px) {
  .sr-result--case {
    grid-template-columns: 1fr;
  }
}

.sr-result__thumb {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 110px;
  background: var(--color-surface-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

@media (max-width: 767px) {
  .sr-result__thumb {
    aspect-ratio: 16 / 9;
  }
}

.sr-result__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Блок «Популярные запросы» (под результатами) ---------- */
.sr-popular {
  padding-block: 32px 48px;
}

@media (min-width: 768px) {
  .sr-popular {
    padding-block: 48px;
  }
}

.sr-popular__title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.sr-popular__list {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .sr-popular__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .sr-popular__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .sr-popular__list {
    grid-template-columns: repeat(6, 1fr);
  }
}

.sr-popular__chip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.sr-popular__chip:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.sr-popular__chip-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-extra-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sr-popular__chip-icon svg {
  width: 20px;
  height: 20px;
}

.sr-popular__chip-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.sr-popular__chip-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ---------- CTA «Не нашли то, что искали?» ---------- */
.sr-cta {
  padding-block: 32px 48px;
}

@media (min-width: 768px) {
  .sr-cta {
    padding-block: 48px;
  }
}

.sr-cta__panel {
  position: relative;
  overflow: hidden;
  padding: 32px;
  background: linear-gradient(135deg, var(--color-primary-extra-soft) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
}

@media (min-width: 768px) {
  .sr-cta__panel {
    padding: 48px;
  }
}

@media (min-width: 992px) {
  .sr-cta__panel {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: center;
  }
}

.sr-cta__content {
  max-width: 560px;
}

.sr-cta__title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 12px;
}

.sr-cta__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

.sr-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .sr-cta__actions .btn {
    width: 100%;
  }
}

.sr-cta__visual {
  display: none;
}

@media (min-width: 992px) {
  .sr-cta__visual {
    display: block;
  }
}

.sr-cta__visual img,
.sr-cta__visual svg {
  width: 100%;
  height: auto;
  max-width: 480px;
  margin-inline: auto;
  display: block;
}

/* ============================================
   COMPARE PAGE — Сравнение профилей
   Новые блоки: .compare-* и .conclusion-*
   ============================================ */

/* ---------- Section helpers (compare-only) ---------- */
.section--sm {
  padding-block: 32px;
}

@media (min-width: 768px) {
  .section--sm {
    padding-block: 48px;
  }
}

.section--soft {
  background: var(--color-surface-soft);
}

/* ---------- HERO ---------- */
.compare-hero {
  padding-block: 48px 32px;
}

@media (min-width: 768px) {
  .compare-hero {
    padding-block: 64px 48px;
  }
}

.compare-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 992px) {
  .compare-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.compare-hero__content {
  max-width: 560px;
}

.compare-hero__title {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--color-text);
}

.compare-hero__text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.compare-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.compare-hero__visual {
  padding: 16px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.compare-hero__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ---------- TABS ---------- */
.compare-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.compare-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}

.compare-tabs__btn:hover {
  background: var(--color-surface-muted);
  color: var(--color-primary-dark);
}

.compare-tabs__btn.is-active {
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  border-color: var(--color-primary-dark);
}

.compare-tabs__btn.is-active svg {
  color: var(--color-text-inverse);
}

.compare-tabs__btn svg {
  color: currentColor;
  flex-shrink: 0;
}

/* ---------- PROFILE SLIDER (compare-cards) ---------- */
.compare-cards .related-profiles__header {
  margin-bottom: 24px;
}

/* Скрытые фильтром li не должны оставлять пустые колонки */
.compare-cards .related-profiles__list > li[hidden] {
  display: none;
}

/* На десктопе показываем 4 карточки из 6, чтобы уместилось больше без скролла */
@media (min-width: 1200px) {
  .compare-cards .related-profiles__list > li {
    flex: 0 0 calc(25% - 15px);
  }
}

.compare-cards__empty {
  display: none;
  margin: 16px 0 0;
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.compare-cards__empty:not([hidden]) {
  display: block;
}

/* ---------- COMPARISON TABLE ---------- */
.compare-table-section .section__title {
  text-align: left;
}

.compare-table-section .section__subtitle {
  margin-bottom: 24px;
}

.compare-table {
  min-width: 880px;
}

.compare-table th[scope="col"] {
  text-align: left;
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.compare-table__th-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.compare-table__th-spec {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

.compare-table th[scope="row"] {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  white-space: nowrap;
  vertical-align: top;
}

.compare-table td {
  vertical-align: top;
  min-width: 170px;
}

.compare-table__type {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.compare-table__type svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary-dark);
}

.compare-table__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.compare-table__list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 4px;
}

.compare-table__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.compare-table__list li:last-child {
  margin-bottom: 0;
}

.compare-table__docs {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.compare-table__docs svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary-dark);
}

/* ---------- KEY CONCLUSIONS ---------- */
.compare-conclusions__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}

@media (min-width: 600px) {
  .compare-conclusions__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .compare-conclusions__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

.conclusion-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base);
}

.conclusion-card:hover {
  box-shadow: var(--shadow-sm);
}

.conclusion-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.conclusion-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.conclusion-card__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ---------- DOWNLOAD DOCS ---------- */
.compare-docs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}

@media (min-width: 600px) {
  .compare-docs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .compare-docs__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- CTA ---------- */
.compare-cta__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 992px) {
  .compare-cta__panel {
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
  }
}

.compare-cta__decoration {
  position: relative;
  order: -1;
}

@media (min-width: 992px) {
  .compare-cta__decoration {
    order: 0;
  }
}

.compare-cta__decoration svg {
  width: 100%;
  height: auto;
  max-width: 480px;
  margin-inline: auto;
  display: block;
}

/* ============================================
   DETAILS (Узлы и детали) — страница details.html
   Все новые блоки с префиксом .details-*.
   ============================================ */

/* ---------- Section header (общий для новых секций) ---------- */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.section-header__title {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--color-text);
}

/* ---------- HERO ---------- */
.details-hero {
  padding-block: 32px 56px;
}

@media (min-width: 768px) {
  .details-hero { padding-block: 48px 80px; }
}

.details-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 992px) {
  .details-hero__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
  }
}

.details-hero__title {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--color-text);
}

.details-hero__subtitle {
  margin-top: 20px;
  max-width: 540px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.details-hero__search {
  margin-top: 32px;
  max-width: 540px;
}

.details-hero__cta {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.details-search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.details-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.details-search__icon {
  margin-left: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.details-search__input {
  flex: 1;
  min-height: 56px;
  padding: 14px 14px 14px 12px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text);
  font-size: 16px;
  font-family: inherit;
}

.details-search__input::placeholder { color: var(--color-text-light); }

.details-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: 4px;
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.details-search__btn:hover { background: var(--color-primary-hover); }

.details-hero__visual img,
.details-hero__visual svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- SECTION (общая обёртка) ---------- */
.details-section {
  padding-block: 32px;
}

@media (min-width: 768px) {
  .details-section { padding-block: 56px; }
}

.details-section--library {
  padding-top: 16px;
}

/* ---------- ТАБЫ-КАТЕГОРИИ ---------- */
.details-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.details-tabs::-webkit-scrollbar { height: 6px; }
.details-tabs::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }

.details-tab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-height: 64px;
  padding: 16px 24px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-soft);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}

/* Вертикальный разделитель между табами внутри блока.
   Рисуется слева от каждого таба, начиная со второго — на стыке
   padding двух соседей. Активный таб сохраняет свой border-color,
   линия остаётся видимой на границе с активным. */
.details-tab + .details-tab {
  border-left: 1px solid var(--color-border-soft);
}

.details-tab:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.details-tab.is-active {
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  border-color: var(--color-primary-dark);
}

.details-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.details-tab__icon svg {
  width: 24px;
  height: 24px;
}

/* ---------- ДВУХКОЛОНОЧНАЯ СЕТКА (САЙДБАР + РЕЗУЛЬТАТЫ) ---------- */
.details-library {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 992px) {
  .details-library {
    grid-template-columns: 280px 1fr;
    gap: 32px;
  }
}

/* ---------- САЙДБАР С ФИЛЬТРАМИ ---------- */
.details-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* На десктопе сайдбар «прилипает», пока пользователь читает карточки,
   но без обрезки по высоте — контент раскрывается полностью. */
@media (min-width: 992px) {
  .details-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 16px);
    align-self: start;
  }
}

.details-sidebar__card {
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.details-sidebar__title {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.details-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---------- РАСКРЫВАЮЩИЙСЯ БЛОК ДОП. ФИЛЬТРОВ ---------- */
.details-sidebar__more {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Сброс браузерной стилизации <details>/<summary> */
.details-sidebar__more > summary {
  list-style: none;
  cursor: pointer;
}
.details-sidebar__more > summary::-webkit-details-marker { display: none; }
.details-sidebar__more > summary::marker { display: none; content: ''; }

.details-sidebar__more-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-xs);
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}

.details-sidebar__more-summary:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* Focus ring для клавиатурной навигации */
.details-sidebar__more > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.details-sidebar__more-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-base);
}

.details-sidebar__more[open] > .details-sidebar__more-summary .details-sidebar__more-icon {
  transform: rotate(180deg);
  color: var(--color-primary-dark);
}

.details-sidebar__more-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}

.details-sidebar__search {
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.details-sidebar__search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  margin-top: 10px;
  color: var(--color-text-muted);
}

.details-sidebar__search-field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
}

.details-sidebar__search-field input::placeholder { color: var(--color-text-light); }

.details-sidebar__search-field:focus-within {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.details-sidebar__reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.details-sidebar__reset:hover {
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}

/* ---------- ЧЕКБОКСЫ В САЙДБАРЕ ---------- */
.details-checkbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  margin-left: -10px;
  margin-right: -10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-base);
}

.details-checkbox:hover { background: var(--color-surface-soft); }

.details-checkbox__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  color: var(--color-text-soft);
  font-size: 14px;
}

.details-checkbox input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.details-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  flex-shrink: 0;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.details-checkbox__box svg {
  width: 12px; height: 12px;
  color: var(--color-text-inverse);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.details-checkbox input:checked + .details-checkbox__box {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.details-checkbox input:checked + .details-checkbox__box svg { opacity: 1; }

.details-checkbox input:focus-visible + .details-checkbox__box {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.details-checkbox__name {
  line-height: 1.3;
}

.details-checkbox__count {
  font-size: 13px;
  color: var(--color-text-light);
  flex-shrink: 0;
}

.details-checkbox input:checked ~ .details-checkbox__count {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* ---------- РЕЗУЛЬТАТЫ ---------- */
.details-results__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.details-results__title {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-text);
}

.details-results__count {
  font-size: 14px;
  color: var(--color-text-muted);
}

.details-results__count strong {
  color: var(--color-primary-dark);
  font-weight: 700;
}

/* ---------- СЕТКА КАРТОЧЕК УЗЛОВ ---------- */
.details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.details-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.details-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.details-card__fav {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  color: var(--color-text-light);
  cursor: pointer;
  transition: color var(--transition-base), background var(--transition-base);
}

.details-card__fav:hover { color: var(--color-accent-dark); }

.details-card__fav.is-active { color: var(--color-accent-dark); background: var(--color-accent-soft); }

.details-card__drawing {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: var(--color-surface-soft);
  border-radius: var(--radius-sm);
}

.details-card__drawing svg,
.details-card__drawing img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.details-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.details-card__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
}

.details-card__tag {
  font-size: 12px;
  color: var(--color-text-muted);
}

.details-card__formats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.details-card__format {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 10px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-soft);
}

/* ---------- КОМПАКТНАЯ КАРТОЧКА (для популярных) ---------- */
.details-card--compact { padding: 12px; }
.details-card--compact .details-card__body { gap: 6px; }
.details-card--compact .details-card__title { font-size: 13px; }

/* ---------- ДЕТАЛЬНАЯ КАРТОЧКА УЗЛА ---------- */
.details-node__header {
  max-width: 780px;
  margin-bottom: 32px;
}

.details-node__title {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--color-text);
}

.details-node__subtitle {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.details-node__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 992px) {
  .details-node__grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
  }
}

.details-node__drawing {
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.details-node__drawing svg {
  width: 100%;
  height: auto;
  display: block;
}

.details-node__drawing img {
  width: 100%;
  height: auto;
  display: block;
}

.details-node__caption {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.details-node__caption strong {
  color: var(--color-text);
  font-weight: 700;
}

.details-node__meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.details-node__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.details-node__row-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.details-node__formats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.details-node__chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 12px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

.details-node__stages {
  display: inline-flex;
  gap: 8px;
}

.details-node__stage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  color: var(--color-text-soft);
  font-size: 14px;
  font-weight: 600;
}

.details-node__stage--active {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

.details-node__profiles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.details-node__profile {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 12px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-full);
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-base);
}

.details-node__profile:hover { background: var(--color-primary-soft); }

.details-node__application {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-soft);
}

.details-node__downloads {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-soft);
}

.details-node__downloads-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.details-node__download {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.details-node__download:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.details-node__download-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--color-surface);
  border-radius: var(--radius-xs);
  color: var(--color-primary-dark);
}

.details-node__download-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.details-node__download-info strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.details-node__download-info span {
  font-size: 12px;
  color: var(--color-text-muted);
}

.details-node__favorite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-base);
}

.details-node__favorite:hover { background: var(--color-primary-soft); }

/* ---------- «КАК ИСПОЛЬЗОВАТЬ» — ШАГИ ---------- */
.details-howto__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 600px) {
  .details-howto__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .details-howto__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.details-howto__step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.details-howto__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.details-howto__step-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.details-howto__step-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---------- ПОПУЛЯРНЫЕ УЗЛЫ (горизонтальная лента) ---------- */
.details-popular__viewport {
  position: relative;
}

.details-popular__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.details-popular__track > * { scroll-snap-align: start; }

.details-popular__track::-webkit-scrollbar { height: 6px; }
.details-popular__track::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }

@media (min-width: 768px) {
  .details-popular__track {
    grid-auto-columns: minmax(0, calc((100% - 48px) / 4));
  }
}

.details-popular__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-soft);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color var(--transition-base), background var(--transition-base);
  z-index: 2;
}

.details-popular__nav:hover { color: var(--color-primary-dark); background: var(--color-primary-soft); }

.details-popular__nav--next { right: -8px; }

@media (min-width: 768px) {
  .details-popular__nav--next { right: -22px; }
}

/* ---------- CTA «НУЖЕН НЕСТАНДАРТНЫЙ УЗЕЛ?» ---------- */
.details-cta__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  padding: 32px;
  background: linear-gradient(135deg, var(--color-primary-extra-soft), var(--color-surface));
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
}

@media (min-width: 768px) {
  .details-cta__panel { padding: 48px; }
}

@media (min-width: 992px) {
  .details-cta__panel {
    grid-template-columns: 1fr 1.1fr;
    gap: 32px;
    align-items: center;
  }
}

.details-cta__visual svg,
.details-cta__visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

.details-cta__title {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--color-text);
}

.details-cta__text {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.details-cta__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

@media (max-width: 480px) {
  .details-cta__buttons { flex-direction: column; align-items: stretch; }
}

.details-cta__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

@media (min-width: 992px) {
  .details-cta__form { padding: 28px; }
}

.details-cta__form-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}

.details-cta-form-section {
  /* отдельная секция с формой — наследует .details-section отступы сверху */
  padding-block-end: 64px;
}

.details-cta__form--standalone {
  /* зарезервированный модификатор — сейчас без отличий от базы */
}

.details-cta__form-title--standalone {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-block-end: 24px;
}

.details-cta__form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 600px) {
  .details-cta__form-grid { grid-template-columns: 1fr 1fr; }
}

.details-cta__form-full { grid-column: 1 / -1; }

/* ============================================
   PRIVACY POLICY (privacy.html)
   ============================================ */

/* ---------- Footer link --active state ---------- */
.footer__link--active {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* ---------- Hero ---------- */
.privacy-hero {
  padding-block: 48px 56px;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-page) 100%);
}

.privacy-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

.privacy-hero__title {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--color-text);
  max-width: 22ch;
}

.privacy-hero__subtitle {
  margin-top: 20px;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.privacy-hero__content {
  min-width: 0;
}

.privacy-hero__visual {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.privacy-hero__visual svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 992px) {
  .privacy-hero { padding-block: 64px 80px; }
  .privacy-hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
  }
}

/* ---------- Метаданные документа ---------- */
.privacy-meta {
  padding-block: 24px 32px;
}

.privacy-meta__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.privacy-meta__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base);
}

.privacy-meta__card:hover { box-shadow: var(--shadow-sm); }

.privacy-meta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.privacy-meta__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.privacy-meta__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.privacy-meta__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

@media (min-width: 600px) {
  .privacy-meta__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .privacy-meta {
    padding-block: 32px 48px;
  }
  .privacy-meta__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

/* ---------- Документ: общая раскладка ---------- */
.privacy-doc {
  padding-block: 32px 64px;
}

.privacy-doc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 992px) {
  .privacy-doc__grid {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .privacy-doc__grid {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 48px;
  }
}

/* ---------- Sidebar ---------- */
.privacy-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.privacy-sidebar__card {
  padding: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.privacy-sidebar__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- TOC ---------- */
.privacy-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: section;
  list-style: none;
  margin: 0;
  padding: 0;
}

.privacy-toc__item {
  counter-increment: section;
}

.privacy-toc__link {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-soft);
  border-radius: var(--radius-xs);
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.privacy-toc__link::before {
  content: counter(section);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: center;
  padding-top: 1px;
}

.privacy-toc__link:hover {
  background: var(--color-primary-extra-soft);
  color: var(--color-primary-dark);
}

.privacy-toc__item:first-child .privacy-toc__link {
  background: var(--color-primary-extra-soft);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.privacy-toc__item:first-child .privacy-toc__link::before {
  color: var(--color-primary-dark);
}

/* ---------- Скачивание PDF ---------- */
.privacy-download-card {
  background: linear-gradient(135deg, var(--color-primary-extra-soft), var(--color-surface));
  border-color: var(--color-primary-soft);
}

.privacy-download-card .privacy-sidebar__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.privacy-download-card .privacy-sidebar__title::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D7F6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>") center / contain no-repeat;
}

.privacy-download-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.privacy-download-card__meta > div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-muted);
}

.privacy-download-card__meta dt {
  margin: 0;
  color: var(--color-text-light);
}

.privacy-download-card__meta dd {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}

.privacy-download-card__btn {
  width: 100%;
  justify-content: center;
}

/* ---------- Основной контент: секции ---------- */
.privacy-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.privacy-section {
  scroll-margin-top: calc(var(--header-height) + 32px);
  padding: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base);
}

.privacy-section:hover { box-shadow: var(--shadow-sm); }

.privacy-section__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-soft);
}

.privacy-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: 15px;
  font-weight: 700;
}

.privacy-section__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.privacy-section__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-soft);
}

.privacy-section__body > * + * { margin-top: 14px; }

.privacy-section__body p { margin: 0; }

.privacy-section__body address {
  font-style: normal;
  color: inherit;
}

@media (min-width: 768px) {
  .privacy-section { padding: 32px 36px; }
  .privacy-section__title { font-size: 22px; }
}

/* ---------- Сетка 3 мини-карточки «Какие данные» ---------- */
.privacy-data-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.privacy-data-card {
  padding: 22px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.privacy-data-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary-dark);
}

.privacy-data-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
}

.privacy-data-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.privacy-data-card__list li {
  position: relative;
  padding-left: 16px;
}

.privacy-data-card__list li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}

@media (min-width: 768px) {
  .privacy-data-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

/* ---------- Чек-лист ---------- */
.privacy-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.privacy-check-list li {
  position: relative;
  padding-left: 32px;
}

.privacy-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D7F6B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 14px 14px no-repeat;
}

/* ---------- Маркированный список ---------- */
.privacy-bullet-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.privacy-bullet-list li::marker { color: var(--color-primary); }

/* ---------- Права внутри секции (инлайн 5 мини-карточек) ---------- */
.privacy-rights-inline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.privacy-rights-inline__card {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-soft);
}

.privacy-rights-inline__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.privacy-rights-inline__title {
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .privacy-rights-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .privacy-rights-inline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .privacy-rights-inline__card {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* ---------- Контакты в секции ---------- */
.privacy-contact-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.privacy-contact-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.privacy-contact-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary-dark);
}

.privacy-contact-list li a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.privacy-contact-list li a:hover { color: var(--color-primary-hover); }

/* ---------- Секция «Ваши права» ---------- */
.privacy-rights-section {
  padding-block: 64px;
  background: var(--color-surface-soft);
  border-block: 1px solid var(--color-border-soft);
}

.section-header { margin-bottom: 32px; }

.section-header__title {
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.section-header__text {
  margin-top: 10px;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.privacy-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.privacy-rights-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  color: inherit;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.privacy-rights-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.privacy-rights-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.privacy-rights-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.privacy-rights-card__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.privacy-rights-card__arrow {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 18px;
  line-height: 1;
  color: var(--color-primary-dark);
  font-weight: 700;
  transition: transform var(--transition-base);
}

.privacy-rights-card:hover .privacy-rights-card__arrow {
  transform: translateX(3px);
}

@media (min-width: 600px) {
  .privacy-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .privacy-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .privacy-cards-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- Секция «Файлы cookies» ---------- */
.privacy-cookies-section {
  padding-block: 64px;
  background: var(--color-page);
}

.privacy-cookies-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.privacy-cookie-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.privacy-cookie-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.privacy-cookie-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.privacy-cookie-card__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.privacy-cookie-card__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  align-self: flex-start;
}

.privacy-cookie-card__status--always {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.privacy-cookie-card__status--always::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
}

/* ---------- Toggle (CSS-only) ---------- */
.privacy-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.privacy-toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.privacy-toggle__slider {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: background var(--transition-base);
}

.privacy-toggle__slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition-base);
}

.privacy-toggle__input:checked + .privacy-toggle__slider {
  background: var(--color-primary-dark);
}

.privacy-toggle__input:checked + .privacy-toggle__slider::before {
  transform: translateX(18px);
}

.privacy-toggle__input:focus-visible + .privacy-toggle__slider {
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.privacy-toggle__label {
  color: var(--color-text-muted);
}

@media (min-width: 600px) {
  .privacy-cookies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .privacy-cookies-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Privacy layout containers ---------- */
.privacy-rights-section .container,
.privacy-cookies-section .container { padding-inline: 24px; }

@media (max-width: 991px) {
  .privacy-sidebar {
    position: static;
  }
}

/* ============================================
   COOKIES POLICY (cookies.html)
   Структурно повторяет privacy-страницу,
   переиспользует те же .privacy-* блоки.
   Локальные дополнения — только для таблицы.
   ============================================ */

/* ---------- Класс ячейки таблицы в секции 2: иконка + название + подпись ---------- */
.cookie-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.cookie-cell svg {
  flex-shrink: 0;
  color: var(--color-primary-dark);
}

.cookie-cell__tag {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ---------- Жирный текст внутри секции политики ---------- */
.privacy-section__body strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ---------- Таблица внутри .privacy-section: убираем верхний/нижний бордер у первой и последней строки ---------- */
.privacy-section .table-wrap {
  margin-top: 4px;
}

.privacy-section .table th[scope="row"] {
  background: var(--color-surface);
  font-weight: 600;
  color: var(--color-text);
}

/* ============================================
   ENGINEERS PAGE (Проектировщикам)
   ============================================ */

/* ---------- Engineers hero ---------- */
.engineers-hero {
  padding-block: var(--section-padding);
  background: var(--color-surface);
}

.engineers-hero__inner {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 992px) {
  .engineers-hero__inner {
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
  }
}

.engineers-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.engineers-hero__subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 560px;
}

.engineers-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .engineers-hero__cta .btn {
    width: 100%;
  }
}

.engineers-hero__visual {
  display: none;
}

@media (min-width: 992px) {
  .engineers-hero__visual {
    display: block;
  }
}

.engineers-hero__visual svg {
  width: 100%;
  height: auto;
}

/* На узких экранах "Проектировщикам" не помещается при базовых 40px —
   понижаем размер H1 в hero, чтобы слово помещалось в контейнер */
@media (max-width: 480px) {
  .engineers-hero .h1 {
    font-size: 32px;
    letter-spacing: -0.03em;
  }
}

/* ---------- Quick-access: 6 cards variant ---------- */
.quick-access__grid--6 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 600px) {
  .quick-access__grid--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .quick-access__grid--6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ---------- Engineers: sidebar + content grid ---------- */
/* Свой класс (а не .docs-grid) — последний .docs-grid в pages.css
   переопределён на repeat(4,1fr), ломает 280+1fr. */
.engineers-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 992px) {
  .engineers-grid {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}

/* ---------- Engineers: popular materials grid ---------- */
.engineers-popular__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .engineers-popular__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .engineers-popular__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Help cards (vertical) ---------- */
.help-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .help-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 992px) {
  .help-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.help-card {
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.snabzhencam-help .help-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border-soft);
}

.help-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.help-card__icon svg {
  width: 24px;
  height: 24px;
}

.help-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.help-card__text {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ---------- Engineers profiles: mini-profile slider override ---------- */
.engineers-profiles .mini-profile-card {
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.engineers-profiles .mini-profile-card__drawing svg,
.engineers-profiles .mini-profile-card__drawing img {
  height: 56px;
}

/* ---------- Engineers FAQ + form layout ---------- */
.engineers-faq-form {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .engineers-faq-form {
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: start;
  }
}

.engineers-faq-form__form {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .engineers-faq-form__form {
    padding: 32px;
  }
}

.engineers-faq-form__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 16px;
}

.engineers-faq__sub {
  margin-top: 8px;
}

.engineers-faq__accordion {
  margin-top: 24px;
}

/* ============================================
   PARTNERS PAGE (Партнёрам)
   ============================================ */

@media (min-width: 768px) {
  .cta-panel__image--part {
    width: calc(100% + 32px);
    margin-right: -32px;
  }
}

.partners-formats .section-header__sub {
  margin-top: 4px;
}

.partners-formats .snabzhencam-grid {
  margin-top: 16px;
}

.partners-formats .docs-content {
  gap: 24px;
}

.partners-formats .docs-content__title {
  margin-bottom: 8px;
}

.partners-popular .docs-content__title {
  margin-bottom: 0;
}

.partners-popular .section-header__sub {
  margin-top: -4px;
}

.partners-how-start .section__subtitle,
.partners-faq .section__subtitle {
  margin-top: 16px;
}

.partners-how-start .step-grid {
  margin-top: 24px;
}

/* ============================================
   SNABSCHIKAM PAGE (Снабженцам)
   ============================================ */

/* ---------- Snabschikam hero ---------- */
.snabzhencam-hero {
  padding-block: var(--section-padding);
  background: var(--color-surface);
}

.snabzhencam-hero__inner {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 992px) {
  .snabzhencam-hero__inner {
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
  }
}

.snabzhencam-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.snabzhencam-hero__subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 560px;
}

.snabzhencam-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .snabzhencam-hero__cta .btn {
    width: 100%;
  }
}

.snabzhencam-hero__visual {
  display: none;
}

@media (min-width: 992px) {
  .snabzhencam-hero__visual {
    display: block;
  }
}

.snabzhencam-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
}

.snabzhencam-hero__visual svg {
  display: none;
}

@media (max-width: 480px) {
  .snabzhencam-hero .h1 {
    font-size: 36px;
    letter-spacing: -0.03em;
  }
}

/* ---------- Quick-access: 5 cards variant ---------- */
.quick-access__grid--5 {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .quick-access__grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .quick-access__grid--5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ---------- Snabschikam: sidebar + content grid ----------
   Параллельно engineers-grid (260px sidebar + 1fr content) */
.snabzhencam-grid {
  display: grid;
  gap: 24px;
  /* На мобиле без явных колонок grid-template-columns = none →
     auto-sized треки могут раздуть ширину из-за длинного
     содержимого сайдбара. Явно задаём одну колонку. */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
  .snabzhencam-grid {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}

/* В блоке профилей карточки идут перед боковой панелью,
   поэтому широкая колонка должна оставаться слева. */
@media (min-width: 992px) {
  .certificates-by-profiles > .container > .snabzhencam-grid {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
}


/* ---------- Snabschikam: popular materials grid ---------- */
.snabzhencam-popular__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
  .snabzhencam-popular__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .snabzhencam-popular__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.snabzhencam-popular__grid .document-card__content {
  overflow-wrap: anywhere;
}

.snabzhencam-popular__grid .document-card__download {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

/* ---------- Sidebar checklist variant ---------- */
.docs-sidebar__list--check li {
  cursor: default;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.4;
}

.docs-sidebar__list--check li:hover {
  background: transparent;
}

.docs-sidebar__icon--check {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- Sidebar formats list (PDF / DWG / BIM / XLSX) ---------- */
.docs-sidebar__formats {
  display: grid;
  gap: 12px;
}

.docs-sidebar__formats li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.4;
}

.docs-sidebar__format-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.docs-sidebar__format-badge--pdf {
  background: #faeaea;
  color: #c95c5c;
}

.docs-sidebar__format-badge--dwg {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.docs-sidebar__format-badge--bim {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.docs-sidebar__format-badge--xlsx {
  background: var(--color-success-soft);
  color: var(--color-success);
}

/* ---------- Snabschikam profiles: mini-profile slider override ---------- */
/* Сбрасываем grid + gap у .docs-content внутри snabzhencam-profiles —
   иначе профиль-слайдер с header + list получает лишние 48px между ними */
.snabzhencam-profiles .docs-content {
  display: block;
  gap: 0;
}

.snabzhencam-profiles .mini-profile-card {
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.snabzhencam-profiles .mini-profile-card__drawing svg,
.snabzhencam-profiles .mini-profile-card__drawing img {
  height: 112px;
}

/* ---------- Step grid (Как проходит работа) ---------- */
.step-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 40px;
}

@media (min-width: 600px) {
  .step-grid {
    grid-template-columns: 1fr 24px 1fr;
    gap: 16px 24px;
  }
}

@media (min-width: 992px) {
  .step-grid {
    grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr;
    gap: 20px;
    align-items: stretch;
  }
}

.step-card {
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.step-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.step-card__num {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary-dark);
  letter-spacing: 0.04em;
}

.step-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-card__icon svg {
  width: 22px;
  height: 22px;
}

.step-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.step-card__text {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.step-card__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  align-self: center;
}

.step-card__arrow svg {
  width: 24px;
  height: 24px;
}

@media (min-width: 992px) {
  .step-card__arrow {
    display: flex;
  }
}

@media (min-width: 600px) and (max-width: 991px) {
  /* на планшете — стрелки между парами */
  .step-grid > .step-card__arrow:nth-of-type(2),
  .step-grid > .step-card__arrow:nth-of-type(4) {
    display: flex;
  }
}

/* ---------- Snabschikam form: form + sidebar ---------- */
/* A sidebar leaves too little room for four cards at tablet landscape widths. */
@media (min-width: 992px) and (max-width: 1199px) {
  .docs-content .help-grid,
  .docs-content .step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .docs-content .step-grid > .step-card__arrow {
    display: none;
  }
}

.snabzhencam-form {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .snabzhencam-form {
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    align-items: start;
  }
}

.snabzhencam-form__form {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .snabzhencam-form__form {
    padding: 40px;
  }
}

.snabzhencam-form__form .h2 {
  margin-bottom: 8px;
  font-size: clamp(22px, 3vw, 28px);
}

.snabzhencam-form__intro {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 640px;
}

.snabzhencam-form__sidebar {
  display: grid;
  gap: 20px;
}

/* ---------- Snabschikam FAQ ---------- */
.snabzhencam-faq__sub {
  margin-top: 8px;
}

.snabzhencam-faq__accordion {
  margin-top: 32px;
  max-width: 880px;
}

/* ============================================
   KATALOGI PAGE (katalogi.html — каталоги и буклеты)
   ============================================ */

/* --- Hero --- */
.katalogi-hero {
  padding-block: var(--section-padding-sm) var(--section-padding);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
  overflow: hidden;
}

@media (min-width: 768px) {
  .katalogi-hero {
    padding-block: var(--section-padding);
  }
}

.katalogi-hero__inner {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 992px) {
  .katalogi-hero__inner {
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
  }
}

.katalogi-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.katalogi-hero__title {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.katalogi-hero__subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 560px;
}

.katalogi-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .katalogi-hero__cta .btn {
    width: 100%;
  }
}

.katalogi-hero__visual {
  display: none;
}

@media (min-width: 992px) {
  .katalogi-hero__visual {
    display: block;
  }
}

.katalogi-hero__visual img {
  width: 100%;
  height: auto;
  max-width: 520px;
  margin-inline: auto;
  display: block;
  border-radius: var(--radius-md);
}

/* --- Toolbar (tabs + search) --- */
.katalogi-toolbar-section {
  padding-block: 32px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
}

.katalogi-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.katalogi-toolbar__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  min-width: 0;
}

.katalogi-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.katalogi-tab:hover {
  color: var(--color-text);
}

.katalogi-tab.is-active {
  color: var(--color-text-inverse);
  background: var(--color-primary-dark);
}

.katalogi-toolbar__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  min-width: 0;
  max-width: 360px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.katalogi-toolbar__search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.katalogi-toolbar__input {
  flex: 1;
  height: 46px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text);
  min-width: 0;
}

.katalogi-toolbar__input::placeholder {
  color: var(--color-text-light);
}

.katalogi-toolbar__btn {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.katalogi-toolbar__btn svg {
  width: 18px;
  height: 18px;
}

.katalogi-toolbar__btn:hover {
  background: var(--color-primary-hover);
}

/* --- Section spacing (внутренние секции страницы) --- */
.katalogi-section {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .katalogi-section {
    padding-block: var(--section-padding);
  }
}

.katalogi-content__title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

/* --- Grid: content + sidebar (1fr + 260px) ---
   В отличие от snabzhencam-grid / engineers-grid, на katalogi
   контент слева (1fr), сайдбар справа (260px) — порядок
   совпадает с вёрсткой в HTML. */
.katalogi-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 992px) {
  .katalogi-grid {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 40px;
  }
}

.katalogi-grid__content {
  min-width: 0;
}

.katalogi-grid__empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: 15px;
  margin: 0;
}

/* --- Featured catalog (большая карточка в верхней секции) --- */
.katalogi-grid--featured {
  align-items: start;
}

.katalogi-featured-list {
  display: block;
  min-width: 0;
}

.katalogi-featured {
  position: relative;
  min-width: 0;
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.katalogi-featured:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.katalogi-featured__heading {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

.katalogi-featured__marker {
  color: var(--color-primary-dark);
  font-size: 30px;
  line-height: 1;
}

.katalogi-featured__heading-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.katalogi-featured__inner {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 768px) {
  .katalogi-featured__inner {
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
    gap: 40px;
  }
}

.katalogi-featured__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
}

.katalogi-featured__cover svg {
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: block;
}

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

@media (min-width: 992px) {
  .katalogi-featured {
    padding: 40px;
  }

  .katalogi-featured__inner {
    gap: 48px;
  }
}

.katalogi-featured__top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.katalogi-featured__date {
  font-size: 15px;
  color: var(--color-text-muted);
}

.katalogi-featured__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

.katalogi-featured__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.katalogi-featured__list {
  margin-top: 4px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.katalogi-featured__list-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px;
}

.katalogi-featured__list ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.katalogi-featured__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.katalogi-featured__list li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1px solid var(--color-primary-dark);
  border-radius: var(--radius-full);
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 700;
}

.katalogi-featured__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 8px;
}

@media (min-width: 600px) {
  .katalogi-featured__actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.katalogi-featured__actions .btn {
  width: 100%;
}

@media (max-width: 767px) {
  .katalogi-featured {
    padding: 24px;
  }

  .katalogi-featured__heading {
    gap: 16px;
    margin-bottom: 24px;
  }

  .katalogi-featured__marker {
    font-size: 26px;
  }
}


.katalogi-featured__sidebar {
  /* переиспользуем .docs-sidebar — без дополнительных правил */
}

/* --- Catalog cards grid (1 → 2 → 4 колонки) --- */
.katalogi-cards-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  min-width: 0;
}

.katalogi-cards-grid > li {
  min-width: 0;
}

@media (min-width: 600px) {
  .katalogi-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .katalogi-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Catalog card (cover + title + desc + meta + download) --- */
.katalogi-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  height: 100%;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.katalogi-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.katalogi-card__cover {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-muted);
}

.katalogi-card__cover svg {
  display: block;
  width: 100%;
  height: auto;
}

.katalogi-card__cover--catalog {
  aspect-ratio: 200 / 140;
  background: var(--color-surface-soft);
}

.katalogi-card__cover--catalog img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.katalogi-card__cover--catalog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 52, 71, 0.04), rgba(36, 52, 71, 0.2));
  pointer-events: none;
}

.katalogi-card__cover--catalog .katalogi-card__badge {
  z-index: 1;
}

.katalogi-card__cover--sheet {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--color-text);
  background: var(--color-primary-extra-soft);
  border: 1px solid var(--color-primary);
}

.katalogi-card__cover--sheet::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--color-primary-dark);
}

.katalogi-card__sheet-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.katalogi-card__cover--sheet strong {
  font-size: 21px;
  line-height: 1.2;
}

.katalogi-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-inverse);
  background: #c95c5c;
  letter-spacing: 0.02em;
}

.katalogi-card__badge--pptx {
  background: #a88232;
}

.katalogi-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

.katalogi-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  flex: 1;
  margin: 0;
}

.katalogi-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-light);
  padding-top: 10px;
  border-top: 1px solid var(--color-border-soft);
}

.katalogi-card__meta span {
  position: relative;
}

.katalogi-card__meta span:not(:last-child)::after {
  content: "·";
  margin-left: 8px;
  color: var(--color-border-strong);
}

.katalogi-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-surface);
  align-self: flex-start;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.katalogi-card__link:hover {
  background: var(--color-primary-soft);
}

/* --- Audience grid (4 карточки) --- */
.katalogi-audience .section__header {
  margin-bottom: 32px;
}

.katalogi-audience .section__subtitle {
  margin-top: 8px;
}

.katalogi-audience__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .katalogi-audience__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .katalogi-audience__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Счётчик количества материалов внутри .audience-card */
.audience-card__count {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border-radius: var(--radius-full);
  align-self: flex-start;
}

/* На очень узких экранах скрываем бейдж-счётчик, чтобы освободить
   место для body и не ломать горизонтальный flex-ряд */
@media (max-width: 480px) {
  .audience-card__count {
    display: none;
  }
}

/* --- Materials by profile (katalogi-profile-card) --- */
.katalogi-profiles {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .katalogi-profiles {
    padding-block: var(--section-padding);
  }
}

.katalogi-profiles__nav {
  display: none;
}

.katalogi-profile-list {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  min-width: 0;
}

@media (min-width: 600px) {
  .katalogi-profile-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .katalogi-profile-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .katalogi-profile-list {
    grid-template-columns: repeat(6, 1fr);
  }
}

.katalogi-profile-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  height: 100%;
  text-decoration: none;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.katalogi-profile-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.katalogi-profile-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
}

.katalogi-profile-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  flex-shrink: 0;
}

.katalogi-profile-card__drawing {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.katalogi-profile-card__drawing svg {
  width: 100%;
  height: 28px;
}

.katalogi-profile-card__arrow {
  color: var(--color-text-light);
  flex-shrink: 0;
  transition: color var(--transition-base), transform var(--transition-base);
}

.katalogi-profile-card:hover .katalogi-profile-card__arrow {
  color: var(--color-primary-dark);
  transform: translateX(2px);
}

.katalogi-profile-card__types {
  font-size: 12px;
  color: var(--color-text-muted);
}

.katalogi-profile-card__count {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border-radius: var(--radius-full);
}

/* --- Features (4 → 2 → 1) --- */
.katalogi-feature-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .katalogi-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .katalogi-feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.katalogi-feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  height: 100%;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.katalogi-feature:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.katalogi-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.katalogi-feature__icon svg {
  width: 24px;
  height: 24px;
}

.katalogi-feature__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

.katalogi-feature__text {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* --- Recent updates (katalogi-update) --- */
.katalogi-updates {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .katalogi-updates {
    padding-block: var(--section-padding);
  }
}

.katalogi-updates__list {
  display: grid;
  gap: 16px;
}

@media (min-width: 992px) {
  .katalogi-updates__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.katalogi-update {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  height: 100%;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.katalogi-update:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.katalogi-update__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.katalogi-update__media svg {
  display: block;
  width: 100%;
  height: auto;
}

.katalogi-update__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.katalogi-update__top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.katalogi-update__badge {
  /* переиспользуем .badge */
}

.katalogi-update__date {
  font-size: 13px;
  color: var(--color-text-light);
}

.katalogi-update__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

.katalogi-update__desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.katalogi-update__links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-soft);
}

.katalogi-update__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
  transition: color var(--transition-base);
}

.katalogi-update__link:hover {
  color: var(--color-primary-hover);
}

/* ============================================
   DELIVERY / ДОСТАВКА И ЛОГИСТИКА
   Стили страницы delivery.html.
   Переиспользуем .snabzhencam-grid, .docs-sidebar,
   .help-card, .quick-card, .step-card, .audience-card,
   .accordion, .cta-panel, .footer из канона.

   Новые блоки — только специфичные для тематики:
   .delivery-hero (паттерн .snabzhencam-hero с иной визуальной частью),
   .delivery-options (модификатор .help-card в 4 колонки внутри docs-content),
   .delivery-help-grid (модификатор help-card в 2 колонки внутри docs-content),
   .delivery-data-table (таблица с двухуровневыми ячейками label/hint),
   .delivery-faq (модификатор .accordion для секции FAQ),
   .delivery-contacts + .delivery-contact-card (карточки контактов).
   ============================================ */

/* ---------- Delivery hero ---------- */
.delivery-hero {
  padding-block: var(--section-padding);
  background: var(--color-surface);
}

.delivery-hero__inner {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 992px) {
  .delivery-hero__inner {
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
  }
}

.delivery-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.delivery-hero__subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 560px;
}

.delivery-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .delivery-hero__cta .btn {
    width: 100%;
  }
}

.delivery-hero__visual {
  display: none;
}

@media (min-width: 992px) {
  .delivery-hero__visual {
    display: block;
  }
}

.delivery-hero__visual img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 480px) {
  .delivery-hero .h1 {
    font-size: 36px;
    letter-spacing: -0.03em;
  }
}

/* ---------- Quick-access: 4 cards variant (для delivery) ---------- */
.quick-access__grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .quick-access__grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .quick-access__grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Delivery options (4 help-card внутри docs-content) ---------- */
.delivery-options {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .delivery-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Delivery help-grid (4 help-card — 2 колонки внутри docs-content) ---------- */
.delivery-help-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .delivery-help-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Delivery data table: двухуровневые ячейки (label + hint) ---------- */
.delivery-data-table {
  margin-top: 8px;
  min-width: 0;
}

.delivery-table__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.delivery-table__hint {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-light);
  font-style: italic;
}

/* Узкие таблицы на мобиле — горизонтальный скролл через .table-wrap.
   Здесь только усиливаем заголовок и прибираем дефолтные отступы ячеек
   для двухуровневого контента. */
.delivery-data-table .table th {
  font-size: 12px;
}

.delivery-data-table .table td {
  vertical-align: top;
  padding-block: 20px;
}

/* ---------- Delivery FAQ (модификатор аккордеона) ---------- */
.delivery-faq {
  max-width: 880px;
  margin-inline: auto;
}

.delivery-faq__sub {
  text-align: center;
  margin-bottom: 32px;
}

.delivery-faq__accordion {
  margin-top: 16px;
}

/* ---------- Delivery contacts ---------- */
.delivery-contacts {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .delivery-contacts {
    grid-template-columns: repeat(2, 1fr);
  }
}

.delivery-contact-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.delivery-contact-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.delivery-contact-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.delivery-contact-card__icon svg {
  width: 24px;
  height: 24px;
}

.delivery-contact-card__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.delivery-contact-card__value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

a.delivery-contact-card__value:hover {
  color: var(--color-primary-dark);
}

.delivery-contact-card__hint {
  display: block;
  font-size: 13px;
  color: var(--color-text-light);
  margin-top: 4px;
}

/* ---------- Delivery content rhythm ---------- */
.delivery-content {
  display: block;
}

.delivery-content .docs-content__title {
  margin-bottom: 16px;
}

.delivery-content .docs-content__sub {
  margin: 0;
}

.delivery-content > .delivery-options,
.delivery-content > .delivery-help-grid,
.delivery-content > .delivery-data-table,
.delivery-content > .delivery-contacts {
  margin-top: 32px;
}

/* ---------- Дополнения к общим компонентам под delivery ---------- */

/* docs-content__sub — подпись под заголовком таблицы/секции */
.docs-content__sub {
  margin: -8px 0 20px;
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* docs-sidebar__meta — короткая подпись под пунктом в sidebar-списке */
.docs-sidebar__meta {
  display: block;
  font-size: 13px;
  color: var(--color-text-light);
  margin-top: 2px;
}

/* docs-sidebar__text — текстовый блок внутри docs-sidebar__card */
.docs-sidebar__text {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ---------- Payment FAQ rhythm ---------- */
.payment-faq .section__header {
  margin-bottom: 24px;
}

/* ---------- Payment content rhythm ---------- */
.payment-content {
  gap: 0;
}

.payment-content .docs-content__title {
  margin-bottom: 0;
}

.payment-content .section__header + .docs-content__sub,
.payment-content > .docs-content__title + .docs-content__sub {
  margin: 8px 0 0;
}

.payment-content .docs-content__sub + .delivery-help-grid,
.payment-content .docs-content__sub + .step-grid,
.payment-content .docs-content__sub + .delivery-options {
  margin-top: 24px;
}

/* ---------- Payment process ---------- */
.payment-process .step-grid {
  margin-top: 24px;
}

/* ---------- Payment requisites sidebar ---------- */
.payment-requisites__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.payment-requisites__item {
  min-width: 0;
}

.payment-requisites__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 4px;
  border-radius: var(--radius-xs);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.35;
  transition: background var(--transition-base), color var(--transition-base);
}

.payment-requisites__link:hover {
  background: var(--color-primary-extra-soft);
  color: var(--color-primary-dark);
}

.payment-requisites__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.payment-requisites__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--color-primary-dark);
}

.payment-requisites .btn {
  min-height: 44px;
}

.payment-audience .docs-sidebar__card {
  display: grid;
  gap: 8px;
}

.payment-audience .docs-sidebar__title {
  margin-bottom: 8px;
}

.payment-audience .audience-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 12px;
  border-radius: var(--radius-sm);
}

.payment-audience .audience-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
}

.payment-audience .audience-card__icon svg {
  width: 20px;
  height: 20px;
}

.payment-audience .audience-card__body {
  gap: 4px;
}

.payment-audience .audience-card__title {
  font-size: 14px;
}

.payment-audience .audience-card__text {
  font-size: 12px;
  line-height: 1.4;
}

.payment-audience .audience-card__arrow {
  margin-top: 0;
}

.payment-audience .audience-card__arrow svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 768px) {
  .payment-audience .audience-card {
    gap: 12px;
    padding: 12px;
  }
}


/* ---------- Payment hero ---------- */
.payment-hero {
  padding-block: var(--section-padding);
  background: var(--color-surface);
}

.payment-hero__inner {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 992px) {
  .payment-hero__inner {
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
  }
}

.payment-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.payment-hero__subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 560px;
}

.payment-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .payment-hero__cta .btn {
    width: 100%;
  }
}

.payment-hero__visual {
  display: none;
}

@media (min-width: 992px) {
  .payment-hero__visual {
    display: block;
  }
}

.payment-hero__visual svg {
  width: 100%;
  height: auto;
}

@media (max-width: 480px) {
  .payment-hero .h1 {
    font-size: 36px;
    letter-spacing: -0.03em;
  }
}

/* ---------- Payment factors section rhythm ---------- */
.payment-factors-section .section__header {
  margin-bottom: 32px;
}

.payment-factors-section .section__subtitle {
  margin-top: 16px;
}

.payment-factors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 600px) {
  .payment-factors {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .payment-factors {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .payment-factors {
    grid-template-columns: repeat(5, 1fr);
  }
}

.payment-factor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  height: 100%;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.payment-factor:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.payment-factor__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.payment-factor__icon svg {
  width: 22px;
  height: 22px;
}

.payment-factor__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

.payment-factor__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------- Payment popular profiles (плашки в сайдбаре) ---------- */
.payment-popular-profiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.payment-popular-profiles__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}

.payment-popular-profiles__item:hover {
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
  background: var(--color-primary-extra-soft);
}

.payment-popular-profiles__item--accent {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
}

.payment-popular-profiles__item--accent:hover {
  background: var(--color-primary-extra-soft);
}

/* ============================================
   CERTIFICATES PAGE (certificates.html)
   ============================================ */

.certificates-hero {
  padding-block: var(--section-padding-sm) var(--section-padding);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
}

@media (min-width: 768px) {
  .certificates-hero {
    padding-block: var(--section-padding);
  }
}

.certificates-hero__inner {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 992px) {
  .certificates-hero__inner {
    grid-template-columns: 1.3fr 1fr;
    gap: 64px;
  }
}

.certificates-hero__title {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 20px;
}

.certificates-hero__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 32px;
  max-width: 560px;
}

.certificates-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .certificates-hero__cta .btn {
    width: 100%;
  }
}

.certificates-hero__visual {
  display: none;
}

@media (min-width: 992px) {
  .certificates-hero__visual {
    display: block;
  }
}

.certificates-hero__visual img {
  width: 100%;
  height: auto;
  max-width: 480px;
  margin-inline: auto;
  display: block;
}

/* ---------- Stats (4 blocks) ---------- */
.certificates-stats {
  padding-block: var(--section-padding);
  background: var(--color-surface);
}

.certificates-stats__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .certificates-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 992px) {
  .certificates-stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.certificates-stats__grid > li {
  display: flex;
}

.certificates-stat-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.certificates-stat-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.certificates-stat-card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.certificates-stat-card__icon svg {
  width: 22px;
  height: 22px;
}

.certificates-stat-card__value {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 8px;
}

.certificates-stat-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.certificates-stat-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ---------- Toolbar: search + tabs ---------- */
.certificates-toolbar {
  background: var(--color-surface);
}

.certificates-toolbar .docs-search {
  max-width: none;
  margin-bottom: 24px;
}

.certificates-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: var(--color-surface-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
}

.certificates-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--transition-base),
    color var(--transition-base);
  font-family: inherit;
}

.certificates-tab svg {
  width: 18px;
  height: 18px;
}

.certificates-tab:hover {
  color: var(--color-text);
}

.certificates-tab.is-active {
  color: var(--color-text-inverse);
  background: var(--color-primary-dark);
}

.certificates-filters__select {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-base);
}

.certificates-filters__select:hover {
  border-color: var(--color-primary);
}

.certificates-filters__input {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  padding: 4px 24px 4px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  font-family: inherit;
  cursor: pointer;
}

.certificates-filters__caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 8px;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* ---------- Section header (заголовок + ссылка справа) ---------- */
.certificates-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.certificates-section-header .docs-content__title {
  margin-bottom: 0;
}

/* ---------- Certificates section ---------- */
.certificates-section {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .certificates-section {
    padding-block: var(--section-padding);
  }
}

/* ---------- Certificates docs grid (3 col) ---------- */
.certificates-docs-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .certificates-docs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .certificates-docs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.certificates-docs-grid > li {
  display: flex;
}

.certificates-docs-grid > li[hidden] {
  display: none;
}

.certificates-docs-grid .doc-card {
  width: 100%;
}

.certificates-docs-grid .doc-card__top {
  flex-wrap: wrap;
}

.certificates-docs-grid .doc-card__title {
  flex-basis: 10rem;
  overflow-wrap: anywhere;
}

/* Вторичная сетка (3 карточки) — отступ сверху от основной сетки */
.certificates-secondary-grid {
  margin-top: 56px;
}

@media (min-width: 992px) {
  .certificates-secondary-grid {
    margin-top: 64px;
  }
}

.certificates-docs-grid--secondary {
  grid-template-columns: 1fr;
  margin-top: 0;
}

@media (min-width: 600px) {
  .certificates-docs-grid--secondary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .certificates-docs-grid--secondary {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Awards (4 medal cards) ---------- */
.certificates-awards {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .certificates-awards {
    padding-block: var(--section-padding);
  }
}

.certificates-awards__list {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .certificates-awards__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .certificates-awards__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.certificates-awards__list > li {
  display: flex;
}

.certificates-award-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.certificates-award-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.certificates-award-card__medal {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.certificates-award-card__medal svg {
  width: 100%;
  height: auto;
  display: block;
}

.certificates-award-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.certificates-award-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

.certificates-award-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.certificates-award-card__date {
  font-size: 12px;
  color: var(--color-text-light);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-soft);
}

/* ---------- Profiles (5 mini-cards) ---------- */
.certificates-by-profiles {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .certificates-by-profiles {
    padding-block: var(--section-padding);
  }
}

.certificates-profiles__list {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .certificates-profiles__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .certificates-profiles__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .certificates-profiles__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.certificates-profiles__list > li {
  display: flex;
  min-width: 0;
}

.certificates-profiles__list .docs-profile-card {
  width: 100%;
  min-width: 0;
}

.certificates-profiles__list .docs-profile-card__meta span {
  white-space: normal;
}

/* ---------- Confirms help-grid (4 help-card) ---------- */
.certificates-confirms {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .certificates-confirms {
    padding-block: var(--section-padding);
  }
}

.certificates-help-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .certificates-help-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .certificates-help-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.certificates-help-grid > li,
.certificates-help-grid .help-card {
  height: 100%;
}

/* ---------- Updates (3 update-card) ---------- */
.certificates-updates {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .certificates-updates {
    padding-block: var(--section-padding);
  }
}

.certificates-updates .updates-list {
  gap: 16px;
}

/* ---------- CTA ---------- */
.certificates-cta {
  padding-block: var(--section-padding-sm);
}

@media (min-width: 768px) {
  .certificates-cta {
    padding-block: var(--section-padding);
  }
}

.certificates-cta__panel {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 32px;
  background: linear-gradient(135deg, var(--color-primary-extra-soft) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
}

@media (min-width: 768px) {
  .certificates-cta__panel {
    padding: 48px;
  }
}

@media (min-width: 992px) {
  .certificates-cta__panel {
    grid-template-columns: 1.3fr 1fr;
    padding: 56px 64px;
    gap: 48px;
  }
}

.certificates-cta__title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 14px;
}

.certificates-cta__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 560px;
  margin-bottom: 24px;
}

.certificates-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .certificates-cta__actions .btn {
    width: 100%;
  }
}

.certificates-cta__visual {
  display: none;
}

@media (min-width: 768px) {
  .certificates-cta__visual {
    display: block;
  }
}

.certificates-cta__visual img {
  width: 100%;
  height: auto;
  max-width: 640px;
  margin-inline: auto;
  display: block;
}

/* =========================================================
   requisites.html (Реквизиты)
   Префикс .req-*. Канонические компоненты не дублируем.
   ========================================================= */

/* ---------- Hero ---------- */
.req-hero {
  padding-block: 32px 48px;
  background: var(--color-surface);
}

@media (min-width: 768px) {
  .req-hero { padding-block: 48px 80px; }
}

.req-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 992px) {
  .req-hero__inner {
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
  }
}

.req-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.req-hero__subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 560px;
}

.req-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .req-hero__cta .btn {
    width: 100%;
  }
}

.req-hero__visual {
  display: none;
}

@media (min-width: 768px) {
  .req-hero__visual { display: block; }
}

.req-hero__visual svg {
  width: 100%;
  height: auto;
  max-width: 520px;
  margin-inline: auto;
  display: block;
}

@media (max-width: 480px) {
  .req-hero .h1 {
    font-size: 36px;
    letter-spacing: -0.03em;
  }
}

/* ---------- Shortcuts (4 якорные карточки) ---------- */
.req-shortcuts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .req-shortcuts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1200px) {
  .req-shortcuts__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.req-shortcut {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  color: var(--color-text);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.req-shortcut:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.req-shortcut__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.req-shortcut__icon svg {
  width: 24px;
  height: 24px;
}

.req-shortcut__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.req-shortcut__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.req-shortcut__hint {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.req-shortcut__arrow {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--color-text-muted);
  transition: color var(--transition-base), transform var(--transition-base);
}

.req-shortcut:hover .req-shortcut__arrow {
  color: var(--color-primary-dark);
  transform: translateX(2px);
}

/* ---------- Layout: main + sidebar ---------- */
.req-main {
  background: var(--color-page);
}

.req-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 1200px) {
  .req-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
  }
}

.req-layout__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.req-layout__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@media (min-width: 1200px) {
  .req-layout__side {
    position: sticky;
    top: calc(var(--header-height) + 16px);
    align-self: start;
  }
}

/* ---------- Блок-секция (заголовок + тело) ---------- */
.req-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.req-block__title {
  padding: 24px 24px 16px;
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

@media (min-width: 768px) {
  .req-block__title { padding: 28px 28px 16px; }
}

.req-block__body {
  padding: 0 24px 24px;
}

@media (min-width: 768px) {
  .req-block__body { padding: 0 28px 28px; }
}

/* Когда .req-block__title используется без оборачивающего .req-block
   (вне карточки — на свободной секции) */
.req-counterparty > .req-block__title,
.req-when > .req-block__title,
.req-faq > .req-block__title {
  padding: 0;
  margin-bottom: 16px;
}

/* ---------- Definition list (реквизиты) ---------- */
.req-dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.req-dl__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.req-dl__row:last-child {
  border-bottom: none;
}

.req-dl__row dt {
  font-size: 13px;
  color: var(--color-text-muted);
}

.req-dl__row dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  word-break: break-word;
}

.req-dl__row dd .link-arrow {
  font-size: 15px;
}

@media (min-width: 768px) {
  .req-dl--compact .req-dl__row {
    grid-template-columns: 220px 1fr;
    gap: 16px;
    align-items: start;
  }
  .req-dl--compact .req-dl__row dt {
    padding-top: 2px;
  }
}

/* ---------- Превью карточки организации ---------- */
.req-card-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

@media (min-width: 768px) {
  .req-card-preview {
    grid-template-columns: 220px 1fr;
    gap: 32px;
    padding: 28px;
  }
}

.req-card-preview__visual {
  background: var(--color-surface-soft);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.req-card-preview__paper {
  position: relative;
  width: 100%;
  max-width: 180px;
  aspect-ratio: 3 / 4;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}

.req-card-preview__title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 6px;
}

.req-card-preview__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 8px;
}

.req-card-preview__line {
  height: 6px;
  background: var(--color-surface-soft);
  border-radius: 2px;
}

.req-card-preview__line--short {
  width: 60%;
}

.req-card-preview__stamp {
  position: absolute;
  right: 12px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--color-primary-dark);
  color: var(--color-primary-dark);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  opacity: 0.7;
  transform: rotate(-12deg);
}

.req-card-preview__heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.req-card-preview__text {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 460px;
}

.req-card-preview__btn {
  align-self: flex-start;
}

@media (max-width: 480px) {
  .req-card-preview__btn { width: 100%; }
}

/* ---------- Банковские и юридические данные ---------- */
.req-banking {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

@media (min-width: 768px) {
  .req-banking {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 28px;
  }
}

.req-banking__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-soft);
}

/* ---------- Плашка про НДС ---------- */
.req-vat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: var(--color-primary-extra-soft);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-md);
}

.req-vat__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary-dark);
}

.req-vat__icon svg { width: 24px; height: 24px; }

.req-vat__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.req-vat__text {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 640px;
}

/* ---------- Документы для контрагентов (4 карточки) ---------- */
.req-counterparty {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.req-counterparty__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .req-counterparty__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .req-counterparty__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.req-counterparty__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.req-counterparty__card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.req-counterparty__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.req-counterparty__icon svg { width: 22px; height: 22px; }

.req-counterparty__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.req-counterparty__hint {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  flex: 1;
}

.req-counterparty__btn {
  align-self: flex-start;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .req-counterparty__btn { width: 100%; }
}

/* ---------- Когда нужны реквизиты (4 карточки) ---------- */
.req-when {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.req-when__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .req-when__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .req-when__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.req-when__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.req-when__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.req-when__icon svg { width: 22px; height: 22px; }

.req-when__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.req-when__hint {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ---------- FAQ (использует канонический .accordion) ---------- */
.req-faq {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Сайдбар: общий стиль карточки ---------- */
.req-side-card {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.req-side-card__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.req-side-card__list,
.req-side-card__contacts,
.req-side-card__checks,
.req-side-card__profiles {
  list-style: none;
  margin: 0;
  padding: 0;
}

.req-side-card__list li + li,
.req-side-card__contacts li + li,
.req-side-card__checks li + li,
.req-side-card__profiles li + li {
  margin-top: 8px;
}

/* quick */
.req-side-card__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--transition-base), color var(--transition-base);
}

.req-side-card__link:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.req-side-card__link .req-side-card__icon {
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.req-side-card__link .req-side-card__icon svg {
  width: 18px;
  height: 18px;
}

.req-side-card__link > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.req-side-card__arrow {
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--transition-base), transform var(--transition-base);
}

.req-side-card__link:hover .req-side-card__arrow {
  color: var(--color-primary-dark);
  transform: translateX(2px);
}

/* contacts */
.req-side-card__contacts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
}

.req-side-card__contacts .req-side-card__icon {
  color: var(--color-primary-dark);
  flex-shrink: 0;
  margin-top: 2px;
}

.req-side-card__contacts .req-side-card__icon svg {
  width: 18px;
  height: 18px;
}

/* checks */
.req-side-card__checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
}

.req-side-card__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}

/* profiles */
.req-side-card__profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.req-side-card__profiles li {
  margin: 0;
}

.req-side-card__profiles li + li {
  margin-top: 0;
}

/* ============================================
   FAQ PAGE (Частые вопросы)
   ============================================ */

/* ---------- Hero ---------- */
.faq-hero {
  padding-block: var(--section-padding);
  background: var(--color-surface);
}

.faq-hero__inner {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 992px) {
  .faq-hero__inner {
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
  }
}

.faq-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-hero__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 560px;
}

@media (max-width: 480px) {
  .faq-hero .h1 {
    font-size: 36px;
    letter-spacing: -0.03em;
  }
}

/* ---------- Search inside hero ---------- */
.faq-search {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 560px;
  margin-top: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.faq-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.faq-search__input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
  outline: none;
}

.faq-search__input::placeholder {
  color: var(--color-text-light);
}

.faq-search__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 48px;
  padding: 0 16px;
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  border: none;
  cursor: pointer;
  transition: background var(--transition-base);
}

.faq-search__btn svg {
  width: 20px;
  height: 20px;
}

.faq-search__btn:hover {
  background: var(--color-primary-hover);
}

/* ---------- Hero CTA row ---------- */
.faq-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .faq-hero__cta .btn {
    width: 100%;
  }
}

/* ---------- Hero illustration ---------- */
.faq-hero__visual {
  display: none;
}

@media (min-width: 992px) {
  .faq-hero__visual {
    display: block;
  }
}

.faq-hero__visual img {
  width: 100%;
  height: auto;
}

/* ---------- Tabs strip (sections filter) ---------- */
.faq-tabs-section {
  padding-block: 0;
  background: var(--color-surface);
  margin-top: -32px;
}

@media (min-width: 768px) {
  .faq-tabs-section {
    margin-top: -56px;
  }
}

/* Модификатор: полоса табов отдельной секцией под hero, без наезда */
.faq-tabs-section--static {
  padding-block: 24px;
  margin-top: 0;
  background: transparent;
}

.faq-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  .faq-tabs {
    margin-inline: -24px;
    margin-inline: calc(-1 * var(--container-padding));
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-inline: var(--container-padding);
  }
}

.faq-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.faq-tab:hover {
  color: var(--color-text);
  background: var(--color-primary-extra-soft);
}

.faq-tab.is-active {
  color: var(--color-text-inverse);
  background: var(--color-primary-dark);
}

.faq-tab.is-active:hover {
  background: var(--color-primary-hover);
}

/* ---------- FAQ groups & titles inside content ---------- */
.faq-group {
  display: grid;
  gap: 20px;
}

.faq-group__title {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-soft);
}

/* ---------- Active accordion visual highlight ---------- */
.faq-group .accordion__item.is-open {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.faq-group .accordion__item.is-open .accordion__trigger {
  color: var(--color-primary-dark);
}

.faq-group .accordion__item.is-open .accordion__trigger > span {
  font-weight: 700;
}

/* default-open: чтобы пункт с is-open был виден сразу */
.faq-group .accordion__item.is-open > .accordion__content {
  max-height: 999px;
}

@media (max-width: 767px) {
  .faq-group .accordion__item.is-open > .accordion__content {
    max-height: 2000px;
  }
}

/* ---------- FAQ profiles row ---------- */
.faq-profiles__list {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 480px) {
  .faq-profiles__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .faq-profiles__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .faq-profiles__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Заголовок и пояснение FAQ-профилей */
.faq-profiles__header .section__subtitle {
  margin-top: 8px;
}

/* Чертежи и ссылки форматов в FAQ-карточках */
.faq-profiles__list .mini-profile-card {
  gap: 16px;
  padding: 24px 16px;
}

.faq-profiles__list .mini-profile-card__drawing img {
  height: 72px;
}

.faq-profiles__list .mini-profile-card__tags {
  flex-wrap: nowrap;
  justify-content: center;
  column-gap: 12px;
  line-height: 1.5;
  white-space: nowrap;
}

.faq-profiles__list .mini-profile-card__tags span:not(:last-child)::after {
  margin-left: 8px;
}

/* ---------- "Не нашли ответ?" missing block ---------- */
.faq-missing {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 992px) {
  .faq-missing {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: 40px;
  }
}

.faq-missing__form {
  display: grid;
  gap: 16px;
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .faq-missing__form {
    padding: 40px;
  }
}

.faq-missing__intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-top: -8px;
  margin-bottom: 8px;
}

.faq-missing__sidebar {
  display: grid;
  gap: 16px;
  align-content: start;
}

.faq-missing-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  gap: 16px;
  align-items: center;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.faq-missing-card__body {
  min-width: 0;
}

.faq-missing-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: var(--color-text);
}

.faq-missing-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.faq-missing-card__icon svg {
  width: 22px;
  height: 22px;
}

.faq-missing-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  display: block;
}

.faq-missing-card__desc {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.faq-missing-card__arrow {
  color: var(--color-text-light);
  flex-shrink: 0;
  transition:
    color var(--transition-base),
    transform var(--transition-base);
}

.faq-missing-card:hover .faq-missing-card__arrow {
  color: var(--color-primary-dark);
  transform: translateX(3px);
}

/* ============================================
   GLOSSARY
   ============================================ */

/* Сетка контента: sidebar + группы терминов */
.glossary-layout {
  display: grid;
  gap: 24px;
  align-items: start;
  margin-top: 32px;
}

@media (min-width: 992px) {
  .glossary-layout {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 48px;
    margin-top: 48px;
  }
}

/* Алфавитный список букв в сайдбаре — компактная сетка */
.docs-sidebar__list--alpha {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-sidebar__list--alpha li {
  display: block;
  min-width: 0;
}

.docs-sidebar__list--alpha li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: var(--color-surface-muted);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}

.docs-sidebar__list--alpha li > a:hover {
  color: var(--color-primary-dark);
  background: var(--color-primary-extra-soft);
  border-color: var(--color-primary);
}

.docs-sidebar__list--alpha li > a.is-current {
  color: var(--color-text-inverse);
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.docs-sidebar__list--alpha li.is-empty > a {
  color: var(--color-text-light);
  background: var(--color-surface-muted);
  pointer-events: none;
  opacity: 0.6;
}

/* Активная категория в сайдбаре */
.docs-sidebar__link.is-active {
  color: var(--color-primary-dark);
  background: var(--color-primary-extra-soft);
  border-color: var(--color-primary);
}

.docs-sidebar__link.is-active .docs-sidebar__arrow {
  color: var(--color-primary-dark);
}

/* Алфавитные группы образуют двухколоночную сетку на широких экранах. */
.glossary-content > .glossary-count {
  grid-column: 1 / -1;
}

.glossary-content > .glossary-group {
  margin-top: 0;
}

.glossary-group {
  display: block;
  scroll-margin-top: 96px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.glossary-group + .glossary-group {
  margin-top: 0;
}

.glossary-group__title {
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 20px 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.glossary-group__title::-webkit-details-marker {
  display: none;
}

.glossary-group__title::marker {
  display: none;
  content: '';
}

.glossary-group__title::after {
  content: '⌄';
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  transition: transform var(--transition-base), color var(--transition-base);
}

.glossary-group__title:hover {
  background: var(--color-surface-soft);
}

.glossary-group__title:focus-visible {
  outline: 3px solid var(--color-primary-soft);
  outline-offset: -3px;
}

.glossary-group[open] .glossary-group__title {
  border-bottom: 1px solid var(--color-border-soft);
}

.glossary-group[open] .glossary-group__title::after {
  color: var(--color-primary-dark);
  transform: rotate(180deg);
}

.glossary-group__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: var(--radius-full);
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
}

.glossary-group__count {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-light);
  letter-spacing: 0;
}

.glossary-group .glossary-terms {
  padding: 16px;
}

.glossary-group .glossary-group__title + .glossary-terms {
  margin-top: 0;
}

.glossary-group:not([open]) .glossary-group__title {
  border-bottom: none;
}

.glossary-group.is-hidden {
  display: none;
}

.glossary-group[open] .glossary-group__count {
  color: var(--color-primary-dark);
}

.glossary-group > .glossary-group__title {
  user-select: none;
}

.glossary-group .glossary-group__title > .glossary-group__icon {
  display: none;
}

.glossary-group .glossary-group__title > .glossary-group__letter {
  flex-shrink: 0;
}

.glossary-group .glossary-group__title > .glossary-group__count {
  margin-left: 0;
}

.glossary-group .glossary-group__title + .glossary-terms {
  gap: 16px;
}

.glossary-group.is-empty {
  display: none;
}

@media (min-width: 992px) {
  .glossary-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .glossary-content > .glossary-group {
    align-self: start;
  }
}

@media (min-width: 600px) {
  .glossary-group .glossary-terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .glossary-group {
    scroll-margin-top: 80px;
  }
}

@media (max-width: 479px) {
  .glossary-group__title {
    min-height: 48px;
    padding-inline: 12px;
  }
}

/* Скрытие пустой группы */
.glossary-group.is-hidden {
  display: none;
}

/* Сетка карточек терминов — 1 → 2 колонок */
.glossary-terms {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .glossary-terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Карточка термина */
.glossary-term {
  display: grid;
  gap: 8px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.glossary-term:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.glossary-term.is-hidden {
  display: none;
}

.glossary-term__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.glossary-term__def {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.glossary-term__tags {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.glossary-term__tags .tag-chip {
  font-size: 12px;
  padding: 4px 10px;
  cursor: default;
  pointer-events: none;
}

/* Подсветка совпадений в результатах поиска */
.glossary-term em.match {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-style: normal;
  padding: 0 2px;
  border-radius: 3px;
}

/* Счётчик и пояснение над списком */
.glossary-count {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 24px;
}

/* Состояние «ничего не найдено» */
.glossary-empty {
  padding: 48px 32px;
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.glossary-empty.is-hidden {
  display: none;
}

.glossary-empty__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.glossary-empty__text {
  font-size: 14px;
  color: var(--color-text-muted);
  max-width: 480px;
  margin: 0 auto;
}

/* Мобильная адаптация */
@media (max-width: 767px) {
  .glossary-group {
    gap: 12px;
    scroll-margin-top: 80px;
  }

  .docs-sidebar__list--alpha {
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }

  .docs-sidebar__list--alpha li > a {
    min-height: 36px;
    font-size: 13px;
  }

  .glossary-term {
    padding: 16px;
  }
}

@media (max-width: 479px) {
  .docs-sidebar__list--alpha {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ============================================
   GLOSSARY TOOLS
   ============================================ */
.glossary-tools {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-soft);
}

.glossary-tools__group + .glossary-tools__group {
  margin-top: 48px;
}

.glossary-tools__title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.glossary-tools__links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .glossary-tools__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .glossary-tools__links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.glossary-tool-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 16px;
  gap: 12px;
  align-items: center;
  min-height: 108px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  color: var(--color-text);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.glossary-tool-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: var(--color-text);
}

.glossary-tool-card:focus-visible,
.glossary-howto__card:focus-visible {
  outline: 3px solid var(--color-primary-soft);
  outline-offset: 2px;
}

.glossary-tool-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-primary-dark);
  background: var(--color-primary-extra-soft);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.glossary-tool-card__icon svg {
  width: 28px;
  height: 28px;
}

.glossary-tool-card__body,
.glossary-howto__body {
  min-width: 0;
}

.glossary-tool-card__title,
.glossary-howto__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.glossary-tool-card__text,
.glossary-howto__text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.glossary-tool-card__arrow {
  width: 16px;
  height: 16px;
  color: var(--color-text-light);
  transition:
    color var(--transition-base),
    transform var(--transition-base);
}

.glossary-tool-card:hover .glossary-tool-card__arrow {
  color: var(--color-primary-dark);
  transform: translateX(2px);
}

.glossary-howto {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 992px) {
  .glossary-howto {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

.glossary-howto__item {
  position: relative;
  min-width: 0;
}

@media (min-width: 992px) {
  .glossary-howto__item:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: -12px;
    z-index: 1;
    color: var(--color-text-light);
    font-size: 20px;
    line-height: 1;
    transform: translate(50%, -50%);
  }
}

.glossary-howto__card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  gap: 12px;
  align-items: center;
  height: 100%;
  min-height: 88px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.glossary-howto__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--color-primary-dark);
  background: var(--color-primary-extra-soft);
  font-size: 16px;
  font-weight: 700;
}

.glossary-howto__icon {
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
}

@media (max-width: 479px) {
  .glossary-tools__group + .glossary-tools__group {
    margin-top: 32px;
  }

  .glossary-tool-card,
  .glossary-howto__card {
    padding: 16px 12px;
  }
}

/* ===========================================
   videos.html — Видео-инструкции
   =========================================== */

/* Миниатюра-плейер (общая для featured, library, profile-cards) */
.video-thumbnail {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-text-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
}

.video-thumbnail:hover .video-thumbnail__play {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translate(-50%, -50%) scale(1.08);
}

.video-thumbnail:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.video-thumbnail__art {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.video-thumbnail__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid var(--color-primary);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.video-thumbnail--small .video-thumbnail__play {
  width: 48px;
  height: 48px;
}

.video-thumbnail__play svg {
  width: 24px;
  height: 24px;
  margin-left: 3px;
}

.video-thumbnail__time {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 10px;
  background: rgba(36, 52, 71, 0.86);
  color: #ffffff;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.video-thumbnail__badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
}

/* Featured: один большой блок */
.video-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

@media (min-width: 992px) {
  .video-featured {
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    padding: 40px;
  }
}

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

.video-featured__badge {
  align-self: flex-start;
}

.video-featured__title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
}

.video-featured__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.video-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 13px;
  color: var(--color-text-light);
}

.video-featured__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.video-featured__meta-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-primary);
}

.video-featured__topics {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.video-featured__topics li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  color: var(--color-text-soft);
  line-height: 1.5;
}

.video-featured__topics li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
}

.video-featured__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* Library: сетка карточек видео */
.videos-library {
  /* section--soft уже на главном элементе */
}

.videos-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .videos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .videos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* Фильтрация табами: скрытые карточки библиотеки видео */
.videos-grid > li[hidden] {
  display: none;
}

/* Карточка видео в библиотеке */
.video-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.video-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.video-card__thumb {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.video-card__type {
  align-self: flex-start;
}

.video-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  margin: 0;
}

.video-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.video-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-soft);
  font-size: 12px;
  color: var(--color-text-light);
  margin-top: auto;
}

.video-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.video-card__meta-item svg {
  width: 12px;
  height: 12px;
}

/* Layout: sidebar (фильтры/темы) + content (библиотека) */
.videos-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 992px) {
  .videos-layout {
    grid-template-columns: 280px 1fr;
    gap: 32px;
  }
}

.videos-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Видео по профилю (миниатюра-плейер вместо чертежа) */
.videos-profiles__list {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .videos-profiles__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .videos-profiles__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .videos-profiles__list {
    grid-template-columns: repeat(6, 1fr);
  }
}

.videos-profiles__thumb {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.videos-profiles__thumb .video-thumbnail {
  border-radius: var(--radius-sm);
  aspect-ratio: 16 / 9;
}

.videos-profiles__thumb .video-thumbnail__play {
  width: 36px;
  height: 36px;
}

.videos-profiles__thumb .video-thumbnail__play svg {
  width: 14px;
  height: 14px;
}

.videos-profiles__thumb .video-thumbnail__time {
  right: 6px;
  bottom: 6px;
  font-size: 10px;
  padding: 2px 6px;
}

/* Видео по ролям — обёртка-сетка */
.videos-roles {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .videos-roles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .videos-roles {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* Плюсы — список преимуществ с иконкой-чек */
.videos-benefits {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .videos-benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .videos-benefits {
    grid-template-columns: repeat(3, 1fr);
  }
}

.videos-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.videos-benefit__check {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
}

.videos-benefit__check svg {
  width: 18px;
  height: 18px;
}

.videos-benefit__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}

.videos-benefit__text {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Hero: чуть-чуть донастройки к .faq-hero для видео — без новой раскладки */
.videos-hero-visual__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Section title spacing */
.videos-section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
  max-width: 760px;
}

.videos-section-head__title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
}

.videos-section-head__sub {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* FAQ-секция под видео — переиспользует .faq-section / .accordion */
.videos-faq {
  /* используем .faq-section для отступов и .accordion для раскрывашек */
}
.contact-hero__inner{grid-template-columns:1fr 1.25fr}.contact-hero__visual{color:var(--color-primary)}.contact-hero__actions{display:flex;gap:12px;flex-wrap:wrap}.contact-overview__grid,.contact-request__grid{display:grid;gap:24px}.contact-details{display:grid;gap:4px}.contact-detail{display:flex;align-items:center;gap:16px;padding:14px 16px;background:var(--color-surface);border:1px solid var(--color-border-soft);border-radius:var(--radius-sm)}.contact-detail__icon{font-size:24px;color:var(--color-primary-dark);width:28px;text-align:center}.contact-detail strong,.contact-detail small{display:block}.contact-detail strong{font-size:12px;color:var(--color-text-muted)}.contact-detail small{font-size:14px;color:var(--color-text)}.contact-consultation{display:grid;gap:4px;padding:16px;border:1px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--color-primary-dark)}.contact-consultation span{font-size:12px;color:var(--color-text-muted)}.contact-map{min-height:420px;position:relative;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.contact-map__image{display:block;width:100%;height:100%;min-height:420px;object-fit:cover}.contact-map__card{position:absolute;left:24px;bottom:24px;padding:18px 20px;background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-md);max-width:280px}.contact-map__card strong{font-size:18px;color:var(--color-text)}.contact-map__card p{margin:10px 0 4px;font-size:13px}.office-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}.office-gallery figure{margin:0;border:1px solid var(--color-border-soft);border-radius:var(--radius-sm);overflow:hidden}.office-gallery__image{height:150px;background:linear-gradient(135deg,var(--color-primary-soft),var(--color-surface-soft));position:relative}.office-gallery__image:after{content:"";position:absolute;inset:24px;background:linear-gradient(135deg,transparent 0 30%,rgba(61,127,107,.35) 30% 33%,transparent 33% 55%,rgba(61,127,107,.25) 55% 58%,transparent 58%)}.office-gallery__image--workspace{background:linear-gradient(135deg,#e5eceb,#b7cfc6)}.office-gallery__image--meeting{background:linear-gradient(135deg,#eef3f7,#d1ded9)}.office-gallery__image--factory{background:linear-gradient(135deg,#d8e2ea,#a9c2b8)}.office-gallery figcaption{padding:10px;font-size:12px;color:var(--color-text-muted)}.office-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.office-benefits div,.request-hints div{padding:14px 16px;border:1px solid var(--color-border-soft);border-radius:var(--radius-sm)}.office-benefits strong,.office-benefits small,.request-hints strong,.request-hints small{display:block}.office-benefits strong,.request-hints strong{font-size:13px;color:var(--color-primary-dark)}.office-benefits small,.request-hints small{margin-top:4px;font-size:11px;color:var(--color-text-muted)}.contact-request{background:var(--color-surface-soft)}.contact-form__card{padding:24px;background:var(--color-surface);border:1px solid var(--color-border-soft);border-radius:var(--radius-md)}.request-hints{display:grid;gap:8px}.departments .h3{margin-bottom:24px}.departments .dept-grid{grid-template-columns:repeat(4,1fr);gap:12px}.departments .dept-card{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;min-height:156px;padding:16px;border-radius:var(--radius-sm);box-shadow:var(--shadow-xs)}.departments .dept-card__icon{width:40px;height:40px;background:transparent;border-radius:0;color:var(--color-primary-dark)}.departments .dept-card__icon svg{width:32px;height:32px}.departments .dept-card__body{display:flex;min-width:0;gap:0}.departments .dept-card__name{font-size:14px;line-height:1.3}.departments .dept-card__desc{margin-top:6px;font-size:11px;line-height:1.45}.departments .dept-card__email{margin-top:8px;overflow:hidden;color:var(--color-text-muted);font-size:11px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.departments .dept-card__link{display:flex;align-items:center;justify-content:space-between;min-height:28px;margin-top:auto;padding-top:8px;color:var(--color-primary-dark);font-size:11px;font-weight:600}.departments .dept-card__link span{font-size:20px;font-weight:400;line-height:1}.contact-cta__panel{padding:32px}@media(max-width:991px){.office-gallery,.office-benefits,.departments .dept-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:767px){.contact-hero__inner,.contact-overview__grid,.contact-request__grid{grid-template-columns:1fr}.office-gallery,.office-benefits,.departments .dept-grid{grid-template-columns:1fr}.departments .dept-card{min-height:0}.contact-map{min-height:340px}.contact-hero__actions .btn{width:100%}}

/* Контактный блок: список данных и карта по референсу */
.contact-overview {
  padding-top: 32px;
}
.contact-overview__grid {
  align-items: stretch;
}
.contact-details {
  gap: 4px;
}
.contact-detail {
  min-height: 64px;
  padding: 12px 16px;
  gap: 16px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.contact-detail:hover,
.contact-detail:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-xs);
  transform: translateX(2px);
}
.contact-detail__icon {
  display: flex;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
}
.contact-detail__icon svg {
  width: 28px;
  height: 28px;
}
.contact-detail strong {
  font-size: 13px;
}
.contact-detail small {
  margin-top: 4px;
  font-size: 14px;
}
.contact-consultation {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 64px;
  padding: 12px 16px;
  gap: 16px;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.contact-consultation:hover,
.contact-consultation:focus-visible {
  background: var(--color-primary-extra-soft);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-xs);
}
.contact-consultation__icon {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
}
.contact-consultation__icon svg {
  width: 28px;
  height: 28px;
}
.contact-consultation__content {
  display: grid;
  gap: 4px;
}
.contact-consultation__content > span {
  font-size: 12px;
}
.contact-consultation__arrow {
  font-size: 22px;
  line-height: 1;
}

@media (min-width: 768px) {
  .contact-overview__grid {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 2.2fr);
    gap: 16px;
  }
  .contact-details {
    gap: 4px;
  }
  .contact-consultation {
    grid-column: auto;
  }
}

@media (min-width: 992px) {
  .contact-overview__grid {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
  }
  .contact-detail {
    min-height: 68px;
    padding-inline: 16px;
  }
  .contact-map,
  .contact-map__image {
    min-height: 464px;
  }
}

@media (max-width: 767px) {
  .contact-overview {
    padding-top: 24px;
  }
  .contact-map,
  .contact-map__image {
    min-height: 340px;
  }
  .contact-consultation {
    grid-template-columns: 32px minmax(0, 1fr) 20px;
    gap: 12px;
  }
  .contact-consultation__content > span {
    font-size: 11px;
  }
}

/* ============================================
   CASES PAGE — макет страницы кейсов
   ============================================ */
.cases-page-body {
  background: var(--color-page);
}

.cases-hero {
  padding-block: 16px 32px;
  background: var(--color-surface);
}

.cases-hero__inner {
  display: grid;
  gap: 24px;
  align-items: center;
}

.cases-hero__content {
  min-width: 0;
}

.cases-hero .breadcrumbs {
  padding-block: 0 24px;
  border: 0;
  background: transparent;
}

.cases-hero .h1 {
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  overflow-wrap: anywhere;
}

@media (max-width: 359px) {
  .cases-hero .h1 { font-size: 36px; }
}

.cases-hero__text {
  max-width: 520px;
  margin-top: 16px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6;
}

.cases-hero__actions,
.cases-featured__body .btn {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.cases-hero__media {
  min-width: 0;
  overflow: hidden;
}

.cases-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

.cases-benefits {
  padding-block: 0 32px;
  background: var(--color-surface);
}

.cases-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.cases-benefit {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 80px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.cases-benefit__icon,
.cases-info-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: var(--color-primary-dark);
  background: var(--color-primary-extra-soft);
  border-radius: var(--radius-sm);
}

.cases-icon {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0;
}

.cases-meta-icon {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.cases-featured__meta span,
.case-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cases-info-card__icon .cases-icon {
  width: 28px;
  height: 28px;
}

.cases-profile .cases-icon {
  width: 22px;
  height: 22px;
}

.cases-benefit strong,
.cases-benefit > div > span {
  display: block;
}

.cases-benefit strong {
  color: var(--color-text);
  font-size: 15px;
}

.cases-benefit span {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.cases-browser {
  background: var(--color-surface);
}

.cases-categories {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  padding-block: 2px 16px;
  scrollbar-width: thin;
}

.cases-category {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 10px 16px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}

.cases-category:hover,
.cases-category:focus-visible {
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}

.cases-category.is-active {
  color: var(--color-text-inverse);
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.cases-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
}

.cases-filter {
  display: grid;
  gap: 6px;
}

.cases-filter span {
  color: var(--color-text-muted);
  font-size: 12px;
}

.cases-filter select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
}

.cases-filters__reset {
  min-height: 44px;
  font-size: 13px;
}

.cases-section-header {
  margin-bottom: 16px;
}

.cases-section-header h2,
.cases-section-header h3 {
  margin: 0;
}

.cases-featured {
  display: grid;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.cases-featured__media {
  min-width: 0;
  background: var(--color-surface-muted);
}

.cases-featured__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cases-featured__body {
  padding: 24px;
}

.cases-featured__title {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.25;
}

.cases-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.cases-featured__body p {
  margin-top: 16px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.cases-featured__body .btn {
  display: inline-flex;
  margin-top: 20px;
}

.cases-projects {
  padding-top: 24px;
}

.cases-results {
  margin: -8px 0 16px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.cases-projects__grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cases-projects__grid > li[hidden] {
  display: none;
}

.cases-projects__grid .case-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.cases-projects__grid .case-card__image {
  aspect-ratio: 16 / 8;
}

.cases-projects__grid .case-card__image img {
  object-fit: cover;
  object-position: center;
}

.cases-projects__grid .case-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px;
}

.cases-projects__grid .case-card__title {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.35;
}

.cases-projects__grid .case-card__meta {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
}

.cases-projects__grid .link-arrow {
  align-self: flex-end;
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
}

.cases-empty {
  margin-top: 24px;
  padding: 24px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  text-align: center;
}

.cases-info {
  background: var(--color-surface-soft);
}

.cases-info h2 {
  margin: 0;
}

.cases-info__heading {
  margin-top: 32px !important;
}

.cases-info__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
} .cases-info__grid > * { min-width: 0; }

.cases-info-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px 16px;
  align-items: center;
  min-height: 120px;
  padding: 24px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.cases-info-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.cases-info-card__icon {
  grid-row: span 2;
  flex-basis: 56px;
  width: 56px;
  height: 56px;
}

.cases-info-card strong {
  font-size: 16px;
  line-height: 1.35;
}

.cases-info-card > span:last-child {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.cases-profiles {
  background: var(--color-surface);
}

.cases-profiles h2 {
  margin: 0;
}

.cases-profiles__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.cases-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 12px;
  color: var(--color-primary-dark);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}

.cases-profile:hover {
  background: var(--color-primary-extra-soft);
  border-color: var(--color-primary);
}

.cases-profile span {
  font-size: 20px;
}

.cases-cta {
  min-height: 240px;
}

@media (min-width: 600px) {
  .cases-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cases-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cases-info__grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cases-profiles__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .cases-hero {
    padding-block: 24px 48px;
  }

  .cases-hero__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .cases-benefits__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .cases-featured {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .cases-featured__body {
    padding: 32px;
  }

  .cases-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  }

  .cases-info__grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cases-profiles__list {
    grid-template-columns: repeat(6, 1fr);
  }

}

@media (min-width: 992px) {
  .cases-hero__media {
    margin-right: 0;
  }
}

@media (min-width: 992px) {
  .cases-info__grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {

  .cases-hero__actions .btn {
    width: 100%;
  }

  .cases-featured__media {
    aspect-ratio: 16 / 8;
  }

  .cases-info-card {
    min-height: 104px;
    padding: 16px;
  }

  .cases-info-card__icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }

  .cases-info-card strong {
    font-size: 15px;
  }

  .cases-info-card > span:last-child {
    font-size: 13px;
  }
}


/* ============================================
   ARTICLES PAGE (editorial hub)
   ============================================ */
.articles-page { overflow: hidden; }

/* ============================================
   ARTICLE SELECTION PAGE
   ============================================ */
.article-toc__list,
.article-sidebar-links {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-toc__list a,
.article-sidebar-links a {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.45;
  transition: color var(--transition-base);
}

.article-toc__list a:hover,
.article-sidebar-links a:hover {
  color: var(--color-primary-dark);
}

.article-toc__list {
  counter-reset: article-toc;
}

.article-toc__list li {
  counter-increment: article-toc;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: start;
}

.article-toc__list li::before {
  content: counter(article-toc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 700;
}

.article-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 28px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.65;
}

.article-steps li::marker {
  color: var(--color-primary-dark);
  font-weight: 700;
}

.article-sidebar-links li {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-soft);
}

.article-sidebar-links li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.articles-eyebrow { margin: 0 0 12px; color: var(--color-primary-dark); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.articles-hero { padding-block: var(--section-padding-sm) var(--section-padding); background: var(--color-surface); border-bottom: 1px solid var(--color-border-soft); }
.articles-hero__inner { display: grid; gap: 32px; align-items: center; }
.articles-hero__content { min-width: 0; }
.articles-hero__title { margin: 0 0 20px; color: var(--color-text); font-size: clamp(40px, 13.333vw, 48px); line-height: .95; letter-spacing: -.06em; overflow-wrap: anywhere; }
@media (min-width: 360px) { .articles-hero__title { font-size: clamp(48px, 7vw, 88px); } }
.articles-hero__text { max-width: 600px; margin: 0 0 24px; color: var(--color-text-muted); font-size: 17px; line-height: 1.65; }
.articles-hero__search { max-width: 600px; margin-bottom: 16px; }
.articles-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.articles-hero__visual { position: relative; display: none; min-height: 320px; }
.articles-hero__visual img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: var(--radius-lg); }
.articles-hero__visual > .articles-hero__sheet,
.articles-hero__visual > .articles-hero__building { display: none; }
.articles-hero__sheet { position: absolute; right: 12%; top: 20px; width: 68%; height: 270px; padding: 36px 32px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transform: rotate(3deg); }
.articles-hero__sheet--back { right: 18%; top: 38px; background: var(--color-primary-extra-soft); transform: rotate(-7deg); }
.articles-hero__sheet-line { display: block; height: 8px; margin-bottom: 14px; border-radius: 4px; background: var(--color-surface-soft); }
.articles-hero__sheet-line--strong { width: 52%; height: 14px; background: var(--color-primary); }
.articles-hero__sheet-line--short { width: 70%; }
.articles-hero__profile { display: block; height: 76px; margin: 22px 0; border: 1px solid var(--color-primary); background: repeating-linear-gradient(135deg, transparent 0 10px, var(--color-primary-soft) 10px 12px); clip-path: polygon(0 20%, 8% 0, 18% 20%, 28% 0, 38% 20%, 48% 0, 58% 20%, 68% 0, 78% 20%, 88% 0, 100% 20%, 100% 100%, 0 100%); }
.articles-hero__building { position: absolute; right: 2%; bottom: 10px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 8px; width: 38%; height: 100px; padding: 12px; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-primary-soft); transform: rotate(-4deg); }
.articles-hero__building i { display: block; height: 50%; border: 1px solid var(--color-primary-dark); background: var(--color-surface); }
.articles-hero__building i:nth-child(2) { height: 78%; }.articles-hero__building i:nth-child(3) { height: 62%; }.articles-hero__building i:nth-child(4) { height: 90%; }
.articles-filter { background: var(--color-surface); border-bottom: 1px solid var(--color-border-soft); }
.articles-filter .gost-tabs { padding-block: 12px; }
.articles-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.articles-section-heading .h2 { margin: 0; }.articles-section-heading__note { color: var(--color-text-muted); font-size: 14px; }
.articles-featured__layout { display: grid; gap: 32px; }
.articles-featured__card { display: grid; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.articles-featured__visual { position: relative; min-height: 230px; background: var(--color-primary-extra-soft); overflow: hidden; }
.articles-featured__visual img { display: block; width: 100%; height: 100%; min-height: 230px; object-fit: cover; }
.articles-featured__visual-label { position: absolute; left: 20px; bottom: 20px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary-dark); font-size: 12px; font-weight: 700; }
.articles-featured__body { display: flex; flex-direction: column; gap: 16px; padding: 28px; }.articles-featured__title { margin: 0; color: var(--color-text); font-size: clamp(24px, 3vw, 36px); line-height: 1.15; letter-spacing: -.03em; }.articles-featured__desc { max-width: 620px; margin: 0; color: var(--color-text-muted); line-height: 1.6; }.articles-featured__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.articles-sidebar { gap: 16px; }.articles-sidebar__quick { display: grid; gap: 14px; }.articles-sidebar__quick .news-sidebar__title { margin-bottom: 2px; }
.articles-grid { grid-template-columns: 1fr; }.articles-card { padding: 0 24px 24px; }.articles-card__image { height: 152px; margin: 0 -24px 14px; overflow: hidden; background: var(--color-surface-muted); }.articles-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }.articles-card:hover .articles-card__image img { transform: scale(1.03); }
.articles-directions { background: var(--color-surface-soft); }.articles-directions__grid { display: grid; gap: 16px; }.articles-direction { min-height: 190px; }.articles-profiles { background: var(--color-page); }.articles-profiles__list { display: grid; gap: 16px; }.articles-profile { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: 128px; padding: 16px 20px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: border-color var(--transition-base), box-shadow var(--transition-base); }.articles-profile:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }.articles-profile img { width: 128px; height: 96px; object-fit: contain; }.articles-profile strong, .articles-collection strong { display: block; color: var(--color-text); font-size: 16px; }.articles-profile small, .articles-collection small { display: block; margin-top: 4px; color: var(--color-text-muted); font-size: 13px; line-height: 1.35; }.articles-collections__grid { display: grid; gap: 12px; }.articles-collection { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; align-items: center; gap: 8px 16px; padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: border-color var(--transition-base), transform var(--transition-base); }.articles-collection:hover { border-color: var(--color-primary); transform: translateY(-2px); }.articles-collection__icon { display: inline-flex; align-items: center; justify-content: center; grid-column: 2; grid-row: 1; justify-self: end; width: 48px; height: 48px; color: var(--color-primary-dark); background: var(--color-primary-soft); border-radius: var(--radius-sm); }.articles-collection__icon svg { width: 24px; height: 24px; }.articles-collection__number { color: var(--color-primary-dark); font-size: 20px; font-weight: 700; }.articles-collection__content { min-width: 0; }.articles-editorial { background: var(--color-surface); }.articles-editorial__grid { display: grid; gap: 16px; }.articles-editorial__card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 24px; min-height: 176px; padding: 20px 24px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); color: inherit; text-decoration: none; box-shadow: var(--shadow-xs); transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); }.articles-editorial__card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }.articles-editorial__card:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 4px; }.articles-editorial__illustration { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; color: var(--color-primary-dark); }.articles-editorial__illustration img { display: block; width: 112px; height: 96px; object-fit: contain; }.articles-editorial__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }.articles-editorial__title { color: var(--color-text); font-size: 18px; line-height: 1.3; }.articles-editorial__text { max-width: 310px; color: var(--color-text-muted); font-size: 14px; line-height: 1.5; }.articles-editorial__body .link-arrow { margin-top: 2px; font-size: 14px; }.articles-consultation { padding-top: var(--section-padding-sm); }
@media (min-width: 768px) { .articles-hero { padding-block: var(--section-padding) var(--section-padding-lg); }.articles-hero__inner { grid-template-columns: 1fr 1fr; gap: 48px; }.articles-hero__visual { display: block; }.articles-featured__card { grid-template-columns: 1.05fr 1fr; }.articles-featured__visual, .articles-featured__visual img { min-height: 100%; }.articles-featured__body { padding: 40px; }.articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.articles-directions__grid { grid-template-columns: repeat(2, 1fr); }.articles-profiles__list { grid-template-columns: repeat(3, 1fr); }.articles-editorial__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }.articles-editorial__card { grid-template-columns: 1fr; align-content: start; gap: 16px; min-height: 300px; padding: 24px; }.articles-editorial__illustration { width: 100%; height: 116px; justify-content: flex-start; }.articles-editorial__illustration img { width: 136px; height: 108px; }.articles-editorial__text { max-width: none; } } @media (min-width: 992px) { .articles-editorial__card { grid-template-columns: 112px minmax(0, 1fr); align-items: center; min-height: 176px; padding: 20px 24px; }.articles-editorial__illustration { width: 112px; height: 112px; justify-content: center; }.articles-editorial__illustration img { width: 112px; height: 96px; } }
@media (min-width: 992px) { .articles-featured__layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }.articles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.articles-directions__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .articles-section-heading { align-items: start; flex-direction: column; gap: 12px; }.articles-hero__actions .btn, .articles-featured__actions .btn { width: 100%; }.articles-profile { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; min-height: 112px; padding: 12px 16px; }.articles-profile img { width: 80px; height: 80px; }.articles-profile > .link-arrow { grid-column: 2; }.articles-editorial__card { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; min-height: 0; padding: 16px; }.articles-editorial__illustration { width: 80px; height: 96px; }.articles-editorial__illustration img { width: 84px; height: 76px; }.articles-editorial__title { font-size: 16px; }.articles-editorial__text { font-size: 13px; }.articles-editorial__body .link-arrow { font-size: 13px; } }

/* ============================================
   ENGINEERS REFERENCE PAGE
   ============================================ */
.engineers-reference-hero {
  padding-block: 24px var(--section-padding-sm);
  background: var(--color-surface);
}
.engineers-reference-hero__inner {
  display: grid;
  gap: 32px;
  align-items: center;
}
.engineers-reference-hero__content { min-width: 0; }
.engineers-reference-hero__content .h1 {
  margin: 0 0 16px;
  color: var(--color-text);
}
.engineers-reference-hero__subtitle {
  max-width: 560px;
  margin: 0 0 24px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.55;
}
.engineers-reference-hero__search { max-width: 560px; margin-bottom: 16px; }
.engineers-reference-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.engineers-reference-hero__visual { display: none; min-width: 0; }
.engineers-reference-hero__visual img { display: block; width: 100%; height: auto; }

.engineers-reference-nav {
  padding-block: 0 16px;
  background: var(--color-surface);
}
.engineers-reference-nav__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.engineers-reference-nav__item {
  min-width: 0;
  background: var(--color-surface);
}
.engineers-reference-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 12px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 13px;
  text-align: center;
}
.engineers-reference-nav__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--color-primary-dark);
}
.engineers-reference-nav__link span {
  color: var(--color-text-muted);
  line-height: 1.35;
}

.engineers-reference-materials { padding-top: 24px; }
.engineers-reference-grid {
  display: grid;
  gap: 24px;
  min-width: 0;
}
.engineers-reference-sidebar { min-width: 0; }
.engineers-reference-content { min-width: 0; }
.engineers-reference-content .docs-content__title { margin-bottom: 16px; }
.engineers-reference-docs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.engineers-reference-docs .document-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
}
.engineers-reference-docs .document-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 24px;
  border-radius: 4px;
  color: var(--color-text-inverse);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.engineers-reference-docs .document-card__icon--pdf { background: var(--color-primary-dark); }
.engineers-reference-docs .document-card__icon--dwg,
.engineers-reference-docs .document-card__icon--ifc { background: var(--color-primary-dark); }
.engineers-reference-docs .document-card__icon--bim { background: var(--color-success); }
.engineers-reference-docs .document-card__icon--sto { background: var(--color-accent-dark); }
.engineers-reference-docs .document-card__content { min-width: 0; }
.engineers-reference-docs .document-card__title { color: var(--color-text); line-height: 1.25; }
.engineers-reference-docs .document-card__description {
  margin: 8px 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.engineers-reference-docs .document-card__meta { color: var(--color-text-light); font-size: 11px; line-height: 1.4; }
.engineers-reference-docs .document-card__download { grid-column: 2; justify-self: start; margin-top: 4px; }

.engineers-reference-help .h2,
.engineers-reference-profiles .h2,
.engineers-reference-faq .h2 { margin-bottom: 20px; }
.engineers-reference-help .help-card { min-width: 0; padding: 20px; }
.engineers-reference-help .help-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
}
.engineers-reference-help .help-card__title { min-height: 42px; }
.engineers-reference-profiles { padding-top: 48px; }
.engineers-reference-profiles__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.engineers-reference-profiles__header .h2 { margin: 0; }
.engineers-reference-profiles__buttons {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}
@media (max-width: 479px) {
  .engineers-reference-profiles__header {
    flex-wrap: wrap;
    gap: 12px;
  }
  .engineers-reference-profiles__header .h2 { flex-basis: 100%; }
  .engineers-reference-profiles__buttons { margin-left: auto; }
}
.engineers-reference-profiles__list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin: 0 -16px;
  padding: 0 16px 4px;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.engineers-reference-profiles__list::-webkit-scrollbar { display: none; }
.engineers-reference-profiles__list > li {
  flex: 0 0 calc(100% - 12px);
  min-width: 0;
  scroll-snap-align: start;
}
.engineers-reference-profiles__list .mini-profile-card {
  display: flex;
  min-width: 0;
  min-height: 154px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}
.engineers-reference-profiles__list .mini-profile-card__title { order: -1; }
.engineers-reference-profiles__list .mini-profile-card__drawing { width: 100%; }
.engineers-reference-profiles__list .mini-profile-card__drawing img { max-width: 100%; height: 80px; object-fit: contain; }
.engineers-reference-faq { padding-top: 48px; }
.engineers-reference-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.engineers-reference-faq__grid .accordion__item {
  min-width: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}
.engineers-reference-faq__grid .accordion__trigger {
  background: var(--color-surface);
}
.engineers-reference-faq__grid .accordion__trigger:hover {
  background: var(--color-surface-soft);
}

.engineers-reference-cta { padding-top: 48px; }
.engineers-reference-cta__panel {
  display: grid;
  overflow: hidden;
  gap: 24px;
  padding: 24px;
  background: linear-gradient(135deg, var(--color-primary-extra-soft), var(--color-surface));
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xl);
}
.engineers-reference-cta__content { min-width: 0; }
.engineers-reference-cta__content .h2 { margin-bottom: 12px; }
.engineers-reference-cta__content p { max-width: 520px; margin: 0; color: var(--color-text-muted); line-height: 1.55; }
.engineers-reference-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.engineers-reference-cta__visual { display: none; min-width: 0; align-self: end; }
.engineers-reference-cta__visual img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-inline: auto;
}
.engineers-reference-cta__form { display: none; }

@media (min-width: 600px) {
  .engineers-reference-nav__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .engineers-reference-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engineers-reference-profiles__list > li { flex-basis: calc(50% - 6px); }
  .engineers-reference-faq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .engineers-reference-hero { padding-block: 24px var(--section-padding); }
  .engineers-reference-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .engineers-reference-hero__visual { display: block; }
  .engineers-reference-nav__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .engineers-reference-nav__link { min-height: 56px; border-bottom: 0; border-right: 1px solid var(--color-border-soft); }
  .engineers-reference-nav__list li:last-child .engineers-reference-nav__link { border-right: 0; }
  .engineers-reference-profiles__list > li { flex-basis: calc(33.333% - 8px); }
  .engineers-reference-cta__panel { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; padding: 24px 32px; }
  .engineers-reference-cta__visual { display: block; }
}
@media (min-width: 992px) {
  .engineers-reference-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
  .engineers-reference-docs { gap: 12px; }
  .engineers-reference-help .help-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .engineers-reference-hero__inner { gap: 64px; }
  .engineers-reference-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
  .engineers-reference-docs { gap: 16px; }
  .engineers-reference-docs .document-card { padding: 16px; }
}
@media (max-width: 480px) {
  .engineers-reference-hero__actions .btn,
  .engineers-reference-cta__actions .btn { width: 100%; }
  .engineers-reference-hero .h1 { font-size: 36px; letter-spacing: -0.03em; }
}

/* Compact contact request form */
.contact-request__grid {
  align-items: start;
}

.contact-form__card {
  padding: 24px;
}

.contact-form__card .h3 {
  margin-bottom: 20px;
}

.contact-form__row {
  gap: 12px;
}

.contact-form__row--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.contact-form__card .form {
  gap: 12px;
}

.contact-form__card .form-field {
  gap: 4px;
}

.contact-form__card .form-field::after {
  min-height: 12px;
  font-size: 11px;
}

.contact-form__card .form-label {
  font-size: 13px;
}

.contact-form__card .form-input,
.contact-form__card .form-select {
  height: 44px;
  padding-block: 10px;
  font-size: 14px;
}

.contact-form__card .form-textarea {
  min-height: 88px;
  padding-block: 10px;
  font-size: 14px;
}

.contact-form__card .form-field--checkbox {
  margin-top: 0;
}

.contact-form__card .checkbox__text,
.contact-form__card .form__legal-links {
  font-size: 12px;
}

.contact-form__card .form__legal-links {
  margin-top: 4px;
  padding-left: 30px;
}

.contact-form__footer {
  margin-top: 0;
  align-items: flex-end;
}

.contact-form__footer .btn {
  min-height: 44px;
  padding-block: 10px;
}

.request-hints {
  gap: 12px;
  padding: 16px;
  background: var(--color-primary-extra-soft);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.request-hints .request-hints__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.request-hints__icon {
  display: flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
}

.request-hints__icon svg {
  width: 24px;
  height: 24px;
}

.request-hints__content {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.request-hints__content strong {
  font-size: 16px;
  line-height: 1.35;
  color: var(--color-text);
}

.request-hints__content small {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

@media (min-width: 992px) {
  .contact-request__grid {
    grid-template-columns: minmax(0, 1.9fr) minmax(240px, .9fr);
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .contact-form__row--three,
  .contact-form__row--two {
    grid-template-columns: 1fr;
  }

  .contact-form__footer .btn {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .contact-form__row--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .contact-form__card {
    padding: 16px;
  }
}

/* Строгая подача формы запроса */
.contact-request {
  background: var(--color-surface-soft);
}

.contact-request__grid {
  gap: 24px;
}

.contact-form__card {
  padding: 32px;
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.contact-form__card .h3 {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: 24px;
  letter-spacing: -0.02em;
}

.contact-form__card .form {
  gap: 16px;
}

.contact-form__row {
  gap: 16px;
}

.contact-form__card .form-field {
  gap: 8px;
}

.contact-form__card .form-field::after {
  min-height: 0;
}

.contact-form__card .form-label {
  color: var(--color-text-soft);
  font-weight: 600;
}

.contact-form__card .form-input,
.contact-form__card .form-select,
.contact-form__card .form-textarea {
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.contact-form__card .form-input:hover,
.contact-form__card .form-select:hover,
.contact-form__card .form-textarea:hover {
  border-color: var(--color-border-strong);
}

.contact-form__card .form-textarea {
  min-height: 112px;
}

.contact-form__card .form-field--checkbox {
  padding-top: 8px;
  border-top: 1px solid var(--color-border-soft);
}

.contact-form__card .checkbox__text,
.contact-form__card .form__legal-links {
  color: var(--color-text-muted);
}

.contact-form__footer {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-soft);
}

.contact-form__footer .btn {
  min-height: 48px;
  padding-inline: 24px;
  border-radius: var(--radius-sm);
}

.request-hints {
  gap: 8px;
  padding: 16px;
  background: var(--color-surface-soft);
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.request-hints .request-hints__item {
  gap: 16px;
  min-height: 112px;
  padding: 16px;
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.request-hints__icon {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xs);
  background: var(--color-primary-soft);
}

.request-hints__content strong {
  font-size: 15px;
}

.request-hints__content small {
  font-size: 13px;
}

@media (max-width: 767px) {
  .contact-form__card {
    padding: 24px;
  }

  .contact-form__card .h3 {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .contact-form__card {
    padding: 16px;
  }

  .request-hints {
    padding: 8px;
  }
}

/* End compact contact request form */

/* Contact page typography — readable on dense information blocks */
.contact-detail strong {
  font-size: 14px;
}

.contact-detail small {
  font-size: 16px;
}

.contact-consultation__content > span {
  font-size: 14px;
}

.contact-map__card p {
  font-size: 14px;
  line-height: 1.5;
}

.departments .dept-card__name {
  font-size: 16px;
}

.departments .dept-card__desc {
  font-size: 13px;
  line-height: 1.5;
}

.departments .dept-card__email,
.departments .dept-card__link {
  font-size: 13px;
}

.request-hints__content small {
  font-size: 14px;
}

.contact-form__card .checkbox__text {
  font-size: 15px;
}

@media (max-width: 767px) {
  .contact-consultation__content > span {
    font-size: 13px;
  }
}