/* =======================================================
   main_content-dark.css
   Dark-оформление контента

   Этот файл отвечает только за контентный слой.
   Он подключается поверх:
   - main_content.css  -> геометрия / сетки / базовые модули
   - carcass-dark.css  -> оболочка страницы, общий фон, header, footer

   В этом файле:
   - dark-цвета типографики контента
   - dark-поверхности базовых модулей конструктора
   - dark-стили форм / карточек / кнопок конструктора
   - визуал конкретной посадочной страницы
     (hero, media, install-media, section-card, faq, form, kv, btn)

   В этом файле НЕТ:
   - геометрии header / footer / overall shell
   - глобального фонового градиента сайта
   - mobile/desktop логики меню
   - каркасных flex/grid-правил конструктора

   Важно:
   - если нужно изменить оболочку сайта, иди в carcass-dark.css
   - если нужно изменить структуру контента, иди в main_content.css
   - если нужно перекрасить именно контентные блоки, работай здесь
======================================================= */

:root{
	--bg:#0b1020;
	--bg2:#0e1630;
	--card:#101b36;
	--card2:#0f1a33;
	--text:#e7ecff;
	--muted:#a8b2d6;
	--line:rgba(231,236,255,.12);
	--accent:#78a6ff;
	--accent2:#6ef3d6;
	--warn:#ffd36e;
	--ok:#6ef3d6;

	--shadow: 0 10px 30px rgba(0,0,0,.35);
}


/* =======================================================
   [01] ОБЩИЙ ТЕКСТ КОНТЕНТА
======================================================= */

.content {
	color: var(--text);
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	color: var(--text);
}

.content p,
.content li,
.content small,
.content blockquote {
	color: var(--text);
}

.content .muted,
.main_muted,
.lead,
.main_lead,
.fact span,
.main_fact span {
	color: var(--muted);
}


/* =======================================================
   [02] ССЫЛКИ
======================================================= */

.content a {
	color: inherit;
}

.content a:hover {
	opacity: 1;
}


/* =======================================================
   [03] БАЗОВЫЕ ФОНЫ СЕКЦИЙ
======================================================= */

.content > section,
.content .main_section {
	background: transparent;
}

.main_section-alt {
	background: rgba(11,16,32,.18);
}


/* =======================================================
   [04] ПОВЕРХНОСТИ БАЗОВЫХ МОДУЛЕЙ КОНСТРУКТОРА
======================================================= */

.main_surface {
	background: rgba(16,27,54,.48);
	border: 1px solid rgba(231,236,255,.12);
	box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

.main_surface-soft {
	background: rgba(11,16,32,.35);
	border: 1px solid rgba(231,236,255,.12);
}


/* =======================================================
   [05] ЦИТАТЫ И РАЗДЕЛИТЕЛИ
======================================================= */

.content blockquote {
	background: rgba(11,16,32,.35);
	border: 1px solid rgba(231,236,255,.12);
}

.content hr,
.main_divider {
	background: var(--line);
}


/* =======================================================
   [06] КНОПКИ КОНСТРУКТОРА
======================================================= */

.main_button {
	color: var(--text);
	background: rgba(16,27,54,.55);
	border-color: rgba(231,236,255,.14);
	box-shadow: 0 8px 18px rgba(0,0,0,.18);
	transition:
		transform .06s ease,
		background .2s ease,
		border-color .2s ease,
		color .2s ease;
}

.main_button:hover {
	background: rgba(16,27,54,.68);
}

.main_button:active {
	transform: translateY(1px);
}


/* =======================================================
   [07] КАРТОЧКИ КОНСТРУКТОРА
======================================================= */

.main_card {
	background: rgba(16,27,54,.48);
	border: 1px solid rgba(231,236,255,.12);
	box-shadow: 0 10px 22px rgba(0,0,0,.22);
}


/* =======================================================
   [08] ФОРМЫ КОНСТРУКТОРА
======================================================= */

.main_input,
.main_textarea,
.main_select {
	color: var(--text);
	background: rgba(11,16,32,.45);
	border-color: rgba(231,236,255,.14);
	outline: none;
	font-size: 14px;
}

.main_input::placeholder,
.main_textarea::placeholder {
	color: rgba(168,178,214,.65);
}

.main_label {
	color: var(--muted);
	font-size: 12px;
}


/* =======================================================
   [09] СЛУЖЕБНЫЕ ПАНЕЛИ
======================================================= */

.main_list-item,
.main_media,
.main_form {
	background: transparent;
}


/* =======================================================
   [10] КНОПКИ ПОСАДОЧНОЙ
======================================================= */

.content .btn,
.main_cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 14px;
	border: 1px solid rgba(231,236,255,.14);
	background: rgba(16,27,54,.55);
	color: var(--text);
	font-weight: 600;
	font-size: 13px;
	box-shadow: 0 8px 18px rgba(0,0,0,.18);
	cursor: pointer;
	transition:
		transform .06s ease,
		background .2s ease,
		border-color .2s ease,
		color .2s ease,
		box-shadow .2s ease;
	user-select: none;
}

.content .btn:hover,
.main_cta:hover {
	background: rgba(16,27,54,.68);
}

.content .btn:active,
.main_cta:active {
	transform: translateY(1px);
}

.content .btn.primary,
.main_cta-primary {
	background: linear-gradient(135deg, rgba(120,166,255,.95), rgba(110,243,214,.75));
	border-color: rgba(255,255,255,0);
	color: #051022;
}

.content .btn.ghost,
.main_cta-ghost {
	background: transparent;
	border-color: rgba(231,236,255,.18);
	color: var(--text);
	box-shadow: none;
}


/* =======================================================
   [11] HERO

   Визуал первого сектора:
   - верхняя карточка с H1
   - нижняя карточка с текстом
   - правая карточка с изображением

   Важно:
   - здесь только оформление
   - геометрия hero-layout живёт в main_content.css
======================================================= */

.hero-title-card,
.hero-text-card,
.hero-media-card,
.main_hero-title-card,
.main_hero-text-card,
.main_hero-media-card {
	border: 1px solid rgba(231,236,255,.12);
	background: linear-gradient(180deg, rgba(16,27,54,.70), rgba(14,22,48,.55));
	box-shadow: var(--shadow);
}

.badge,
.main_badge {
	border: 1px solid rgba(231,236,255,.14);
	background: rgba(11,16,32,.35);
	color: var(--muted);
}

.badge b,
.main_badge b {
	color: var(--text);
	font-weight: 700;
}

.hero h1,
.main_hero h1 {
	margin: 0;
	font-size: var(--content-h1);
	line-height: 1.15;
	letter-spacing: -.02em;
}

.fact,
.main_fact {
	border: 1px solid rgba(231,236,255,.12);
	background: rgba(11,16,32,.35);
}


/* =======================================================
   [11A] HERO-МЕДИА

   Поверх картинки даём лёгкое затемнение,
   чтобы верхняя pill и нижняя подпись читались устойчиво.
======================================================= */

.hero-media,
.main_hero-media {
	background:
		radial-gradient(600px 260px at 30% 30%, rgba(120,166,255,.10), transparent 55%),
		radial-gradient(600px 260px at 75% 45%, rgba(110,243,214,.08), transparent 55%),
		linear-gradient(180deg, rgba(16,27,54,.18), rgba(11,16,32,.24));
}

.hero-media::after,
.main_hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(11,16,32,.12) 0%,
		rgba(11,16,32,.04) 38%,
		rgba(11,16,32,.34) 100%
	);
}

.hero-media .pill,
.main_hero-media .pill,
.main_hero-media-pill {
	border: 1px solid rgba(231,236,255,.14);
	background: rgba(11,16,32,.55);
	color: var(--muted);
}

.hero-media small,
.main_hero-media small,
.main_hero-media-note {
	color: var(--muted);
}


/* =======================================================
   [11B] INSTALL-МЕДИА

   Фото установки получает тот же принцип оформления:
   - мягкая затемняющая подложка
   - читаемая верхняя pill
   - читаемая нижняя подпись
======================================================= */

.install-media,
.main_install-media {
	background:
		radial-gradient(600px 260px at 30% 30%, rgba(120,166,255,.10), transparent 55%),
		radial-gradient(600px 260px at 75% 45%, rgba(110,243,214,.08), transparent 55%),
		linear-gradient(180deg, rgba(16,27,54,.18), rgba(11,16,32,.24));
}

.install-media::after,
.main_install-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(11,16,32,.12) 0%,
		rgba(11,16,32,.04) 38%,
		rgba(11,16,32,.34) 100%
	);
}

.install-media .pill,
.main_install-media .pill,
.main_install-media-pill {
	border: 1px solid rgba(231,236,255,.14);
	background: rgba(11,16,32,.55);
	color: var(--muted);
}

.install-media small,
.main_install-media small,
.main_install-media-note {
	color: var(--muted);
}


/* =======================================================
   [12] СЕКЦИОННЫЕ ПАНЕЛИ И КАРТОЧКИ
======================================================= */

.section-card,
.main_panel {
	border: 1px solid rgba(231,236,255,.12);
	background: rgba(16,27,54,.48);
	box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

.card,
.main_tile {
	border: 1px solid rgba(231,236,255,.12);
	background: rgba(11,16,32,.35);
}

.kv,
.main_kv {
	border: 1px solid rgba(231,236,255,.12);
	background: rgba(11,16,32,.35);
}

.kv span,
.main_kv-key {
	color: var(--muted);
}

.kv b,
.main_kv-value {
	color: var(--text);
	font-weight: 700;
}


/* =======================================================
   [13] FAQ
======================================================= */

.content details,
.main_faq-item {
	border: 1px solid rgba(231,236,255,.12);
	background: rgba(11,16,32,.35);
}

.content summary .chev,
.main_faq-chev {
	opacity: .8;
}

.content details p,
.main_faq-item p {
	color: var(--muted);
	margin-top: 10px;
}


/* =======================================================
   [14] ФОРМА ПОСАДОЧНОЙ
======================================================= */

.content form {
	display: grid;
	gap: 10px;
}

.content label {
	font-size: 12px;
	color: var(--muted);
}

.content input,
.content textarea,
.content select {
	width: 100%;
	padding: 12px 12px;
	border-radius: 14px;
	border: 1px solid rgba(231,236,255,.14);
	background: rgba(11,16,32,.45);
	color: var(--text);
	outline: none;
	font-size: 14px;
}

.content textarea {
	min-height: 110px;
	resize: vertical;
}

.content input::placeholder,
.content textarea::placeholder {
	color: rgba(168,178,214,.65);
}


/* =======================================================
   [15] ЛОКАЛЬНАЯ ТИПОГРАФИКА ШАБЛОНА
======================================================= */

.content h2 {
	margin: 0 0 10px;
	font-size: var(--content-h2);
	letter-spacing: -.01em;
}

.content h3 {
	margin: 0 0 8px;
	font-size: var(--content-h3);
}

.list,
.main_list-plain {
	color: var(--text);
}


/* =======================================================
   [16] DESKTOP-УСИЛЕНИЕ ШАБЛОНА
======================================================= */

@media (min-width: 860px) {
	.quickfacts,
	.main_quickfacts {
		grid-template-columns: 1fr 1fr;
	}
}