/*
 * Главная (2026-09-23; выросла из демо /demo/). Подключается только на
 * главной (functions.php). Корень — .dm, токены --dm-* на нём.
 *
 * Решения заказчика по концепции: синие блоки на весь экран — да; точечные
 * свечения — да (только акцентный синий: под главной кнопкой и за фото);
 * счётчики цифр — да (кроме хиро); стекло — только под шапкой, градиентных
 * рамок нет.
 */

body.dm-page {
	background: #040a11;
}

/* Токены --dm-* и общие компоненты (.dm-label, .dm-btn, .dm-h2, …)
   с 2026-09-23 живут в style.css — ими пользуются все страницы. */
.dm {
	background: var(--dm-bg);
	color: var(--dm-text);
	-webkit-font-smoothing: antialiased;
}

/* Шапка сайта общая и живёт в style.css (полупрозрачная, липкая). На
   главной со скриптом она фиксированная и лежит поверх хиро — кадр со
   стойкой идёт до верха экрана. Условие — медиазапрос, а не класс от
   скрипта: иначе страница прыгнула бы при загрузке. Без скрипта шапка в
   потоке, как на остальных страницах.

   --dm-hdr-space — место под шапку над хиро: --header-h без скрипта,
   0 со скриптом. */
.dm {
	--dm-hdr-space: var(--header-h);
}

/* Якоря (#quick-lead, #directions, #cases) не уходят под шапку. */
.dm [id] {
	scroll-margin-top: var(--header-h);
}

@media (scripting: enabled) {
	.dm {
		--dm-hdr-space: 0px;
	}

	body.dm-page .site-header {
		position: fixed;
		left: 0;
		right: 0;
	}
}

/* ---------------------------------------------------------------------
   01 · Хиро «Замена в стойке»
   Базовая раскладка — статичная: стартовый кадр на весь экран и текст
   слева. Режим с прокруткой (ниже, под медиазапросом) включается тем же
   условием, что и скрипт home-hero.js.
   --------------------------------------------------------------------- */

.dm-hero {
	position: relative;
	background: var(--dm-bg);
}

.dm-hero__stage {
	position: relative;
	height: calc(100vh - var(--dm-hdr-space));
	height: calc(100svh - var(--dm-hdr-space));
	min-height: 520px;
	overflow: hidden;
}

/* object-position 62 % — та же точка фокуса, что у холста в скрипте
   (FOCUS_X): на экранах уже 16:9 обрезается левый край зала, а стойка
   остаётся в кадре. Разойдутся — подмена фото на холст будет видна. */
.dm-hero__poster,
.dm-hero canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.dm-hero__poster {
	object-fit: cover;
	object-position: 62% 50%;
}

.dm-hero__mobile {
	display: none;
}

/* Затемнение под текстом слева и снизу: в кадре слева проход серверной
   с яркими синими огнями, белый текст на нём без подложки не читается. */
.dm-hero__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(4, 10, 17, 0.94) 0%, rgba(4, 10, 17, 0.72) 30%, rgba(4, 10, 17, 0.1) 58%, rgba(4, 10, 17, 0) 70%),
		linear-gradient(0deg, rgba(4, 10, 17, 0.7) 0%, rgba(4, 10, 17, 0) 28%),
		linear-gradient(180deg, rgba(4, 10, 17, 0.6) 0%, rgba(4, 10, 17, 0) 150px);
}

.dm-hero__copy {
	position: absolute;
	left: var(--dm-gutter);
	max-width: min(600px, 46vw);
	display: grid;
	gap: 20px;
}

.dm-hero__copy--intro {
	top: 50%;
	transform: translateY(-50%);
}

.dm-hero__title,
.dm-hero__final-title {
	margin: 0;
	font-weight: 300;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.dm-hero__title {
	font-size: clamp(40px, 4.4vw, 64px);
	line-height: 1.04;
}

.dm-hero__final-title {
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1.08;
}

.dm-hero__title span,
.dm-hero__final-title span {
	color: var(--dm-muted);
}

.dm-hero__lead {
	margin: 0;
	max-width: 46ch;
	font-size: 18px;
	line-height: 1.55;
	color: rgba(238, 242, 245, 0.78);
}

.dm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}

/* Слои, которые появляются по ходу прокрутки. В статичном режиме их нет:
   без анимации финальную надпись негде показать к месту. */
.dm-hero__tag,
.dm-hero__copy--final,
.dm-hero__hint {
	display: none;
}

/* ---------------------------------------------------------------------
   Режим с прокруткой. Секция выше экрана на --dm-hero-scroll, сцена
   закреплена. Условие — то же, что MQ в home-hero.js.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) and (min-width: 641px) and (min-height: 540px) and (min-aspect-ratio: 6/5) {
	.dm-hero {
		--dm-hero-scroll: 260vh;
		height: calc(100vh - var(--dm-hdr-space) + var(--dm-hero-scroll));
		height: calc(100svh - var(--dm-hdr-space) + var(--dm-hero-scroll));
	}

	.dm-hero__stage {
		position: sticky;
		top: var(--dm-hdr-space);
	}

	.dm-hero__copy--intro,
	.dm-hero__tag,
	.dm-hero__copy--final {
		will-change: opacity, transform;
	}

	.dm-hero__tag,
	.dm-hero__copy--final,
	.dm-hero__hint {
		display: block;
	}

	/* Финальная надпись — слева от стойки и не заезжает на неё. */
	/* Ширина задана явно (а не max-width): от неё через cqi считается
	   кегль — «IT-инфраструктуры» не переносится и должен влезть в колонку
	   целиком (~9em), иначе заезжает на стойку. */
	.dm-hero__copy--final {
		display: grid;
		top: 50%;
		transform: translateY(-50%);
		width: max(280px, min(440px, calc(var(--dm-rack-x, 40vw) - var(--dm-gutter) - 56px)));
		container-type: inline-size;
	}

	.dm-hero__final-title {
		font-size: clamp(24px, 10.5cqi, 42px);
	}

	.dm-hero__tag,
	.dm-hero__copy--final {
		opacity: 0;
	}

	.dm-hero__tag {
		position: absolute;
		left: var(--dm-gutter);
		top: 50%;
		transform: translateY(-50%);
		font-size: clamp(28px, 3vw, 44px);
		font-weight: 300;
		letter-spacing: -0.02em;
		color: var(--dm-muted);
	}

	.dm-hero__tag .dm-label {
		display: block;
		margin-bottom: 10px;
		color: var(--dm-faint);
	}

	.dm-hero__hint {
		position: absolute;
		left: 50%;
		bottom: 22px;
		transform: translateX(-50%);
		font: 500 11px var(--dm-mono);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--dm-faint);
	}
}

/* Телефон и планшет «портретом» — без анимации: финальный кадр (стойка на
   Eltex) под текстом. На вертикальном экране кадр 16:9 обрезается до одной
   стойки во весь экран: текст ложится прямо на коммутаторы, а финальной
   надписи негде встать. Отсюда (min-aspect-ratio: 6/5) в
   условии режима с прокруткой — выше и в home-hero.js. */
@media (max-width: 640px), (max-aspect-ratio: 6/5) {
	.dm-hero__stage {
		height: auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		/* Шапка со скриптом лежит поверх — отступаем на её высоту. */
		padding: calc(var(--header-h) - var(--dm-hdr-space) + 40px) 0 32px;
	}

	.dm-hero__poster,
	.dm-hero__shade {
		display: none;
	}

	/* Текст первым: в разметке фото стоит раньше (под ним на десктопе
	   лежит текст), а на узком экране сначала нужно сообщение. */
	.dm-hero__copy--intro {
		order: -1;
		position: static;
		transform: none;
		max-width: 720px;
		padding: 0 clamp(16px, 4vw, 24px);
	}

	.dm-hero__title {
		font-size: 38px;
	}

	.dm-hero__lead {
		font-size: 16px;
	}

	.dm-hero__mobile {
		display: block;
		margin-top: 32px;
	}

	.dm-hero__mobile img {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* ---------------------------------------------------------------------
   Синие блоки (02 и 09). Заливка — тёмный синий кнопок: белый текст на
   нём 5.4:1. Акцент #1f8ae0 на синем не читается, поэтому метки и ссылки
   внутри — белые.
   --------------------------------------------------------------------- */

/* 02 · Заявление */
.dm-statement {
	display: flex;
	align-items: center;
	min-height: min(100svh, 900px);
	padding: clamp(96px, 12vw, 160px) 0;
	background: var(--dm-fill);
	color: #fff;
}

.dm-statement .dm-container {
	display: grid;
	gap: clamp(28px, 4vw, 48px);
	justify-items: start;
}

.dm-statement__text {
	margin: 0;
	max-width: 30ch;
	font-size: clamp(28px, 3.6vw, 52px);
	font-weight: 300;
	line-height: 1.16;
	letter-spacing: -0.025em;
}

/* Слова загораются по ходу прокрутки: скрипт оборачивает их в <span> и
   ставит --dm-lit от 0 до 1. */
.dm-statement__text .dm-word {
	color: rgba(255, 255, 255, calc(0.32 + 0.68 * var(--dm-lit, 1)));
	transition: color 0.2s linear;
}

/* Синий «накрывает» экран при подъезде: скрипт раскрывает clip-path от
   вставки со скруглёнными углами до полного прямоугольника. */
.dm-statement.is-clipping {
	clip-path: inset(0 var(--dm-clip-x, 0px) round var(--dm-clip-r, 0px));
}

/* ---------------------------------------------------------------------
   04 · Каталог. Фото флагманов — PNG с прозрачным фоном; под ними мягкое
   пятно света, иначе чёрный корпус (IP-телефон) пропадает на тёмном.
   --------------------------------------------------------------------- */

.dm-catalog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.dm-cat {
	display: grid;
	grid-template-rows: auto 1fr;
	border: 1px solid var(--dm-line);
	border-radius: 10px;
	background: var(--dm-surface);
	color: var(--dm-text);
	text-decoration: none;
	overflow: hidden;
	transition: border-color 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.dm-cat__photo {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: radial-gradient(60% 55% at 50% 55%, rgba(214, 228, 240, 0.13), rgba(214, 228, 240, 0) 70%);
	transition: background-color 0.25s ease;
}

/* Абсолютно, с полями: у фото разные пропорции (коммутатор 9:4, точка
   доступа почти квадрат), и в потоке высокое растягивало бы карточку. */
.dm-cat__photo img {
	position: absolute;
	inset: 24px 32px;
	width: calc(100% - 64px);
	height: calc(100% - 48px);
	object-fit: contain;
	transition: transform 0.5s var(--ease-out, ease-out);
}

.dm-cat__body {
	display: grid;
	align-content: start;
	gap: 8px;
	padding: 20px 24px 24px;
	border-top: 1px solid var(--dm-line);
}

.dm-cat__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.dm-cat__title {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.dm-cat__count {
	flex: none;
	font: 500 12px/1.4 var(--dm-mono);
	color: var(--dm-accent);
	white-space: nowrap;
}

.dm-cat__desc {
	font-size: 14px;
	line-height: 1.55;
	color: var(--dm-muted);
}

@media (hover: hover) {
	.dm-cat:hover {
		border-color: rgba(31, 138, 224, 0.55);
		background: var(--dm-surface-2);
		transform: translateY(-4px);
	}

	.dm-cat:hover .dm-cat__photo {
		background-color: rgba(31, 138, 224, 0.08);
	}

	.dm-cat:hover .dm-cat__photo img {
		transform: scale(1.04);
	}
}

/* ---------------------------------------------------------------------
   05 · Полный цикл. Базово — этапы списком, у каждого своя картинка.
   На ≥1024: слева этапы высотой в пол-экрана, справа закреплённая рамка
   с тремя картинками, видна та, что у этапа в центре экрана.
   --------------------------------------------------------------------- */

.dm-cycle__steps {
	display: grid;
	gap: 48px;
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.dm-cycle__step {
	display: grid;
	gap: 14px;
	align-content: start;
}

.dm-cycle__step h3 {
	margin: 4px 0 0;
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.dm-cycle__step p {
	margin: 0;
	max-width: 44ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--dm-muted);
}

.dm-cycle__inline {
	width: 100%;
	height: auto;
	margin-bottom: 8px;
	border-radius: 10px;
	background: radial-gradient(60% 60% at 50% 55%, rgba(214, 228, 240, 0.1), rgba(214, 228, 240, 0) 72%);
}

.dm-cycle__media {
	display: none;
}

@media (min-width: 1024px) {
	.dm-cycle__layout {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: 64px;
	}

	.dm-cycle__steps {
		gap: 0;
		margin-bottom: 0;
	}

	.dm-cycle__step {
		min-height: 44vh;
		padding: 32px 0 32px 28px;
		border-left: 1px solid var(--dm-line);
		transition: border-color 0.3s ease;
	}

	.dm-cycle__step h3,
	.dm-cycle__step p {
		transition: color 0.3s ease, opacity 0.3s ease;
	}

	.dm-cycle__step:not(.is-active) h3 {
		color: var(--dm-faint);
	}

	.dm-cycle__step:not(.is-active) p {
		opacity: 0.45;
	}

	.dm-cycle__step.is-active {
		border-left-color: var(--dm-accent);
	}

	.dm-cycle__inline {
		display: none;
	}

	.dm-cycle__media {
		display: block;
	}

	.dm-cycle__frame {
		position: sticky;
		top: calc(var(--header-h) + 12vh);
		aspect-ratio: 16 / 11;
		border: 1px solid var(--dm-line);
		border-radius: 14px;
		background: radial-gradient(55% 55% at 50% 55%, rgba(31, 138, 224, 0.14), rgba(31, 138, 224, 0) 72%), var(--dm-surface);
		overflow: hidden;
	}

	.dm-cycle__frame img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		opacity: 0;
		transform: scale(0.97);
		transition: opacity 0.5s ease, transform 0.6s var(--ease-out, ease-out);
	}

	.dm-cycle__frame img.is-active {
		opacity: 1;
		transform: none;
	}

	.dm-cycle .dm-link {
		margin-top: 40px;
	}
}

/* 03 · Почему мы, 06 · Цифры, 08 · Отзыв и клиенты — общие блоки,
   живут в style.css (ими пользуется и «О компании»). */

/* 07 · Кейсы — карточка общая для сайта (.dm-case в style.css). */

/* ---------------------------------------------------------------------
   09 · Заявка — второй синий блок, под ним «АТЛАНТ» во всю ширину.
   --------------------------------------------------------------------- */

.dm-final {
	position: relative;
	overflow: hidden;
	padding: clamp(88px, 10vw, 144px) 0 0;
	background: var(--dm-fill);
	color: #fff;
	scroll-margin-top: var(--header-h);
}

.dm-final__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}

.dm-final__intro {
	display: grid;
	gap: 20px;
	align-content: start;
}

.dm-final__title span {
	color: rgba(255, 255, 255, 0.62);
}

/* «IT-инфраструктуры» — неразрывно, но цветом основной строки. */
.dm-final__title .nowrap {
	color: inherit;
}

.dm-final__intro p {
	margin: 0;
	max-width: 46ch;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

.dm-final__contacts {
	display: grid;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.dm-final__contacts a {
	color: #fff;
	font: 500 clamp(18px, 1.6vw, 22px)/1.4 var(--dm-mono);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.dm-final__contacts a:hover {
	border-color: #fff;
}

/* Карточка формы — тёмная на синем: самый сильный контраст на странице,
   и поля выглядят так же, как всё остальное на главной. */
.dm-form-card {
	display: grid;
	gap: 20px;
	padding: clamp(24px, 3vw, 36px);
	border-radius: 14px;
	background: var(--dm-bg);
	color: var(--dm-text);
	box-shadow: 0 30px 60px -30px rgba(2, 12, 24, 0.7);
}

.dm-form-card__title {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.dm-form-card__success p {
	margin: 8px 0 0;
	color: var(--dm-muted);
}

.dm-form {
	display: grid;
	gap: 16px;
}

.dm-field {
	display: grid;
	gap: 8px;
}

.dm-field__label {
	font: 500 12px/1.4 var(--dm-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dm-muted);
}

.dm-field__note {
	text-transform: none;
	letter-spacing: 0;
	color: var(--dm-faint);
}

.dm-field input {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--dm-line-strong);
	border-radius: 6px;
	background: var(--dm-surface);
	color: var(--dm-text);
	font: inherit;
	font-size: 16px;
	transition: border-color 0.2s ease;
}

.dm-field input::placeholder {
	color: var(--dm-faint);
}

.dm-field input:focus {
	outline: none;
	border-color: var(--dm-accent);
	box-shadow: 0 0 0 3px rgba(31, 138, 224, 0.25);
}

.dm-field input.is-error {
	border-color: #e5484d;
}

.dm-form__error {
	margin: 0;
	padding: 10px 12px;
	border-radius: 6px;
	background: rgba(229, 72, 77, 0.12);
	color: #ff9a9d;
	font-size: 14px;
	line-height: 1.5;
}

.dm-form__submit {
	width: 100%;
	margin-top: 4px;
	border: 0;
	cursor: pointer;
}

.dm-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 1.5;
	color: var(--dm-muted);
}

.dm-consent input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--dm-accent);
}

.dm-consent a {
	color: var(--dm-text);
}

/* «АТЛАНТ» во всю ширину: тонкий контур на синем. Размер в vw — слово
   должно занимать строку на любом экране. */
.dm-final__word {
	margin-top: clamp(64px, 8vw, 120px);
	font-size: 23.5vw;
	font-weight: 600;
	line-height: 0.74;
	letter-spacing: -0.06em;
	text-align: center;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
	white-space: nowrap;
	user-select: none;
	padding-bottom: 0.04em;
}

/* Подвал сайта сразу под синим блоком — без светлого зазора. */
body.dm-page .site-footer {
	margin-top: 0;
}

/* ---------------------------------------------------------------------
   Адаптив экранов 02–09
   --------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.dm-catalog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dm-final__grid {
		grid-template-columns: 1fr;
	}

	.dm-form-card {
		max-width: 560px;
	}
}

@media (max-width: 640px) {
	.dm-catalog__grid {
		grid-template-columns: 1fr;
	}

	/* На узком экране «накрытие» синим почти не видно (поля по 4 % —
	   это 15 px), а скругление обрезало бы текст у края. */
	.dm-statement {
		min-height: 0;
	}

	.dm-statement.is-clipping {
		clip-path: none;
	}

}