/* ============================================================
   MTSP — Про нас (v2 canon)
   Верстка за docs-claude/mockups/Про нас v2.html.
   Токени — canon --mtsp-* (tokens.css). Generic-класи скоуплені
   під .mtsp-about-page (патерн .mtsp-catalog-page / .mtsp-ki-page).
   ВІТРИННА → navy about-hero (виняток із «hero vs page-head», owner-узгоджено).
   ============================================================ */

.mtsp-about-page {
	font-family: var(--mtsp-font-body);
	color: var(--mtsp-gray-800);
}

/* ============ CONTAINER ============ */
.mtsp-about-page .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Крихти Про-нас — тепер спільний canon band над hero (.mtsp-info-page .breadcrumbs, page-head.css). */

/* Кнопки → глобальний canon .btn (buttons.css, трек E). Hero: .btn--primary/.btn--ghost-dark
   .btn--md; cta-band: .btn--*.btn--lg. Scoped-копії видалено 2026-07-08. */

/* ============ HERO (navy — вітринна) ============ */
/* Спільна обгортка крихти+hero — ОДИН градієнт + terra-сяйво (безшовно на весь блок). */
.mtsp-about-page .about-hero-wrap {
	background: linear-gradient(135deg, var(--mtsp-navy) 0%, var(--mtsp-navy-light) 100%);
	position: relative; overflow: hidden;
}
.mtsp-about-page .about-hero-wrap::before {
	content: '';
	position: absolute; top: -30%; right: -15%;
	width: 800px; height: 800px;
	background: radial-gradient(circle, rgba(217, 116, 65, 0.16), transparent 60%);
	pointer-events: none;
}
/* крихти й hero прозорі + над сяйвом (position:relative) */
.mtsp-about-page .about-hero-wrap .breadcrumbs { background: transparent; position: relative; }
.mtsp-about-page .about-hero {
	background: transparent; /* градієнт+сяйво тепер на .about-hero-wrap */
	color: var(--mtsp-white);
	padding: 48px 0 64px; /* крихти винесені у band над hero — тут нормальний hero-відступ */
	position: relative;
}
.mtsp-about-page .about-hero-inner { position: relative; max-width: 760px; }
.mtsp-about-page .about-hero .section-eyebrow { color: var(--mtsp-accent); }
.mtsp-about-page .about-hero h1 {
	font-family: var(--mtsp-font-display);
	font-size: 46px; font-weight: 600;
	color: var(--mtsp-white);
	letter-spacing: -1.2px; line-height: 1.12;
	margin: 0 0 20px;
}
.mtsp-about-page .about-hero h1 em { font-style: normal; color: var(--mtsp-accent); }
.mtsp-about-page .about-hero p {
	font-size: 16.5px; color: rgba(255, 255, 255, 0.8);
	line-height: 1.7; max-width: 600px; margin: 0 0 30px;
}
.mtsp-about-page .about-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mtsp-about-page .about-hero-stats {
	display: flex; gap: 56px; flex-wrap: wrap;
	margin-top: 44px; padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	position: relative;
}
.mtsp-about-page .ah-stat .val {
	font-family: var(--mtsp-font-display);
	font-size: 34px; font-weight: 700;
	color: var(--mtsp-white);
	letter-spacing: -0.5px; line-height: 1.1;
}
.mtsp-about-page .ah-stat .lbl { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-top: 4px; }

/* ============ SECTION SHELL ============ */
.mtsp-about-page .section {
	padding: 72px 0;
	border-bottom: 1px solid var(--mtsp-gray-100);
}
.mtsp-about-page .section.compact { padding: 44px 0; }
.mtsp-about-page .section.alt { background: var(--mtsp-gray-50); }
.mtsp-about-page .section:last-of-type { border-bottom: none; }
/* .section-eyebrow / .section-title / .section-header → канон у page-head.css (sitewide) */

/* ============ WHY ============ */
.mtsp-about-page .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mtsp-about-page .why-card {
	background: var(--mtsp-white);
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 8px;
	padding: 24px;
}
.mtsp-about-page .why-card .num {
	font-family: var(--mtsp-font-mono);
	font-size: 11px; font-weight: 600;
	color: var(--mtsp-accent);
	margin-bottom: 12px;
}
.mtsp-about-page .why-card h4 {
	font-size: 16px; font-weight: 700;
	color: var(--mtsp-navy);
	line-height: 1.35; margin: 0 0 8px;
}
.mtsp-about-page .why-card p { font-size: 13.5px; color: var(--mtsp-gray-600); line-height: 1.65; margin: 0; }

/* ============ INDUSTRIES ============ */
.mtsp-about-page .ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mtsp-about-page .ind-card {
	background: var(--mtsp-white);
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 8px;
	padding: 18px 20px;
	display: flex; align-items: center; gap: 14px;
	transition: border-color 0.2s;
}
.mtsp-about-page .ind-card:hover { border-color: var(--mtsp-accent); }
.mtsp-about-page .ind-card .mark {
	width: 38px; height: 38px;
	border-radius: 8px;
	background: var(--mtsp-accent-soft);
	color: var(--mtsp-accent);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--mtsp-font-mono);
	font-size: 12px; font-weight: 600;
	flex-shrink: 0;
}
.mtsp-about-page .ind-card .name { font-size: 14px; font-weight: 700; color: var(--mtsp-navy); line-height: 1.3; }

/* ============ COMPANY ============ */
.mtsp-about-page .company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mtsp-about-page .company-photo {
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 8px;
	overflow: hidden;
	background: var(--mtsp-white);
}
.mtsp-about-page .company-photo img { width: 100%; height: auto; display: block; }
.mtsp-about-page .company-text h2 {
	font-family: var(--mtsp-font-display);
	font-size: 32px; font-weight: 600;
	color: var(--mtsp-navy);
	letter-spacing: -0.6px; margin: 0 0 18px;
}
.mtsp-about-page .company-text p {
	font-size: 15px; color: var(--mtsp-gray-700);
	line-height: 1.75; margin: 0 0 14px;
}
.mtsp-about-page .company-text p strong { color: var(--mtsp-navy); }
.mtsp-about-page .company-points { margin: 8px 0 0; padding: 0; }
.mtsp-about-page .company-points li {
	list-style: none;
	padding: 9px 0 9px 26px;
	position: relative;
	font-size: 14px; color: var(--mtsp-gray-700);
	border-bottom: 1px dashed var(--mtsp-gray-200);
}
.mtsp-about-page .company-points li:last-child { border-bottom: none; }
.mtsp-about-page .company-points li::before {
	content: '';
	position: absolute; left: 0; top: 17px;
	width: 14px; height: 2px;
	background: var(--mtsp-accent);
}

/* ============ TIMELINE ============ */
.mtsp-about-page .timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 2px solid var(--mtsp-gray-200);
}
.mtsp-about-page .tl-item { padding: 24px 24px 0 0; position: relative; }
.mtsp-about-page .tl-item::before {
	content: '';
	position: absolute; top: -7px; left: 0;
	width: 12px; height: 12px;
	background: var(--mtsp-white);
	border: 3px solid var(--mtsp-accent);
	border-radius: 50%;
}
.mtsp-about-page .tl-item .year {
	font-family: var(--mtsp-font-mono);
	font-size: 13px; font-weight: 600;
	color: var(--mtsp-accent);
	margin-bottom: 8px;
}
.mtsp-about-page .tl-item h4 { font-size: 15px; font-weight: 700; color: var(--mtsp-navy); margin: 0 0 6px; }
.mtsp-about-page .tl-item p { font-size: 13px; color: var(--mtsp-gray-600); line-height: 1.6; margin: 0; }

/* ============ CTA BAND (navy) ============ */
.mtsp-about-page .cta-band {
	background: linear-gradient(135deg, var(--mtsp-navy) 0%, var(--mtsp-navy-light) 100%);
	color: var(--mtsp-white);
	padding: 44px 0;
	position: relative; overflow: hidden;
	text-align: center;
}
.mtsp-about-page .cta-band::before {
	content: '';
	position: absolute; top: -80%; left: 50%;
	width: 600px; height: 600px;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(217, 116, 65, 0.16), transparent 60%);
	pointer-events: none;
}
.mtsp-about-page .cta-band-inner { position: relative; }
.mtsp-about-page .cta-band h3 {
	font-family: var(--mtsp-font-display);
	font-size: 28px; font-weight: 600;
	color: var(--mtsp-white);
	letter-spacing: -0.4px; margin: 0 0 6px;
}
.mtsp-about-page .cta-band p { font-size: 14.5px; color: rgba(255, 255, 255, 0.72); margin: 0 0 22px; }
.mtsp-about-page .cta-band-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
	.mtsp-about-page .about-hero h1 { font-size: 32px; }
	.mtsp-about-page .why-grid { grid-template-columns: 1fr; }
	.mtsp-about-page .ind-grid { grid-template-columns: repeat(2, 1fr); }
	.mtsp-about-page .company-grid { grid-template-columns: 1fr; gap: 28px; }
	.mtsp-about-page .timeline {
		grid-template-columns: 1fr;
		border-top: none;
		border-left: 2px solid var(--mtsp-gray-200);
		padding-left: 24px;
	}
	.mtsp-about-page .tl-item { padding: 0 0 24px; }
	.mtsp-about-page .tl-item::before { left: -31px; top: 4px; }
}
@media (max-width: 640px) {
	.mtsp-about-page .ind-grid { grid-template-columns: 1fr; }
	.mtsp-about-page .about-hero-stats { gap: 28px; }
}