:root {
	color-scheme: dark;
	--color-sun: #FE9800;
	--color-leaf: #82C654;
	--color-space: #4A2521;
}

html {
	background-color: var(--color-space);
	/* Фиксируем высоту по самому большому размеру экрана */
	height: 100lvh;
	width: 100vw;
	margin: 0;
	padding: 0;
}

body {
	/* прибиваем body к углам экрана */
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100lvh;
	min-height: 100%;
	margin: 0;
	padding: 0;
	/* запрещаем системную прокрутку страницы */
	overflow: hidden;
	background-color: var(--color-space);
	background: radial-gradient(circle at center, #1A0B2E 0%, var(--color-space) 100%);
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;
	/* защита от "подтягивания" экрана при движении пальцем вниз */
	overscroll-behavior: none;
}


/*  Фундамент */
.main-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: calc(100lvh - 46px); /* Вычитаем футер */
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/*  Логотип  */
.section-logo {
	/* Это эквивалент 50% в данной пропорции (2/4) */
	flex: 2;
	display: flex;
	/* Логотип стоит "ногами" на полу */
	align-items: flex-end;
	justify-content: center;
	/* зазор между лого и текстом */
	padding-bottom: 2vh;
}

/* оверлей с текстом*/
.section-text {
	/* Занимает 25% высоты рабочего пространства */
	flex: 1;
	display: flex;
	/* Центровка по горизонтали */
	justify-content: center;
	text-align: center;
	/* Клики проходят насквозь, пока не активированы ссылки */
	pointer-events: none;
	transition: opacity 0.6s ease;
	will-change: opacity;
}

/*  Иконки  */
.section-icons {
	/* Это еще 25% (1/4) */
	flex: 1;
	display: flex;
	/* Разрешаем перенос */
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.main-logo {
	transform: translateX(1%) translateZ(0);
	/*  Позиционирование в первом этаже (section-logo) */
	width: 85vmin;
	max-width: 600px;
	/* Занимает 3/4 высоты своего этажа */
	height: 75%;
	object-fit: contain;
	/* Технические фиксы для Chrome и Safari */
	overflow: hidden;
	backface-visibility: hidden;
	outline: 2px solid transparent;
	inline: 1px solid transparent;
	/* Убеждаемся, что логотип стоит на "полу" этажа */
	display: block;
	margin-top: auto;
}

/* Элементы внутри SVG */
.letter-path, .sun-path {
	fill: none;
	stroke-width: 4px;
/*	заставляет браузер не пытаться быть слишком умным со сглаживанием краев*/
/*	shape-rendering: crispEdges;*/
	/* Чтобы клик "пролетал" сквозь контуры к кнопкам, если надо */
	pointer-events: none;
}

.letter-path {
	stroke: var(--color-leaf);
}

.sun-path {
	stroke: var(--color-sun);
}

.solutions-letters path {
	opacity: 0;
	fill: #FE9800;
}

.ripple-green, .ripple-orange, .click-pulse {
	opacity: 0;
	pointer-events: none;
}

.legal-content {
	transform: translateY(-10%);
	/* Защита: не дает тексту выйти за пределы этажа */
	max-height: 90%;
	/* Позволяет скроллить текст внутри, если его много */
	overflow-y: auto;
	margin: 0;
	will-change: transform, opacity;
}

.legal-content h3 {
	color: var(--color-sun);
	letter-spacing: 2px;
	font-weight: 300;
	font-size: 3vmin;
	margin: 0;
	will-change: transform, opacity;
}

.legal-content p {
	color: var(--color-leaf);
	line-height: 1.3;
	letter-spacing: 1px;
	font-weight: 200;
	font-size: 2.5vmin;
	margin: 0;
	will-change: transform, opacity;
}

.active-email, .active-link {
	color: var(--color-leaf);
	text-decoration: none;
	border-bottom: 1px solid var(--color-sun);
	padding-bottom: 2px;
	transition: all 0.3s ease;
	pointer-events: auto;
	font-weight: 300;
	font-size: 3vmin;
	will-change: transform;
}

.active-email:hover, .active-link:hover {
	border-bottom-color: var(--color-leaf);
}

/*  Контейнер иконок (Honeycombs) */
.honeycomb-wrapper {
	display: flex;
	/* Авто-перенос на второй ряд на мобилках! */
	flex-wrap: wrap;
/*	align-content: center;*/
	justify-content: center;
	/* Расстояние между сотами */
	gap: 9px;
	width: 100%;
	/* Чтобы иконки не расползались слишком широко */
	max-width: 900px;
	margin: 0 10px;
}

/*  Сами иконки */
.honeycomb-item {
	position: relative;
	/* Адаптивный размер */
	width: 14vmin;
	max-width: 100px;
/*	aspect-ratio: 116 / 128;*/
	/* Скрыты до клика по солнцу */
	opacity: 0;
	/* Уменьшены для эффекта появления */
	transform: scale(0.5);
}

/*  Интерактив и оформление сот */
.honey-svg {
	width: 100%;
	height: 100%;
	display: block;
	will-change: transform, opacity;
}

.hex-border {
	transition: stroke 0.3s ease-in-out;
	/* Гарантируем, что обводка видна */
	stroke-dasharray: 0;
}

/* Эффекты при наведении и активации */
.honeycomb-item:hover .hex-border,
.honeycomb-item.is-active .hex-border {
	stroke: var(--color-leaf);
}

.honeycomb-item:hover {
	transform: scale(1.05) !important;
	transition: transform 0.3s ease;
}

/* Управление кликабельностью */
.honeycomb-item {
	/* Позволяет нажимать на иконки */
	pointer-events: auto;
	cursor: pointer;
	text-decoration: none;
}

/* Если внутри есть картинка, заставляем её вписаться в маску */
.honeycomb-item image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.footer-contact {
	position: fixed;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	transition: opacity 0.5s ease, visibility 0.5s ease;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}

.legal-item {
	color: var(--color-sun);
	text-decoration: none;
	font-size: 11px;
	transition: color 0.3s ease;
}

.legal-item.is-active {
	color: var(--color-leaf);
	opacity: 1;
	pointer-events: none;
	cursor: default;
}

.legal-item:hover {
	color: var(--color-leaf);
}

.separator {
	color: var(--color-sun);
	font-size: 10px;
	margin: 0 4px;
}

/* Убираем системную подсветку при нажатии на мобильных устройствах */
* {
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
}

/* Дополнительная защита для логотипа и иконок */
.scene-container,
.main-logo,
.honeycomb-item {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	/* Запрещаем выделение элементов при долгом нажатии */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Настройки для узких экранов (телефоны) */
@media (max-width: 480px) {
	.main-logo {
		padding-bottom: 15%;
	}
	/* Увеличиваем масштаб иконок, чтобы они были крупнее на телефоне */
	.honeycomb-item {
		width: 20vmin;
	}
	.honeycomb-wrapper {
		/* Ограничиваем ширину */
		max-width: 70%;
		margin-top: -20%;
	}
	
	.legal-content h3 {
		margin-top: 10px;
		font-weight: 400;
		font-size: 4vmin;
	}
	
	.legal-content p {
		margin-top: 10px;
		font-weight: 300;
		font-size: 3.5vmin;
	}
	
	.active-email, .active-link {
		margin-top: 10px;
		font-weight: 400;
		font-size: 4vmin;
	}
	
	
	
}

/*комбинация запросов*/
/* Если это телефон (узкий экран) И он сенсорный */
/*@media (max-width: 600px) and (pointer: coarse) {*/
	/* Поднимаем логотип чуть выше */
/*	.scene-container { top: 40%; }*/
/*	.honeycomb-item { width: 25vmin; }*/
/*}*/