/* Shared visual language for Concept and About. */
.concept-page,
.catalog-page-modern,
.product-page,
.about-company-page {
  --page-heading: #092145;
  --page-text: #5a6678;
  --page-brand: #016195;
  --page-brand-hover: #014c75;
  --page-soft: #f4f8ff;
  --page-warm: #fff8db;
  --page-title-size: clamp(30px, 3.2vw, 48px);
  --page-card-title-size: clamp(22px, 1.8vw, 26px);
  /*font-family: var(--font-body);*/
  font-size: 16px;
  line-height: 1.7;
  color: var(--page-text);
}

.concept-banner-wrap {
  position: relative;
  width: calc(100% + var(--concept-page-gutter) + var(--concept-page-gutter));
  margin-left: calc(0px - var(--concept-page-gutter));
  background: linear-gradient(120deg, #eaf7ff, #b8def4);
}
.concept-page .concept-banner-wrap .concept-banner {
  width: 100%;
  margin: 0;
}
.concept-banner-actions {
  position: absolute;
  left: 6%;
  bottom: 10%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0;
}
.concept-banner-actions .feature-button:hover { background: #e8f3fa; }
.concept-banner-actions .feature-button:focus-visible {
  outline: 3px solid #016195;
  outline-offset: 4px;
}

.concept-page .concept-foundation,
.concept-page .concept-principles {
  width: calc(100% + var(--concept-page-gutter) + var(--concept-page-gutter));
  max-width: none;
  margin: 0 0 0 calc(0px - var(--concept-page-gutter));
  padding: clamp(40px, 5vw, 80px) max(var(--concept-page-gutter), calc((100% - 1500px) / 2));
}
.concept-page .concept-foundation {
  background: linear-gradient(125deg, #fffdf5 0%, #fff1c8 55%, #f8e4ae 100%);
}
.concept-page .concept-principles {
  background: linear-gradient(125deg, #fafdff 0%, #e7f4ff 45%, #b8def4 100%);
}
.concept-page #principles { scroll-margin-top: 132px; }

.concept-page .page-button,
.catalog-page-modern .primary-mail,
.product-page .primary-mail,
.concept-page .primary-mail,
.about-company-page .contacts-art-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--page-brand);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .2s ease;
}
.concept-page .page-button:hover,
.catalog-page-modern .primary-mail:hover,
.product-page .primary-mail:hover,
.concept-page .primary-mail:hover,
.about-company-page .contacts-art-card a:hover { background: var(--page-brand-hover); }
.concept-page .page-button:focus-visible,
.catalog-page-modern .primary-mail:focus-visible,
.product-page .primary-mail:focus-visible,
.concept-page .primary-mail:focus-visible,
.about-company-page .contacts-art-card a:focus-visible {
  outline: 3px solid #d39400;
  outline-offset: 4px;
}

.concept-page .concept-section-heading h2,
.catalog-page-modern .method-cta h2,
.product-page .order-product-section h2,
.concept-page .method-cta h2,
.about-company-page .contacts-about h3,
.about-company-page #contacts-title {
  font-family: inherit;
  font-size: var(--page-title-size);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: normal;
  color: var(--page-heading);
}
.concept-page article h2,
.concept-page article h3,
.about-company-page .contacts-about-feature-list strong,
.about-company-page .contacts-art-card h2 {
  font-family: inherit;
  font-size: var(--page-card-title-size);
  font-weight: 800;
  line-height: 1.25;
  color: var(--page-heading);
}
.about-company-page .contacts-about-heading h1 {
  font-family: inherit;
  font-size: clamp(34px, 4.2vw, 66px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--page-heading);
}
.about-company-page .contacts-about,
.about-company-page .contacts-about p,
.about-company-page .contacts-about-award-list li,
.about-company-page .contacts-art-card p:not(.hero-kicker),
.about-company-page .contacts-content .contact-requisites p,
.about-company-page .contacts-content .contact-requisites strong {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.7;
  color: var(--page-text);
}
.about-company-page .contacts-about-closing { font-weight: 500; }
.about-company-page .contacts-about strong,
.about-company-page .contacts-content .contact-requisites strong { color: var(--page-heading); }
.about-company-page .contacts-art-top span { font-size: 16px; color: var(--page-heading); }
.about-company-page .hero-kicker,
.concept-page .hero-kicker { font-family: inherit; font-size: 16px; color: #8a6500; }

.about-company-page { background: #fff; }
.about-company-page .contacts-about-heading,
.about-company-page #contacts { background: var(--page-soft); }
.about-company-page .contacts-about-motto,
.about-company-page .contacts-about-awards,
.about-company-page .contacts-art-card { background: var(--page-warm); }
.about-company-page .contacts-about-reach { background: var(--page-brand); }
.about-company-page .contacts-about-reach h3,
.about-company-page .contacts-about-reach strong { color: #fff; }
.about-company-page .contacts-about-reach p { color: #eef6fc; }
.about-company-page .contacts-about-feature-list li,
.about-company-page .contacts-about-feature-list li:nth-child(2),
.about-company-page .contacts-about-feature-list li:nth-child(3) {
  background: #fff;
  border: 1px solid #e7edf7;
  border-radius: 0;
}
.about-company-page .about-icon,
.about-company-page .contacts-about-feature-list li .about-icon,
.about-company-page .contacts-about-award-list .about-icon {
  color: var(--page-brand);
  background: #e8f3fa;
}
.about-company-page .contacts-about-reach-list .about-icon { background: var(--page-warm); color: var(--page-brand); }
.about-company-page .contacts-content .contact-icon,
.about-company-page .contact-row a { color: var(--page-brand); }

@media (max-width: 640px) {
  .concept-banner-actions { position: static; gap: 12px; padding: 12px 20px 24px; }
  .concept-banner-actions .feature-button { flex: 1; padding-inline: 16px; }
  .concept-page #principles { scroll-margin-top: 106px; }
}