/* Стили посадочной страницы (public.main). Вынесены из шаблона. */

/* Hero */
.header .text-container h1 {
	font-size: 3.25rem !important;
	line-height: 3.75rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	margin-bottom: 1.5rem !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	letter-spacing: -0.5px;
}

.header .text-container .p-large {
	font-size: 1.375rem !important;
	line-height: 2rem !important;
	color: #ffffff !important;
	margin-bottom: 2.5rem !important;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
	font-weight: 400;
}

.header .text-container .list-unstyled li {
	margin-bottom: 1rem !important;
}

.header .text-container .list-unstyled .media {
	align-items: flex-start;
	margin-bottom: 1.25rem;
}

.header .text-container .list-unstyled .fas.fa-check {
	color: #4ade80 !important;
	font-size: 1.25rem !important;
	margin-right: 0.75rem;
	margin-top: 0.25rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	padding: 0.35rem;
	width: 1.75rem;
	height: 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.header .text-container .list-unstyled .media-body {
	color: #ffffff !important;
	font-size: 1.125rem !important;
	line-height: 1.75rem !important;
	font-weight: 500;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.header .btn-solid-lg {
	padding: 1.5rem 3rem !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.25rem;
	white-space: normal;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	margin-right: 1rem !important;
	margin-bottom: 1rem !important;
}

.header .btn-solid-lg:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.header .btn-outline-lg {
	padding: 1.5rem 3rem !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.25rem;
	white-space: normal;
	border-color: #ffffff !important;
	color: #ffffff !important;
	border-width: 2px !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
	margin-right: 1rem !important;
	margin-bottom: 1rem !important;
}

.header .btn-outline-lg:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	background-color: #ffffff !important;
	color: #5f4def !important;
}

.header .text-container {
	text-align: left;
}

.header .hero-trial-badge {
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 2rem;
	color: #ffffff;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.375rem;
	padding: 0.5rem 1.25rem;
	margin-bottom: 1.25rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.header .hero-microcopy {
	color: #ffffff;
	opacity: 0.85;
	font-size: 0.875rem;
	line-height: 1.375rem;
	margin-top: 0.25rem;
	margin-bottom: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* CTA hero вынесен в отдельный полноширинный ряд под hero и центрируется по
   экрану. Кнопки идут друг под другом по центру: «Попробовать бесплатно»
   сверху, «Как это работает» снизу — на всех разрешениях. */
.hero-cta {
	text-align: center;
	margin-top: 2.5rem;
}

.hero-cta .btn-solid-lg,
.hero-cta .btn-outline-lg {
	display: block;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
	max-width: 320px;
}

@media (max-width: 991px) {
	.header .text-container {
		text-align: center;
	}

	.header .text-container h1 {
		font-size: 2.5rem !important;
		line-height: 3rem !important;
	}

	/* Список hero центрируем парами «галочка + текст», чтобы текст был рядом
	   с галочкой, а не по центру широкого блока (иначе на планшете большой
	   разрыв между галочкой и текстом). */
	.header .text-container .list-unstyled .media {
		justify-content: center;
	}

	.header .text-container .list-unstyled .media-body {
		flex: 0 1 auto;
		text-align: left;
	}
}

/* Промежуточные CTA */
.mid-cta {
	padding: 0 0 4rem;
	text-align: center;
}

.mid-cta .mid-cta-microcopy {
	color: #777;
	font-size: 0.875rem;
	margin-top: 0.875rem;
	margin-bottom: 0;
}

/* Базовый .btn-solid-reg имеет line-height 0 — при переносе длинного текста
   строки накладываются друг на друга. Фиксируем для промежуточных CTA. */
.mid-cta .btn-solid-reg {
	line-height: 1.25rem;
	white-space: normal;
	text-align: center;
}

/* Кнопка в карточках тарифов: базовый .btn-solid-reg имеет line-height 0,
   из-за чего длинный текст при переносе накладывался строками друг на друга. */
#pricing .button-wrapper .btn-solid-reg {
	line-height: 1.25rem;
	white-space: normal;
	text-align: center;
}

/* Тарифы на экранах < 992px идут стопкой (карточки не делятся на 2/3 ровно,
   поэтому «2+1» оставляло одинокую карточку с большими полями по краям).
   Расширяем карточку с 19rem, чтобы она не висела узкой полосой. */
@media (max-width: 991px) {
	#pricing .card {
		max-width: 28rem;
	}
}

/* FAQ */
#faq {
	padding: 4rem 0;
}

#faq .h2-heading {
	margin-bottom: 2.5rem;
	text-align: center;
}

#faq .faq-accordion {
	max-width: 50rem;
	margin: 0 auto;
}

#faq .card {
	border: 1px solid #e6e6e6;
	border-radius: 0.5rem;
	margin-bottom: 0.75rem;
	box-shadow: none;
}

#faq .card-header {
	background-color: #ffffff;
	border-bottom: none;
	padding: 0;
}

#faq .card-header button {
	display: block;
	width: 100%;
	padding: 1.125rem 1.5rem;
	border: none;
	background: none;
	color: #333;
	font: 700 1rem/1.5rem "Open Sans", sans-serif;
	text-align: left;
	cursor: pointer;
}

#faq .card-header button:hover {
	color: #5f4dee;
}

#faq .card-header button::after {
	content: '\f078';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	float: right;
	color: #5f4dee;
	transition: transform 0.2s;
}

#faq .card-header button[aria-expanded='true']::after {
	transform: rotate(180deg);
}

#faq .card-body {
	padding: 0 1.5rem 1.25rem;
	color: #555;
	font-size: 0.9375rem;
	line-height: 1.625rem;
}

/* Финальный CTA */
#final-cta {
	background: linear-gradient(180deg, #7c6ef0 0%, #5f4dee 100%);
	color: #ffffff;
	padding: 4rem 0 !important;
	position: relative;
	overflow: hidden;
}

#final-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
	opacity: 0.3;
}

#final-cta .container {
	position: relative;
	z-index: 1;
}

#final-cta .text-container {
	max-width: 800px;
	margin: 0 auto;
}

#final-cta h2 {
	color: #ffffff !important;
	font-size: 2.75rem !important;
	line-height: 3.5rem !important;
	font-weight: 700 !important;
	margin-bottom: 1.5rem !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	letter-spacing: -0.5px;
}

#final-cta .p-heading {
	color: #ffffff !important;
	font-size: 1.25rem !important;
	line-height: 1.875rem !important;
	margin-bottom: 3rem !important;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
	opacity: 0.95;
}

#final-cta .btn-solid-lg {
	background-color: #ffffff !important;
	color: #5f4def !important;
	border-color: #ffffff !important;
	padding: 1.375rem 3rem !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.25rem;
	white-space: normal;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	margin-right: 1rem !important;
	margin-bottom: 0.5rem !important;
}

#final-cta .btn-solid-lg:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	background-color: #f8f9fa !important;
	color: #5f4def !important;
}

#final-cta .btn-outline-lg {
	background-color: transparent !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
	border-width: 2px !important;
	padding: 1.375rem 3rem !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
	margin-left: 1rem !important;
	margin-bottom: 0.5rem !important;
}

#final-cta .btn-outline-lg:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	background-color: #ffffff !important;
	color: #5f4def !important;
}

@media (max-width: 768px) {
	#final-cta {
		padding: 2.5rem 0 !important;
	}

	#final-cta h2 {
		font-size: 2rem !important;
		line-height: 2.5rem !important;
	}

	#final-cta .btn-solid-lg,
	#final-cta .btn-outline-lg {
		display: block;
		width: 100%;
		max-width: 300px;
		margin: 0.75rem auto !important;
	}
}

/* Волна-вход в финальный CTA (белый → фиолетовый).
   Низ волны совпадает с верхом градиента #final-cta (#7c6ef0) — стык бесшовный. */
.final-cta-wave {
	display: block;
	width: 100%;
	height: 3rem;
	margin-bottom: -1px;
}

/* Низ фиолетового #final-cta сливается с фиолетовым футером,
   поэтому штатная волна футера (белый → фиолетовый) здесь не нужна.
   #sticky-cta присутствует только на лендинге и стоит прямо перед волной. */
#sticky-cta + .footer-frame {
	display: none;
}

@media (max-width: 768px) {
	.final-cta-wave {
		height: 1.75rem;
	}
}

/* Sticky CTA (мобильные) */
#sticky-cta {
	display: none;
}

@media (max-width: 991px) {
	#sticky-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1030;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
		background-color: #ffffff;
		box-shadow: 0 -0.125rem 0.625rem rgba(0, 0, 0, 0.15);
		text-align: center;
	}

	#sticky-cta .btn-solid-reg {
		display: block;
		max-width: 300px;
		margin: 0 auto;
	}

	body {
		padding-bottom: 4.5rem;
	}
}

/* ===== Единые отступы секций ===== */
/* Базовая тема задаёт секциям разные вертикальные отступы (от 3rem до 8rem),
   из-за чего промежутки между блоками неравномерные. Приводим к одному значению. */
.basic-1,
.basic-2,
.cards-1,
.cards-2,
.tabs {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

@media (max-width: 991px) {
	.basic-1,
	.basic-2,
	.cards-1,
	.cards-2,
	.tabs,
	#faq {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
}

/* Bootstrap .container в диапазоне 576–767px фиксируется в 540px — контент
   лендинга оказывается сжат, а по краям остаётся много пустого места.
   Делаем контейнеры лендинга «резиновыми» в этом диапазоне. Тарифы (.cards-2)
   исключены: там карточка сама тянется по ширине контейнера. Навбар и футер
   используют свои .container и не затрагиваются. */
@media (min-width: 576px) and (max-width: 767px) {
	.header .container,
	.basic-1 .container,
	.basic-2 .container,
	.cards-1 .container,
	.tabs .container,
	.mid-cta .container,
	#faq .container {
		max-width: 100%;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* ===== Выравнивание заголовков ===== */
/* Заголовки-вступления секций (на всю ширину) — строго по центру страницы. */
#problems .col-lg-12,
#documents .col-lg-12,
#data-safety .col-lg-12 {
	text-align: center;
}

/* Двухколоночные блоки «текст + картинка»: во всех секциях выравниваем текст
   по левому краю (в базовой теме basic-2 центрирует его внутри половины ширины,
   из-за чего заголовок выглядел смещённым от центра страницы). */
#price-list .text-container,
#warehouse .text-container,
#clients .text-container {
	text-align: left;
}

#price-list .text-container p,
#warehouse .text-container p,
#clients .text-container p {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Единый стиль маркеров списков в двухколоночных секциях. В теме .tabs и
   .basic-1 делают маркеры мелкими фиолетовыми, а .basic-2 (#price-list,
   #clients) оставляет крупные тёмные. Приводим к общему мелкому фиолетовому. */
#price-list .list-unstyled .fas,
#clients .list-unstyled .fas {
	color: #5f4dee;
	font-size: 0.5rem;
	line-height: 1.625rem;
}

#price-list .list-unstyled .media-body,
#clients .list-unstyled .media-body {
	margin-left: 0.625rem;
}

/* На узких экранах (одна колонка, без картинки сбоку) заголовки двухколоночных
   секций центрируем — иначе они «прыгают» относительно центрированных
   заголовков-вступлений остальных секций. Списки оставляем по левому краю. */
@media (max-width: 767px) {
	#orders .text-container,
	#price-list .text-container,
	#warehouse .text-container,
	#staff .text-container,
	#clients .text-container {
		text-align: center;
	}

	#orders .text-container .list-unstyled,
	#price-list .text-container .list-unstyled,
	#warehouse .text-container .list-unstyled,
	#staff .text-container .list-unstyled,
	#clients .text-container .list-unstyled {
		text-align: left;
	}
}

/* На телефоне (одноколоночная раскладка) ограничиваем ширину скриншотов,
   чтобы они не раздувались на всю ширину экрана. На планшете (>=768px)
   картинки уже живут в половинной колонке col-md-6. */
@media (max-width: 767px) {
	#orders .image-container img,
	#price-list .image-container img,
	#warehouse .image-container img,
	#staff .image-container img,
	#clients .image-container img {
		display: block;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ===== Карточки-секции (боли, решения, документы, контроль) ===== */
/* Заголовки с подзаголовком — уменьшаем разрыв между h2 и p-heading. */
#benefits .h2-heading,
#control .h2-heading {
	margin-bottom: 0.75rem;
}

#problems .p-heading,
#benefits .p-heading,
#documents .p-heading,
#control .p-heading {
	margin-bottom: 3rem;
}

.ss-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	max-width: 62rem;
	margin: 0 auto;
}

.ss-card {
	flex: 1 1 16rem;
	max-width: 18.5rem;
	display: flex;
	flex-direction: column;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid #ebebf2;
	border-radius: 0.875rem;
	padding: 1.75rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ss-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.ss-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	font-size: 1.25rem;
	margin-bottom: 1.125rem;
}

.ss-card__title {
	margin-bottom: 0.5rem;
	color: #333;
	font: 700 1.0625rem/1.4 "Open Sans", sans-serif;
}

.ss-card__text {
	margin-bottom: 0;
	color: #666;
	font-size: 0.9375rem;
	line-height: 1.5rem;
}

/* Боли — красный акцент */
.problem-card .ss-card__icon {
	background-color: rgba(220, 53, 69, 0.1);
	color: #dc3545;
}

/* Решения и ценность для руководителя — фирменный фиолетовый акцент */
.benefit-card .ss-card__icon {
	background-color: rgba(95, 77, 239, 0.1);
	color: #5f4def;
}

/* Документы — нейтральный синий акцент (отличаем «функцию» от боли/решения) */
.doc-card .ss-card__icon {
	background-color: rgba(59, 130, 246, 0.1);
	color: #3b82f6;
}

/* Блок документов: 4 карточки — компактная сетка 2×2 на десктопе. */
#documents .ss-grid {
	max-width: 40rem;
}

/* Контроль для руководителя: цветной фон, чтобы разбить череду белых секций. */
#control {
	background-color: #f3f7fd;
}

/* «Ваши данные под защитой»: сразу после блока идёт CTA — сближаем их. */
#data-safety {
	padding-bottom: 1.5rem;
}

/* На планшете и большом телефоне карточки заполняют ширину ровно в 2 колонки,
   а не висят узкой полосой (max-width 18.5rem) с большими пустыми полями по бокам. */
@media (max-width: 991px) {
	.ss-card {
		flex-basis: calc(50% - 0.75rem);
		max-width: none;
	}
}

/* На самых узких экранах карточка становится компактной: иконка в одну строку
   с заголовком, описание — строкой ниже. Это заметно снижает высоту карточки
   (иконка больше не занимает отдельную строку) и уменьшает объём прокрутки. */
@media (max-width: 575px) {
	.ss-card {
		flex-basis: 100%;
		max-width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 0.875rem;
		row-gap: 0.5rem;
		padding: 1.25rem;
	}

	.ss-card__icon {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.0625rem;
		margin-bottom: 0;
		flex: 0 0 auto;
	}

	.ss-card__title {
		flex: 1;
		margin-bottom: 0;
		font-size: 1rem;
	}

	.ss-card__text {
		flex-basis: 100%;
		margin: 0;
	}
}