/* Модальное окно (форма)
   - позиционируется поверх содержимого с затемнением
   - использует :target для показа/скрытия (css-only modal)
*/
.modal{
	position: fixed; /* фиксируется относительно окна */
	inset: 0; /* top:0; right:0; bottom:0; left:0; — растянуть на весь экран */
	display: flex; /* гибкий контейнер для центрирования */
	align-items: center; /* вертикальное центрирование */
	justify-content: center; /* горизонтальное центрирование */
	pointer-events: none; /* по умолчанию клики не проходят */
	opacity: 0; /* невидим по умолчанию */
	transition: opacity .18s ease, visibility .18s ease; /* плавное появление */
	z-index: 9999; /* поверх всего остального контента */
	visibility: hidden; /* скрыт */
}
.modal::before{
	content: ""; /* псевдоэлемент для затемнения фона */
	position: absolute; /* позиционируется относительно .modal */
	inset: 0; /* занимает весь контейнер */
	background: rgba(0,0,0,.55); /* полупрозрачный слой */
	backdrop-filter: blur(2px); /* размытие заднего фона */
	opacity: 0; /* прозрачный по умолчанию */
	transition: opacity .18s ease; /* плавное появление */
}
#callback-modal:target{ pointer-events: auto; opacity: 1; visibility: visible; } /* показать модал при :target */
#callback-modal:target::before{ opacity: 1; } /* затемнение видно */
.modal__box{
	position: relative; /* опора для .modal__close */
	z-index: 2; /* выше фонового затемнения */
	width: min(900px, 94%); /* максимально 900px или 94% экрана */
	max-width: 720px; /* жёсткий максимум ширины */
	background: linear-gradient(180deg,#0f0f0f,#121212); /* фон модалки */
	color: #fff; /* цвет текста */
	padding: 28px; /* внутренние отступы */
	border-radius: 12px; /* скругление углов */
	box-shadow: 0 20px 60px rgba(0,0,0,.6); /* тень */
	text-align: left; /* выравнивание текста */
}
.modal__close{
	position: absolute; /* располагается относительно .modal__box */
	right: 18px; /* отступ справа */
	top: 12px; /* отступ сверху */
	z-index: 3; /* поверх контента модалки */
	font-size: 28px; /* размер крестика */
	color: #fff; /* цвет крестика */
	text-decoration: none; /* без подчёркивания */
	background: transparent; /* без фона */
	border: none; /* без рамки */
	line-height: 1; /* высота строки */
}
.modal__box h2{ margin: 0 0 8px; /* отступы заголовка */ font-size: 22px; /* размер */ }
.modal__box p{ margin: 0 0 14px; /* отступы абзаца */ opacity: .9; /* чуть прозрачно */ }
.modal__iframe-wrap{ width: 100%; /* занимает ширину контейнера */ background: transparent; /* прозрачный фон */ border-radius: 8px; /* скругление */ overflow: hidden; /* обрезать содержимое */ }
.modal__iframe-wrap iframe{ width: 100%; /* iframe перебирает доступную ширину */ height: 580px; /* фиксированная высота */ border: 0; /* без рамки */ display: block; /* блочный элемент */ }

@media (max-width: 600px){
	.modal__box{ padding: 18px; /* уменьшенные отступы для мобильных */ border-radius: 10px; /* чуть меньше скругление */ }
	.modal__iframe-wrap iframe{ height: 420px; /* ниже высота на мобилке */ }
	.modal__close{ right: 12px; top: 8px; font-size: 24px; /* меньший крестик */ }
}

/* Общие стили */
*{box-sizing:border-box}

:root{
	/* Переменные
	   - централизованное место для значений, влияющих на макет
	   - менять здесь удобнее, чем искать по всему файлу
	*/
	--page-max-width:1100px; /* максимальная ширина страницы */
	--header-vertical-padding: clamp(12px, 1.2vw, 36px); /* сверху/снизу */
	--header-horizontal-padding: clamp(12px, 2.2vw, 64px); /* слева/справа */
	--panel-gap-side: clamp(8px, 1.2vw, 24px); /* расстояние панели от краёв */
	--panel-height: clamp(64px, 6.4vw, 120px); /* высота панели */
	--logo-height: clamp(40px, 4.5vw, 90px); /* высота логотипа */
	--nav-gap: clamp(12px, 3vw, 64px); /* расстояние между пунктами меню */
}

/* Подключение локального шрифта */
@font-face{
	font-family: 'MultiroundPro'; /* Название шрифта */
	src: url('/media/fonts/MultiroundPro.otf') format('opentype'); /* Путь к файлу шрифта и его формат */
	font-weight: 400 700; /* Поддерживаемые начертания */
	font-style: normal; /* Стиль шрифта */
	font-display: swap; /* Поведение загрузки шрифта */
}

/* Базовые настройки body */
body{
	font-family:'MultiroundPro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; /* стек шрифтов */
	margin:0; /* сбрасываем дефолтные отступы */
	background:#fff; /* белый фон по умолчанию */
	min-height:100vh; /* страница занимает как минимум высоту viewport */
}

/* Фон страницы: desktop */
body {
	background-image: url('media/index/back1.png'); /* Задний фон */
	background-repeat: no-repeat; /* Без повтора */
	background-size: cover; /* Покрытие всего экрана */
	background-position: center top; /* Позиционирование */
}

/* Шапка (header)
   - содержит логотип и основную навигацию
   - ограничена по ширине `--page-max-width`
*/
.site-header{
	background:#de582f; /* оранжевый фон */
	padding:var(--header-vertical-padding) var(--header-horizontal-padding); /* внутренние отступы */
	border-radius:0; /* без скругления */
	position:relative; /* опорный элемент для абсолютных потомков */
	z-index:3; /* размещаем поверх остального контента */
}
.header-inner{
	max-width:var(--page-max-width); /* ограничение ширины контента */
	margin:0 auto; /* центрирование по горизонтали */
	display:flex; /* делает контейнер флексбоксом */
	align-items:center; /* вертикальное выравнивание элементов */
	justify-content:flex-start; /* выравнивание по левому краю */
	position:relative; /* опорный контекст для абсолютных потомков */
}

/* Логотип */
.logo{
	display:flex; /* логотип как флекс-контейнер */ 
	align-items:center /* выравнивание центра по вертикали */}
.logo-img{
	height:clamp(36px,3.2vw,56px); /* адаптивная высота логотипа */ 
	width:auto; /* сохранять пропорции */ 
	display:block; /* блоковое изображение */ 
	max-width:160px /* ограничение ширины */}
.logo{margin-right: clamp(12px,2.2vw,48px) /* отступ справа от логотипа */}

/* Навигация */
.main-nav{
	flex:1; /* растягиваем навигацию чтобы занять оставшееся место */ 
	display:flex; 
	justify-content:flex-start /* элементы слева */}
.main-nav ul{
	list-style:none; /* убрать маркеры */ 
	margin:0; /* убрать внешние отступы */ 
	padding:0; /* убрать внутренние отступы */ 
	display:flex; /* горизонтальный список */ 
	gap:15px; /* расстояние между пунктами */ 
	align-items:center /* вертикальное выравнивание */}
.main-nav a{
	color:#fff; /* цвет ссылок */
	text-decoration:none; /* убрать подчёркивание */
	font-weight:700; /* жирный шрифт */
	font-size:clamp(14px,1.2vw,20px); /* адаптивный размер шрифта */
	text-transform:uppercase; /* заглавные буквы */
	display:block; /* блочный элемент для корректного кликабельного региона */
	text-align:left; /* выравнивание текста */
}

.main-nav ul{max-width:calc(var(--page-max-width) - 220px)} /* ограничение ширины навигации */
.logo{background:transparent}
.header-inner{position:relative; z-index:1}
.main-nav{display:flex; align-items:center}
.main-nav a{color:#fff}

/* Адаптив: общие переменные для небольших экранов */
@media (max-width:900px){
	:root{ --panel-height: clamp(64px,6vw,100px); /* увеличенная/адаптивная высота панели на узких экранах */ }
}


/* Мобильный фон: используем вертикальную адаптивную картинку */
@media (max-width:600px){
	body {
		background-image: url('media/index/back2.png'); /* мобильная версия фонового изображения */
		background-position: center top; /* позиция фонового изображения */
		background-size: cover; /* покрытие доступного пространства */
	}
}
@media (min-width:1000px){
	.logo{margin-left:-30px} /* небольшая коррекция позиции логотипа на широких экранах */
	.header-inner{padding-left:30px} /* дополнительный внутренний отступ слева */
}

@media (max-width:600px){
	.header-inner{
		flex-direction:column; /* стекать элементы по вертикали */ 
		gap:12px; /* расстояние между строками */ 
		align-items:center /* центрировать элементы */}
	.site-header::before{
		left:var(--panel-gap-side); /* отступ слева для псевдоэлемента */ 
		right:var(--panel-gap-side); /* отступ справа */ 
		height:calc(var(--panel-height) + 20px) /* высота псевдоэлемента */}
	.main-nav ul{
		flex-wrap:wrap; /* перенос пунктов меню */ 
		justify-content:center; /* центрирование */ 
		gap:15px /* расстояние между пунктами */}
}

	/* HERO (главный экран)
		- центрирует основной заголовок и CTA
	*/
	.hero{
		position:relative; /* опорный контекст */ 
		min-height:100vh; /* минимум высоты = высота окна */ 
		display:flex; /* флекс-контейнер */ 
		align-items:center; /* вертикальное центрирование */ 
		justify-content:center; /* горизонтальное центрирование */ 
		padding-top:0 /* убрать отступ сверху */}
	.hero-inner{
		position:relative; /* опора для псевдоэлементов */ 
		z-index:2; /* над фоном */ 
		max-width:var(--page-max-width); /* ограничение ширины */ 
		margin:0 auto !important; /* центрирование */ 
		padding:0 20px; /* боковые отступы */ 
		text-align:center; /* центрирование текста */ 
		color:#fff /* белый текст */}
	.hero-title{
		font-size:clamp(28px,4.5vw,56px); /* адаптивный размер заголовка */ 
		line-height:1.05; /* межстрочный интервал */ 
		margin:0 0 12px 0; /* нижний отступ */ 
		font-weight:700 /* толщина */}
	.hero-title .accent{
		display:block; /* отдельная строка */ 
		color:#ff6a2b; /* акцентный цвет */ 
		font-size:clamp(28px,4.2vw,48px); /* размер акцента */ 
		margin-top:6px /* отступ сверху */}
	.hero-sub{
		font-size:clamp(12px,1.6vw,18px); /* размер подзаголовка */ 
		opacity:0.95; /* прозрачность */ 
		margin:0 0 22px 0 /* нижний отступ */}
	.hero-cta-wrap{
		display:flex; /* контейнер для кнопки */ 
		justify-content:center; /* центруем кнопку */ 
		position:relative /* опорный контекст */}
	.btn.cta{
		background:#f0f0f0; /* цвет кнопки */ 
		color:#232323; /* цвет текста в кнопке */ 
		padding:18px 36px; /* внутренние отступы */ 
		border-radius:40px; /* скругление */ 
		text-decoration:none; /* без подчёркивания */ 
		font-weight:800; /* жирный текст */ 
		width:clamp(400px,36vw,520px); /* адаптивная ширина */ 
		display:inline-block; /* inline-block */ 
		position:relative; /* опорный контекст */ 
		z-index:3 /* над фоном */}

	@media (max-width:600px){
		.hero{min-height:100vh}
		.hero-inner{padding:10px}
		.hero{padding-top:0}
		.hero-inner{padding:0 16px}
		.hero-title{font-size:clamp(20px,6vw,32px)}
		.hero-title .accent{font-size:clamp(18px,5vw,28px)}
		.btn.cta{padding:14px 24px; width:min(86%,420px)}
		body{background-position: center 18%}
	}

	@media (min-width:1000px){
		body{background-position: center 36%}
		.btn.cta{width:clamp(420px,28vw,700px); padding:22px 48px}
		.hero-cta-wrap::before{height:clamp(160px,18vw,300px); width:clamp(220px,10vw,380px); filter:blur(1px)}
	}

	/* Footer (подвал) */
	.site-footer {
		background: #000; /* фон подвала */
		color: #fff; /* цвет текста */
		padding: 40px var(--header-horizontal-padding); /* внутренние отступы */
		margin-top: auto; /* прижать подвал к низу при flex layout */
	}

	.footer-inner {
		max-width: var(--page-max-width); /* ограничение ширины содержимого */
		margin: 0 auto; /* центрирование */
		display: flex; /* флекс-контейнер */
		flex-direction: column; /* вертикальная колонка */
		align-items: center; /* центруем элементы */
		gap: 24px; /* расстояние между элементами */
		text-align: center; /* центрированный текст */
	}

	.footer-logo-img {
		height: 32px; /* высота логотипа в футере */
		width: auto; /* сохранять пропорции */
	}

	.footer-copyright {
		font-size: 18px; /* размер текста копирайта */
		font-weight: 700; /* жирность */
	}

	.footer-contacts {
		display: flex; /* флекс-контейнер для контактов */
		flex-direction: column; /* вертикальный список */
		gap: 16px; /* расстояние между контактами */
		align-items: center; /* центрирование */
	}

	.contact-item {
		display: flex; /* горизонтальная строка: иконка + текст */
		align-items: center; /* выравнивание по центру */
		gap: 12px; /* промежуток между иконкой и ссылкой */
	}

	.contact-icon {
		width: 24px; /* ширина иконки */
		height: 24px; /* высота иконки */
		object-fit: contain; /* сохранить пропорции иконки */
	}

	.contact-item a {
		color: #fff; /* цвет ссылки */
		text-decoration: none; /* без подчёркивания */
		font-weight: 700; /* жирный текст */
		font-size: 16px; /* размер текста */
	}

	.footer-note {
		font-size: 14px; /* размер служебного текста */
		opacity: 0.8; /* прозрачность для приглушения */
	}

	@media (max-width:320px){
		.header-inner{padding:0 8px; flex-direction:column; gap:12px; align-items:center}
		.logo-img{height:40px}
		/* Сделать меню вертикальным и центрированным */
		.main-nav ul{flex-direction:column; gap:10px; align-items:center; justify-content:center; max-width:100%}
		.main-nav a{font-size:20px; font-weight:800; text-align:center; display:block; padding:6px 0}
		.hero-title{font-size:20px}
		.hero-title .accent{font-size:18px}
		.hero-sub{font-size:13px}
		.btn.cta{width:90%; padding:12px 18px; font-size:16px}
		.modal__iframe-wrap iframe{height:320px}
		.modal__close{font-size:20px}
	}

		.footer-note {
			font-size: 12px;
		}

/* Дополнительные контрольные точки: 320, 425, 768, 1024, 1440 */
/* Very small phones (320px) */
@media (max-width:320px){
	:root{
		--header-horizontal-padding:10px; /* уменьшенный горизонтальный паддинг */
		--header-vertical-padding:10px; /* уменьшенный вертикальный паддинг */
		--logo-height:32px; /* высота логотипа для очень маленьких экранов */
		--nav-gap:8px; /* расстояние между пунктами меню */
	}
	.header-inner{padding:0 8px /* боковые отступы внутри шапки */}
	.logo-img{height:28px /* высота логотипа */}
	.main-nav ul{gap:8px /* расстояние между пунктами меню */}
	.hero-title{font-size:20px /* размер основного заголовка */}
	.hero-title .accent{font-size:18px /* размер акцентного подзаголовка */}
	.hero-sub{font-size:13px /* размер подзаголовка */}
	.btn.cta{width:90% /* ширина кнопки */; padding:12px 18px /* внутренние отступы */; font-size:16px /* размер текста кнопки */}
	.modal__iframe-wrap iframe{height:320px /* высота iframe в модалке */}
	.modal__close{font-size:20px /* размер кнопки закрытия */}
}

/* Small phones (425px) */
@media (min-width:321px) and (max-width:425px){
	:root{
		--header-horizontal-padding:12px; /* горизонтальные отступы */
		--header-vertical-padding:12px; /* вертикальные отступы */
		--logo-height:36px; /* высота логотипа */
		--nav-gap:10px; /* расстояние между пунктами меню */
	}
	.header-inner{padding:0 12px /* боковые отступы */}
	.logo-img{height:34px /* логотип немного больше */}
	.main-nav ul{gap:10px /* промежуток между пунктами */}
	.hero-title{font-size:24px /* размер заголовка */}
	.hero-title .accent{font-size:20px /* размер акцента */}
	.hero-sub{font-size:14px /* размер подзаголовка */}
	.btn.cta{width:86% /* ширина кнопки */; padding:14px 20px /* отступы */}
	.modal__iframe-wrap iframe{height:360px /* высота iframe для small phones */}
	.modal__close{font-size:22px /* размер крестика */}
}

/* Tablets (768px) */
@media (min-width:426px) and (max-width:768px){
	:root{
		--header-horizontal-padding:18px; /* горизонтальные паддинги */
		--header-vertical-padding:16px; /* вертикальные паддинги */
		--logo-height:44px; /* логотип */
		--nav-gap:14px; /* расстояние между пунктами меню */
	}
	.header-inner{padding:0 18px /* боковые паддинги в шапке */}
	.logo-img{height:40px /* логотип */}
	.main-nav ul{gap:14px /* промежуток между пунктами */}
	.hero-title{font-size:36px /* крупный заголовок на планшете */}
	.hero-title .accent{font-size:30px /* акцентный размер */}
	.hero-sub{font-size:15px /* подзаголовок */}
	.btn.cta{width:78% /* ширина CTA */; padding:16px 28px /* отступы */}
	.modal__iframe-wrap iframe{height:420px /* высота iframe */}
}

/* Small desktops / large tablets (1024px) */
@media (min-width:769px) and (max-width:1024px){
	:root{
		--header-horizontal-padding:28px; /* большие боковые паддинги */
		--header-vertical-padding:20px; /* вертикальные паддинги */
		--logo-height:54px; /* логотип */
		--nav-gap:18px; /* расстояние между пунктами меню */
	}
	.header-inner{padding:0 24px /* шапка: боковые паддинги */}
	.logo-img{height:48px /* логотип */}
	.main-nav ul{gap:18px /* промежуток между пунктами */}
	.hero-title{font-size:44px /* заголовок */}
	.hero-title .accent{font-size:36px /* акцент */}
	.hero-sub{font-size:16px /* подзаголовок */}
	.btn.cta{width:62% /* кнопка */; padding:18px 36px /* отступы */}
	.modal__iframe-wrap iframe{height:480px /* iframe */}
}

/* Large screens (up to 1440px) */
@media (min-width:1025px) and (max-width:1440px){
	:root{
		--header-horizontal-padding:40px; /* раскошные боковые паддинги */
		--header-vertical-padding:24px; /* вертикальные паддинги */
		--logo-height:68px; /* крупный логотип */
		--nav-gap:22px; /* расстояние между пунктами меню */
	}
	.header-inner{padding:0 32px /* боковые паддинги */}
	.logo-img{height:64px /* логотип */}
	.main-nav ul{gap:22px /* расстояние между пунктами */}
	.hero-title{font-size:52px /* крупный заголовок */}
	.hero-title .accent{font-size:44px /* размер акцента */}
	.hero-sub{font-size:17px /* подзаголовок */}
	.btn.cta{width:48% /* ширина кнопки */; padding:20px 40px /* отступы */}
	.modal__iframe-wrap iframe{height:560px /* iframe */}
}

/* Extra large (1440px+) — небольшой тонкий тейвик */
@media (min-width:1441px){
	.hero-title{font-size:56px /* максимальный размер заголовка */}
	.hero-title .accent{font-size:48px /* акцент */}
	.btn.cta{width:36% /* сужаем кнопку на очень больших экранах */; padding:22px 48px /* увеличенные отступы */}
}