/* ==================================================================
   ТАЙМЕР "МЫ ОТДЫХАЕМ"
   ================================================================== */
.work-timer-alert {
	background: rgba(255, 255, 255, 0.7) !important;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	border-left: 5px solid #3498db !important;
	border-radius: 16px !important;
	padding: 25px 30px !important;
	box-shadow: 0 10px 30px rgba(52, 152, 219, 0.1) !important;
	
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.timer-content {
	display: flex;
	align-items: center;
	max-width: 60%;
}
.timer-icon {
	font-size: 32px;
	color: #3498db;
	margin-right: 20px;
	opacity: 0.8;
}
.timer-text strong {
	display: block;
	font-size: 18px;
	color: #2c3e50;
	margin-bottom: 4px;
	text-transform: uppercase;
}
.timer-text p {
	margin: 0;
	font-size: 14px;
	color: #7f8c8d;
	line-height: 1.4;
}

.countdown-wrapper {
	display: flex;
	align-items: flex-start;
	background: rgba(52, 152, 219, 0.1);
	padding: 10px 20px;
	border-radius: 12px;
}

.time-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50px;
}

.time-number {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: #2c3e50;
	line-height: 1;
}

.time-label {
	font-size: 10px;
	text-transform: uppercase;
	color: #95a5a6;
	margin-top: 5px;
}

.time-separator {
	font-size: 28px;
	font-weight: 700;
	color: #3498db;
	margin: 0 5px;
	line-height: 1;
	animation: blink 1s infinite;
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

@media (max-width: 768px) {
	.work-timer-alert {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	.timer-content {
		max-width: 100%;
	}
	.countdown-wrapper {
		width: 100%;
		justify-content: center;
		margin-top: 10px;
	}
}

/* ==================================================================
   ЛЕВИТИРУЮЩИЙ БУДДА (ФОНОВЫЙ РЕЖИМ)
   ================================================================== */
.main-content-container {
	position: relative !important;
	z-index: 1;
}

.levitating-budda-container {
	position: absolute !important;
	top: 30px !important;
	left: 410px !important;
	width: 100% !important;
	height: 0 !important;
	
	z-index: 10 !important;
	pointer-events: none !important;
	
	display: flex !important;
	justify-content: center !important;
	overflow: visible !important;
	margin: 0 !important;
}

.levitating-budda-container .budda-decor {
	width: 500px !important;
	max-width: 90vw !important;
	height: auto !important;
	opacity: 0.6 !important;
	animation: buddaBackgroundFloat 6s ease-in-out infinite alternate !important;
}

@keyframes buddaBackgroundFloat {
	0% { transform: translateY(0); }
	100% { transform: translateY(-30px); }
}

@media (max-width: 767px) {
	.levitating-budda-container {
		top: 180px !important;
	}
	
	.levitating-budda-container .budda-decor {
		width: 320px !important;
		opacity: 0.6 !important;
	}
}

/* Общий блок позиционирования для текстов и форм поверх фона */
h1, 
h2, 
p,
.work-timer-alert,          
.sintez-contact-section,    
.alert,                     
form,
.breadcrumb {
	position: relative !important;
	z-index: 50 !important;
}

/* ==================================================================
   ПРАВКИ СТРАНИЦЫ "ПОРЯДОК РАБОТЫ"
   ================================================================== */
.glass-panel-wide {
	max-width: 100% !important;
}

@media (min-width: 992px) {
	.row-flex {
		display: flex;
		flex-wrap: wrap;
	}
	.row-flex > [class*='col-'] {
		display: flex;
		flex-direction: column;
	}
	.row-flex .info-card {
		width: 100%;
		flex: 1; 
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.row-flex .card-content {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.row-flex .card-content > div:last-child {
		margin-top: auto !important;
	}
}

.modern-check-list li {
	padding-left: 20px !important;
}

.modern-check-list li::before {
	content: "" !important;
	font-family: sans-serif !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, #1abc9c 0%, #1682ca 100%) !important;
	box-shadow: 0 2px 5px rgba(26, 188, 156, 0.4);
	position: absolute !important;
	left: 0 !important;
	top: 8px !important;
	font-size: 0 !important;
}

/* ==================================================================
   ТИПОГРАФИКА СТРАНИЦЫ "О КОМПАНИИ"
   ================================================================== */
.article-content-wrapper {
	max-width: 100% !important;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.7;
	color: #34495e;
}

.article-content-wrapper h1 {
	text-align: left;
	margin-bottom: 30px;
	font-size: 36px;
	color: #2c3e50;
}
.article-content-wrapper h2 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 24px;
	text-transform: uppercase;
	color: #2c3e50;
}
.article-content-wrapper h3 {
	margin-top: 30px;
	margin-bottom: 15px;
	font-size: 20px;
	color: #2c3e50;
	text-transform: uppercase;
}

.article-content-wrapper .hero-lead {
	font-size: 20px;
	font-weight: 300;
	color: #2c3e50;
	text-align: left;
	margin-bottom: 30px;
	line-height: 1.6;
}

.transparent-divider {
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
	margin: 30px 0;
}

.quote-block {
	border-left: 4px solid #1abc9c;
	padding: 10px 20px;
	margin: 25px 0;
	background: rgba(26, 188, 156, 0.05);
	font-style: italic;
	color: #57606f;
	border-radius: 0 10px 10px 0;
}

.highlight-text {
	background: linear-gradient(120deg, rgba(26, 188, 156, 0.2) 0%, rgba(26, 188, 156, 0) 100%);
	padding: 2px 5px;
	border-radius: 4px;
	font-weight: 500;
}

.modern-figure {
	margin: 40px auto !important; 
	max-width: 450px !important;
	width: 100% !important; 
	background: #fff !important;
	padding: 10px !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
	border: 1px solid rgba(0,0,0,0.03) !important;
}

.modern-figure img {
	width: 100% !important; 
	height: auto !important;
	border-radius: 8px !important;
	display: block !important;
}

.figure-caption-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 10px 5px;
	font-size: 13px;
	color: #7f8c8d;
	font-family: "Roboto Condensed", sans-serif;
	border-top: 1px solid #f0f0f0;
	margin-top: 10px;
}

.caption-credits {
	font-weight: 700;
	text-transform: uppercase;
	color: #95a5a6;
}
.caption-credits span { margin-right: 5px; font-size: 14px; }

.caption-text strong { color: #2c3e50; }

/* ==================================================================
   БЛОК ПРЕИМУЩЕСТВ (СТЕКЛО В СТЕКЛЕ)
   ================================================================== */
.advantages-glass-box {
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 16px;
	padding: 30px;
	margin: 40px 0;
	box-shadow: inset 0 0 20px rgba(26, 188, 156, 0.05);
}

@media (max-width: 768px) {
	.article-content-wrapper { font-size: 16px; }
	.modern-figure { margin: 30px 0; }
	.figure-caption-row { flex-direction: column; align-items: flex-start; gap: 5px; }
	.advantages-glass-box { padding: 20px; }
	.hero-h1 { font-size: 28px; }
}

/* ==================================================================
   НОВЫЙ БЛОК: ТЕКСТ СЛЕВА + ФОТО СПРАВА
   ================================================================== */
.hero-split-row {
	display: flex !important;
	align-items: flex-start !important; 
	justify-content: space-between !important;
	gap: 40px !important;
	margin-bottom: 40px !important;
}

.hero-split-text {
	margin-top: 10px !important;
	flex: 1 !important;
	min-width: 300px !important;
}

.hero-big-lead {
	font-size: 26px;
	line-height: 1.5;
	font-weight: 300;
	color: #2c3e50;
	margin: 0;
}

.hero-split-image {
	flex: 0 0 450px;
	max-width: 100%;
}

.hero-split-image .modern-figure {
	margin: 0 !important;
	max-width: 100% !important; 
	width: 100% !important;
}

@media (max-width: 991px) {
	.hero-split-row {
		flex-direction: column-reverse;
		gap: 20px;
	}
	
	.hero-split-image {
		flex: auto;
		width: 100%;
	}
	
	.hero-big-lead {
		font-size: 20px;
		text-align: left;
	}
}

/* ==================================================================
   АНИМАЦИЯ ШЕСТЕРЕНКИ (WATERMARK STYLE)
   ================================================================== */
.gear-watermark {
	position: absolute !important;
	bottom: -120px !important;
	right: -80px !important;
	font-size: 450px !important;
	line-height: 1 !important;
	color: #3498db !important;
	opacity: 0.1 !important;
	z-index: 0 !important;
	pointer-events: none;
	animation: spinGear 40s linear infinite !important;
}

@keyframes spinGear {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.glass-panel {
	position: relative;
	overflow: hidden !important; 
}

/* ==================================================================
   СОВРЕМЕННАЯ ТАБЛИЦА ТАРИФОВ (СТРОГИЙ СТИЛЬ)
   ================================================================== */
.glass-panel-full {
	padding: 0 !important; 
	overflow: hidden;      
	max-width: 100% !important; 
}

.modern-tariff-table {
	margin-bottom: 0 !important;
	width: 100%;
	border-collapse: collapse;
}

.modern-tariff-table th {
	background: rgba(26, 188, 156, 0.08);
	color: #2c3e50;
	font-family: "Roboto Condensed", sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 14px;
	padding: 20px 30px !important;
	border: none !important;
}

.modern-tariff-table td {
	padding: 25px 30px !important;
	vertical-align: middle !important;
	border-top: 1px solid rgba(0,0,0,0.03) !important;
	transition: background 0.3s ease;
}

.modern-tariff-table tr:hover td {
	background: rgba(255, 255, 255, 0.6);
}

.tariff-name {
	font-size: 20px;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 5px;
	font-family: "Roboto Condensed", sans-serif;
	text-transform: none;
}

.tariff-desc {
	font-size: 14px;
	color: #7f8c8d;
	font-weight: 400;
}

.price-cell {
	text-align: right;
	font-size: 20px;
	font-weight: 700;
	color: #2c3e50;
	white-space: nowrap;
}
.price-cell small {
	font-size: 14px;
	color: #95a5a6;
	font-weight: 400;
}
.price-cell.text-muted {
	color: #95a5a6;
	font-size: 16px;
	text-transform: uppercase;
}

.text-right { text-align: right; }

/* ==================================================================
   АДАПТИВ ТАБЛИЦЫ ТАРИФОВ (МОБИЛЬНАЯ ВЕРСИЯ)
   ================================================================== */
@media (max-width: 767px) {
	.modern-tariff-table thead {
		display: none !important;
	}

	.modern-tariff-table tr {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		background: transparent !important;
		border-bottom: 1px solid rgba(0,0,0,0.05) !important;
		padding: 20px 25px !important;
	}

	.modern-tariff-table td {
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
		border: none !important;
		background: transparent !important;
	}

	.modern-tariff-table td:first-child {
		margin-bottom: 10px !important;
	}

	.price-cell {
		text-align: left !important;
		font-size: 24px !important;
		color: #1abc9c !important;
		font-weight: 700 !important;
		padding-left: 0 !important;
	}

	.price-cell.text-muted {
		font-size: 18px !important;
		color: #95a5a6 !important;
		font-weight: 600 !important;
	}
	
	.glass-panel-full {
		border-radius: 12px !important;
	}
}

/* ==================================================================
   БЛОК "ЧТО ВХОДИТ В ПОДДЕРЖКУ" (СИНИЙ)
   ================================================================== */
.reasons-blue-block {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #3498DC 0%, #2574a9 100%);
	border-radius: 20px;
	padding: 45px 50px;
	margin: 40px 0;
	color: #ffffff;
	box-shadow: 0 15px 40px rgba(52, 152, 220, 0.3);
}

.reasons-blue-block h2 {
	color: #ffffff !important;
	margin-top: 0;
	margin-bottom: 35px;
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
}

.reasons-blue-block .reasons-content {
	position: relative;
	z-index: 2;
	max-width: 75%;
}

.reasons-blue-block .custom-icon-list {
	margin: 0;
	padding: 0;
	list-style: none !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 40px;
}

.reasons-blue-block .custom-icon-list li {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start;
	color: #ffffff !important;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 40px;
}

.reasons-blue-block .custom-icon-list li::before,
.reasons-blue-block .custom-icon-list li::after {
	content: none !important;
	display: none !important;
}

.reasons-blue-block .custom-icon-list .fui-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	width: 30px;
	height: 30px;
	margin-right: 15px !important;
	margin-top: 0 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	flex-shrink: 0;
}

.reasons-blue-block .reasons-bg-decor {
	opacity: 0.6;
}

@media (max-width: 991px) {
	.reasons-blue-block .reasons-content {
		max-width: 100%; 
	}
}

@media (max-width: 768px) {
	.reasons-blue-block {
		padding: 30px 25px;
	}
	
	.reasons-blue-block h2 {
		font-size: 24px;
		margin-bottom: 25px;
	}

	.reasons-blue-block .custom-icon-list {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	.reasons-blue-block .custom-icon-list li {
		font-size: 15px;
		min-height: auto;
	}
}

/* ==================================================================
   НАСТРОЙКА КАРТИНОК ДЛЯ БЛОКОВ
   ================================================================== */
.reasons-teal-block .reasons-bg-decor {
	background-image: url('/bitrix/templates/.default/images/advantages-2.png'); 
	width: 550px;
	height: 550px;
	top: 30%;
	right: 50px;
	opacity: 0.25;
}

.reasons-blue-block .reasons-bg-decor {
	background-image: url('/bitrix/templates/.default/images/piramide.png');
	width: 250px;
	height: 250px;
	top: 30%;
	right: 50px;
	opacity: 0.25;
}

/* ==================================================================
   КНОПКИ В ПОДВАЛЕ
   ================================================================== */
.cta-buttons-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.btn-telegram {
	background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%) !important;
	color: white !important;
	border: none !important;
	box-shadow: 0 10px 20px rgba(42, 171, 238, 0.3) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.btn-telegram:hover {
	background: linear-gradient(135deg, #229ED9 0%, #1e8bbd 100%) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 15px 30px rgba(42, 171, 238, 0.4) !important;
	color: white !important;
	text-decoration: none !important;
}

.btn-telegram svg {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	fill: white;
	transition: transform 0.3s ease;
}

.btn-telegram:hover svg {
	transform: translate(2px, -2px);
}

@media (max-width: 600px) {
	.cta-buttons-wrapper {
		flex-direction: column;
		gap: 15px;
	}
	
	.cta-buttons-wrapper .btn-hero {
		width: 100%;
	}
}

/* ==================================================================
   ТАБЛИЦА СТЕКЛЯННАЯ (БАЗОВЫЕ СТИЛИ)
   ================================================================== */
.modern-glass-table {
	width: 100%;
	border-collapse: collapse;
}
.modern-glass-table th {
	background: rgba(26, 188, 156, 0.1);
	color: #16a085;
	font-weight: 700;
	text-transform: uppercase;
	padding: 15px 20px;
	text-align: left;
	font-size: 13px;
}
.modern-glass-table td {
	padding: 15px 20px;
	border-bottom: 1px solid rgba(0,0,0,0.05);
	color: #2c3e50;
	font-size: 15px;
}
.modern-glass-table tr:last-child td {
	border-bottom: none;
}
.modern-glass-table td:not(:first-child) {
	font-weight: 700;
	color: #2c3e50;
}

/* ==================================================================
   БЛОК ПРЕИМУЩЕСТВ (3 В РЯД)
   ================================================================== */
.glass-pill-title {
	display: inline-block;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	padding: 15px 40px;
	border-radius: 50px;
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	color: #2c3e50;
	box-shadow: 0 10px 30px rgba(0,0,0,0.05);
	border: 1px solid rgba(255,255,255,0.6);
}

.vps-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-bottom: 60px;
}

.vps-feature-card {
	text-align: center;
	padding: 10px;
}

.vps-icon-circle {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	margin: 0 auto 25px auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	color: #fff;
	box-shadow: 0 15px 30px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
}

.vps-feature-card:hover .vps-icon-circle {
	transform: translateY(-5px) scale(1.05);
}

.vps-icon-circle.teal { background: linear-gradient(135deg, #1abc9c, #16a085); }
.vps-icon-circle.blue { background: linear-gradient(135deg, #3498db, #2980b9); }
.vps-icon-circle.purple { background: linear-gradient(135deg, #9b59b6, #8e44ad); }

.vps-feature-card h3 {
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	color: #2c3e50;
	margin-bottom: 15px;
}

.vps-feature-card p {
	font-size: 14px;
	line-height: 1.6;
	color: #7f8c8d;
}

@media (max-width: 991px) {
	.vps-features-grid {
		grid-template-columns: 1fr;
		gap: 50px;
	}
	
	.glass-pill-title {
		font-size: 14px;
		padding: 12px 20px;
		width: 100%;
		box-sizing: border-box;
		margin-top: 20px;
	}
}

/* ==================================================================
   ТЕМНЫЕ КАРТОЧКИ С ФОНОВОЙ ИКОНКОЙ
   ================================================================== */
.dark-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 40px;
}

.dark-feature-card {
	background-color: #34495e;
	color: #fff;
	border-radius: 16px;
	padding: 30px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 15px 35px rgba(52, 73, 94, 0.25);
	transition: transform 0.3s ease;
	min-height: 280px;
	display: flex;
	flex-direction: column;
}

.dark-feature-card:hover {
	transform: translateY(-5px);
}

.card-bg-icon {
	position: absolute;
	bottom: -20px;
	right: -20px;
	font-size: 140px;
	color: #fff;
	opacity: 0.07;
	transform: rotate(-15deg);
	z-index: 1;
	pointer-events: none;
}

.card-content-wrap {
	position: relative;
	z-index: 2;
}

.card-small-icon {
	font-size: 28px;
	color: #1abc9c;
	margin-bottom: 20px;
}

.dark-feature-card h4 {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 2px solid rgba(26, 188, 156, 0.5);
	display: inline-block;
}

.dark-feature-card p {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

.dark-card-list {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.8;
}

@media (max-width: 991px) {
	.dark-features-grid {
		grid-template-columns: 1fr;
	}
	.card-bg-icon {
		font-size: 100px;
	}
}

/* ==================================================================
   АДАПТИВ ТАБЛИЦЫ ЦЕН (МОБИЛЬНАЯ ВЕРСИЯ - КАРТОЧКИ)
   ================================================================== */
@media (max-width: 768px) {
	.modern-glass-table thead {
		display: none;
	}

	.modern-glass-table, 
	.modern-glass-table tbody, 
	.modern-glass-table tr, 
	.modern-glass-table td {
		display: block;
		width: 100%;
	}

	.modern-glass-table tr {
		background: rgba(255, 255, 255, 0.4);
		margin-bottom: 20px;
		border-radius: 15px;
		padding: 20px;
		border: 1px solid rgba(255,255,255,0.5);
	}
	
	.modern-glass-table td {
		border-bottom: none !important;
		padding: 5px 0 !important;
		text-align: left !important;
	}

	.modern-glass-table td:first-child {
		margin-bottom: 10px;
	}

	.modern-glass-table td:nth-child(2) {
		font-size: 14px !important;
		font-weight: 800 !important;
		color: #1abc9c;
		margin-bottom: 15px;
	}
	
	.modern-glass-table td:last-child {
		margin-top: 10px;
	}
	
	.modern-glass-table .btn {
		width: 100%;
		display: block;
		padding: 12px 0;
	}
}

.footer {
	padding: 30px 15px 50px !important;
}

/* ==================================================================
   ФИКС МОБИЛЬНОЙ ТАБЛИЦЫ ДОМЕНОВ
   ================================================================== */
@media (max-width: 768px) {
	.modern-glass-table.domain-prices td:nth-child(2) {
		margin-bottom: 5px !important;
	}
	
	.modern-glass-table.domain-prices td:nth-child(2)::before {
		content: "Регистрация:";
		display: block;
		font-size: 11px;
		color: #95a5a6;
		text-transform: uppercase;
		font-weight: 700;
		margin-bottom: 2px;
		line-height: 1;
	}

	.modern-glass-table.domain-prices td:nth-child(3) {
		font-size: 18px !important;
		font-weight: 700 !important;
		color: #2c3e50;
		padding-top: 5px !important;
	}

	.modern-glass-table.domain-prices td:nth-child(3)::before {
		content: "Продление:";
		display: block;
		font-size: 11px;
		color: #95a5a6;
		text-transform: uppercase;
		font-weight: 700;
		margin-bottom: 2px;
		line-height: 1;
		margin-top: 10px;
	}
}

/* ==================================================================
   ФИКС ОТСТУПОВ МЕЖДУ БЛОКАМИ (MOBILE)
   ================================================================== */
@media (max-width: 768px) {
	.glass-panel + .glass-panel {
		margin-top: 40px !important;
	}
	
	.glass-panel {
		margin-bottom: 30px !important;
	}
}

/* ==================================================================
   БЛОК КНОПОК CTA (Подвал / Контакты)
   ================================================================== */

/* 1. Контейнер: выстраиваем кнопки в ряд по центру */
.cta-buttons-wrapper {
	display: flex;
	justify-content: center; /* Центрирование по горизонтали */
	align-items: center;     /* Выравнивание по вертикали */
	gap: 20px;               /* Расстояние между кнопками */
	flex-wrap: wrap;         /* Перенос на новую строку на мобильных */
	margin-top: 25px;
}

/* 2. Настройка самих кнопок */
.cta-buttons-wrapper .btn-hero {
	min-width: 290px;        /* <-- ГЛАВНОЕ: Задает одинаковую ширину */
	
	/* Flexbox внутри кнопки для выравнивания иконки и текста */
	display: inline-flex;    
	align-items: center;
	justify-content: center;
	
	padding: 16px 20px;      /* Отступы внутри */
	box-sizing: border-box;  /* Чтобы padding не увеличивал ширину */
}

/* 3. Кнопка Telegram (Синяя) */
.btn-telegram {
	background: #29a9ea;     /* Официальный цвет Telegram */
	color: #ffffff !important;
	border: none;
	box-shadow: 0 10px 20px rgba(41, 169, 234, 0.3);
}

.btn-telegram:hover {
	background: #2095d1;
	color: #ffffff !important;
	transform: translateY(-3px);
	box-shadow: 0 15px 30px rgba(41, 169, 234, 0.4);
}

/* 4. Иконка внутри кнопки */
.btn-telegram svg {
	width: 20px;             /* Размер иконки */
	height: 20px;
	margin-right: 12px;      /* Отступ от текста */
	fill: #ffffff;           /* Цвет иконки */
	flex-shrink: 0;          /* Чтобы иконку не сжимало */
	position: relative;
	top: -1px;               /* Оптическая коррекция по высоте */
}

/* 5. Адаптив для мобильных (Кнопки во всю ширину) */
@media (max-width: 767px) {
	.cta-buttons-wrapper {
		gap: 15px;
		flex-direction: column; /* Кнопки друг под другом */
	}
	
	.cta-buttons-wrapper .btn-hero {
		width: 100%;         /* Растягиваем на 100% */
		min-width: 0;        /* Сбрасываем фиксацию */
	}
}

/* ==================================================================
   СТРАНИЦА БИТРИКС24 (Карточки функций)
   ================================================================== */

.glass-grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 30px;
}

.feature-icon {
	font-size: 36px;
	color: #1abc9c;
	margin-bottom: 15px;
}

.feature-title {
	font-size: 18px;
	font-weight: 700;
	color: #2c3e50;
	margin: 0 0 10px 0;
}

.feature-text {
	font-size: 14px;
	color: #7f8c8d;
	line-height: 1.5;
	margin: 0;
}

/* ==================================================================
   ЭЛЕМЕНТЫ ТАБЛИЦ (Типографика)
   ================================================================== */

/* Названия тарифов */
.plan-name {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: #2c3e50;
	margin-bottom: 5px;
}

.plan-name.highlight {
	color: #1abc9c;
}

/* Цены */
.plan-price {
	font-size: 16px;
	color: #57606f;
	font-weight: 400;
}

.plan-price.highlight {
	font-weight: 700;
	color: #2c3e50;
}

/* Галочки */
.text-success {
	color: #27ae60 !important;
	font-size: 18px;
}

/* ==================================================================
   МАТРИЦА ТАРИФОВ (Базовые стили для ПК)
   ================================================================== */

/* Контейнер прокрутки */
.table-scroll-wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 10px;
	margin-bottom: 20px;
	border-radius: 16px;
	scrollbar-width: thin; /* Тонкий скроллбар для Firefox */
}

/* Основная таблица */
.matrix-table {
	table-layout: fixed !important; /* Фиксированная ширина колонок */
	width: 100% !important;
	min-width: 800px !important;    /* Минимальная ширина, чтобы на мобильных включался скролл */
	margin-bottom: 0 !important;
}

/* Выравнивание колонок (40% + 20% + 20% + 20%) */
.matrix-table th:first-child,
.matrix-table td:first-child {
	width: 40% !important;          /* Первая колонка широкая */
	text-align: left !important;
	padding-left: 25px !important;
}

.matrix-table th:not(:first-child),
.matrix-table td:not(:first-child) {
	width: 20% !important;          /* Остальные равные */
	text-align: center !important;
	vertical-align: middle !important;
}

/* Центрирование заголовков тарифов */
.matrix-table thead th {
	text-align: center !important;
}
/* Возвращаем левое выравнивание для заголовка "Функционал" */
.matrix-table thead th:first-child {
	text-align: left !important;
}

/* ==================================================================
   АДАПТИВНОСТЬ И МОБИЛЬНЫЕ ФИКСЫ
   ================================================================== */

/* Фикс для таблицы Маркет Плюс (чтобы цены не переносились) */
@media (max-width: 768px) {
	.modern-glass-table td {
		white-space: nowrap !important;
	}
	
	/* Разрешаем перенос только для длинных названий в первой колонке */
	.modern-glass-table td:first-child {
		white-space: normal !important;
		line-height: 1.3;
	}

	.modern-glass-table td, 
	.modern-glass-table th {
		padding: 12px 10px !important;
	}
}

/* Финальный фикс для Матрицы тарифов (Простой скролл) */
@media (max-width: 991px) {
	/* 1. Гарантируем скролл */
	.table-scroll-wrapper {
		display: block !important;
		width: 100% !important;
		overflow-x: auto !important;
	}

	/* 2. Отключаем "карточный вид" и "липкие" колонки для стабильности */
	.matrix-table td:first-child,
	.matrix-table th:first-child {
		position: static !important;
		background: transparent !important;
		border-right: none !important;
		z-index: auto !important;
		width: auto !important; /* Сбрасываем ширину на авто внутри скролла */
	}

	/* 3. Настройка ячеек для читаемости на телефоне */
	.matrix-table td, 
	.matrix-table th {
		white-space: normal !important;
		vertical-align: middle !important;
		padding: 10px 5px !important;
	}
	
	/* Минимальная ширина, чтобы колонки не схлопывались */
	.matrix-table .feature-col {
		min-width: 150px !important;
	}
}

/* ==================================================================
   ТЕМНЫЙ БЛОК ТАРИФОВ (SINTEZ STYLE) - ФИНАЛЬНАЯ ВЕРСИЯ
   ================================================================== */

.pricing-dark-section {
	width: 100%;
	margin-bottom: 60px;
	margin-top: 40px;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	width: 100%;
}

/* --- КАРТОЧКА --- */
.pricing-card {
	background: #2c3e50; /* Темно-синий фон */
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 35px 30px;
	color: #fff;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Эффект при наведении */
.pricing-card:hover,
.pricing-card.card-featured {
	border-color: #1abc9c; /* Бирюзовая рамка */
	box-shadow: 0 15px 40px rgba(26, 188, 156, 0.15);
	transform: translateY(-5px);
	z-index: 2;
	background: #34495e; /* Чуть светлее */
}

/* --- ШАПКА КАРТОЧКИ (Фиксированная высота для выравнивания) --- */
.pricing-card .card-header {
	margin-bottom: 25px;
	text-align: center;
	min-height: 110px; /* Чтобы заголовки были на одной линии */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.pricing-card h3 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 28px;
	font-weight: 700;
	margin: 15px 0 10px;
	color: #fff;
	text-transform: none;
}

.pricing-card .sub-text {
	color: #bdc3c7;
	font-size: 14px;
	margin: 0;
}

/* --- БЕЙДЖИ --- */
.badge-row {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.p-badge {
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
	text-transform: uppercase;
}

.badge-blue { background-color: #3498db; color: #fff; }
.badge-pink { background-color: #e74c3c; color: #fff; }

/* --- БЛОК ЦЕНЫ (Фиксированная высота для выравнивания кнопок) --- */
.price-block {
	min-height: 140px; /* Место и для цен, и для текста "По запросу" */
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 20px;
}

.main-price-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 5px;
}

.current-price {
	font-size: 32px;
	font-weight: 700;
	color: #1abc9c; /* Ваш бирюзовый */
}

.old-price {
	font-size: 16px;
	color: #95a5a6;
	text-decoration: line-through;
}

.year-price {
	font-size: 12px;
	color: #ecf0f1;
	border: 1px solid #7f8c8d;
	padding: 3px 8px;
	border-radius: 6px;
	margin-left: auto;
}

.price-desc {
	font-size: 14px;
	color: #ecf0f1;
	line-height: 1.4;
	text-align: left;
}

.custom-price-title {
	font-size: 28px;
	color: #1abc9c;
	line-height: 1.2;
	text-align: left;
	margin-top: 10px;
	font-weight: 700;
}

/* --- КНОПКИ --- */
.btn-pricing {
	display: block;
	width: 100%;
	padding: 14px 0;
	text-align: center;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none !important;
	transition: all 0.3s ease;
	margin-bottom: 30px;
	text-transform: uppercase;
}

.btn-teal {
	background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
	color: #fff !important;
	border: none;
	box-shadow: 0 5px 15px rgba(26, 188, 156, 0.3);
}

.btn-teal:hover {
	background: linear-gradient(135deg, #1dd1ad 0%, #1abc9c 100%);
	box-shadow: 0 10px 25px rgba(26, 188, 156, 0.4);
	transform: translateY(-2px);
}

.btn-outline {
	background: transparent;
	color: #fff !important;
	border: 2px solid #7f8c8d;
}

.btn-outline:hover {
	border-color: #fff;
	background: rgba(255,255,255,0.1);
}

/* --- СПИСОК ФУНКЦИЙ (С фиксом иконок) --- */
.pricing-features {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	text-align: left;
	flex-grow: 1;
}

/* Сброс глобального стиля (зеленой точки), если есть */
.pricing-features li::after {
	content: none !important;
	display: none !important;
}

.pricing-features li {
	display: flex !important;           /* Иконка и текст в ряд */
	align-items: flex-start !important; /* Прижаты к верху */
	position: relative;
	padding: 0 !important;
	margin: 0 0 12px 0 !important;
	font-size: 14px;
	color: #ecf0f1;
	line-height: 1.5;
	background: none !important;
}

/* Галочка (Иконка) */
.pricing-features li::before {
	content: "" !important;
	display: block !important;
	flex-shrink: 0 !important; /* Не сжимать иконку */
	
	width: 20px !important;
	height: 20px !important;
	margin-right: 12px !important;
	margin-top: 3px !important; /* Оптическая коррекция по высоте */
	
	/* SVG галочка цвета #1abc9c */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231abc9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E") !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	position: static !important;
	border: none !important;
}

.pricing-features li.feature-plus {
	color: #1abc9c;
	font-weight: 700;
}

.pricing-features .soon {
	font-size: 10px;
	color: #95a5a6;
	margin-left: 5px;
	text-transform: uppercase;
	border: 1px solid #7f8c8d;
	padding: 1px 4px;
	border-radius: 3px;
}

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
	.pricing-grid {
		grid-template-columns: 1fr;
	}
	.pricing-card {
		margin-bottom: 20px;
	}
}

@media (max-width: 768px) {
	/* На мобильных разрешаем блокам сжиматься по высоте контента */
	.pricing-card .card-header,
	.pricing-card .price-block {
		min-height: auto !important;
	}
}

/* ==================================================================
   ВЫРАВНИВАНИЕ БЛОКОВ ПО ВЫСОТЕ (ЧТОБЫ КНОПКИ БЫЛИ В РЯД)
   ================================================================== */

/* 1. Выравниваем шапку (Название тарифа + подпись) */
.pricing-card .card-header {
	min-height: 110px !important; /* Фиксируем высоту */
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
}

/* 2. Выравниваем блок цены (Цифры vs "По запросу") */
.pricing-card .price-block {
	min-height: 150px !important; /* Увеличили, чтобы влезли все варианты цен */
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important; /* Центрируем контент внутри блока */
	margin-bottom: 20px !important;
}

/* 3. Гарантируем, что сами карточки одинаковой высоты */
.pricing-card {
	height: 100% !important;
}

/* 4. Сброс для мобильных телефонов (там выравнивание не нужно) */
@media (max-width: 768px) {
	.pricing-card .card-header,
	.pricing-card .price-block {
		min-height: auto !important;
		height: auto !important;
	}
}
/* ==================================================================
   ФИНАЛЬНЫЙ СТИЛЬ КАРТЫ САЙТА (SITEMAP GLASS)
   ================================================================== */

/* 1. НАСТРОЙКА СЕТКИ (ТАБЛИЦЫ) */
.map-columns {
	width: 100% !important;
	border-collapse: collapse !important;
	table-layout: fixed !important;
	margin-bottom: 40px !important;
}

/* Добавляем "воздух" между колонками (по 15px с каждой стороны = 30px) */
.map-columns td {
	vertical-align: top !important;
	padding: 0 15px !important; 
	box-sizing: border-box !important;
}

/* Убираем отступ у крайней левой колонки (чтобы было ровно по краю сайта) */
.map-columns td:first-child {
	padding-left: 0 !important;
}

/* Убираем отступ у крайней правой колонки */
.map-columns td:last-child {
	padding-right: 0 !important;
}

/* 2. СБРОС СТАНДАРТНЫХ СПИСКОВ */
ul.map-level-0 {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

/* 3. ОФОРМЛЕНИЕ КАРТОЧКИ РАЗДЕЛА (Стекло) */
.map-level-0 > li {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 20px;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.03);
	
	/* Важные отступы внутри карточки */
	padding: 30px 35px !important;
	margin-bottom: 30px !important;
	
	list-style: none !important;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Эффект при наведении на карточку */
.map-level-0 > li:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
	background: rgba(255, 255, 255, 0.85);
}

/* --- ВАЖНО: УБИРАЕМ ЗЕЛЕНУЮ ТОЧКУ У ЗАГОЛОВКА --- */
.map-level-0 > li::after {
	content: none !important;
	display: none !important;
}

/* 4. ЗАГОЛОВКИ РАЗДЕЛОВ (Услуги, Компания) */
.map-level-0 > li > a {
	display: block;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: #2c3e50;
	text-transform: uppercase;
	text-decoration: none;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid #1abc9c; /* Бирюзовая линия */
}

/* Описание раздела (если есть) */
.map-level-0 > li > div {
	font-size: 14px;
	color: #95a5a6;
	margin-bottom: 20px;
	font-style: italic;
}

/* 5. ССЫЛКИ ВНУТРИ (Пункты меню) */
.map-level-1 {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

.map-level-1 li {
	margin-bottom: 8px !important;
	padding-left: 0 !important; /* Убираем лишние отступы */
}

/* Скрываем точку и у внутренних ссылок, чтобы было чисто */
.map-level-1 li::after {
	content: none !important;
}

.map-level-1 a {
	display: flex;
	align-items: center;
	color: #57606f;
	font-size: 15px;
	text-decoration: none;
	transition: all 0.2s ease;
	padding: 5px 0;
}

/* Эффект при наведении на ссылку (Сдвиг + Цвет) */
.map-level-1 a:hover {
	color: #1abc9c;
	transform: translateX(5px);
}

/* Стрелочка при наведении */
.map-level-1 a::before {
	content: "→";
	display: inline-block;
	margin-right: 10px;
	font-weight: bold;
	color: #1abc9c;
	opacity: 0;
	transform: translateX(-10px);
	transition: all 0.2s ease;
	width: 0; 
}

.map-level-1 a:hover::before {
	opacity: 1;
	transform: translateX(0);
	width: 20px;
}

/* 6. АДАПТИВНОСТЬ (МОБИЛЬНАЯ ВЕРСИЯ) */
@media (max-width: 768px) {
	.map-columns, 
	.map-columns tbody, 
	.map-columns tr, 
	.map-columns td {
		display: block !important;
		width: 100% !important;
		padding: 0 !important; /* Сбрасываем боковые отступы */
	}
	
	.map-columns td {
		margin-bottom: 20px !important;
	}
	
	.map-level-0 > li {
		padding: 25px 20px !important; /* Чуть компактнее на телефоне */
	}
}
/* Контейнер для кнопок-таблеток */
.contact-buttons-row.matrix-style {
	display: flex;
	gap: 15px;
	margin-top: 25px;
	justify-content: center;
}

/* Общий стиль таблетки */
.matrix-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	
	/* Одинаковый размер для обеих кнопок */
	flex: 1;
	min-width: 140px;
	height: 48px;
	
	/* Форма таблетки */
	border-radius: 24px; 
	
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none !important;
	color: #fff !important;
	
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Синяя таблетка */
.matrix-pill.pill-blue {
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}
.matrix-pill.pill-blue:hover {
	box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
}

/* Красная таблетка */
.matrix-pill.pill-red {
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}
.matrix-pill.pill-red:hover {
	box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
}

/* Иконки внутри таблеток */
.pill-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* Эффекты при наведении */
.matrix-pill:hover {
	transform: scale(1.05); /* Легкое увеличение */
	filter: brightness(1.1);
}

.matrix-pill:active {
	transform: scale(0.98);
}

/* Убираем жесткое ограничение ширины, чтобы блок встал по сетке сайта */
.faq-section {
	width: 100%; /* Растягиваем на всю доступную ширину контейнера */
	margin: 40px 0;
	font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: #333;
}

/* Настраиваем главный заголовок секции */
.faq-section h2 {
	color: #0056b3;
	border-bottom: 1px solid #d1e3f8; /* Сделал линию чуть нежнее, под цвет фона */
	padding-bottom: 15px;
	margin-bottom: 30px;
	font-size: 3rem; /* Чуть уменьшили размер */
	text-transform: uppercase; /* Делаем все буквы заглавными */
	font-weight: 500;
}

/* Настраиваем заголовки самих вопросов в карточках */
.faq-item h3 {
	margin-top: 0;
	color: #222;
	font-size: 2rem; /* Уменьшили размер шрифта, чтобы смотрелось аккуратнее */
	text-transform: uppercase; /* Делаем заглавными, как на скриншоте */
	font-weight: 600;
	display: flex;
	align-items: center;
	line-height: 1.4;
}

/* Иконка вопроса (оставляем как есть, только чуть выравниваем) */
.faq-item h3::before {
	content: "?";
	display: inline-block;
	width: 28px;
	height: 28px;
	background: #0056b3;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 28px;
	margin-right: 15px;
	font-size: 1rem;
	flex-shrink: 0;
	text-transform: none; /* Чтобы вопросительный знак не искажался */
}

.faq-item ul {
	margin-top: 15px;
	padding-left: 20px;
}

.faq-item li {
	margin-bottom: 10px;
	line-height: 1.6;
}

.faq-item strong {
	color: #000;
}

/* Оформление блока про Битрикс24 (отличие) */
.faq-item blockquote {
	border-left: 4px solid #00aeef; /* Цвет Битрикс24 */
	background: #f9f9f9;
	padding: 10px 20px;
	margin: 15px 0;
}