/* --- ПОДКЛЮЧЕНИЕ ШРИФТОВ И ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ --- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&display=swap');

:root {
	--glow-color: rgba(180, 200, 255, 0.9);
	--swiper-theme-color: #b4c8ff;
	--swiper-navigation-size: 38px;
}

/* --- ОБЩИЕ СТИЛИ И СБРОС СТИЛЕЙ --- */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: #010130;
	color: #e0e0ff;
	font-family: 'Manrope', sans-serif;
	margin: 0;
}

main {
	position: relative; 
}

/* Фикс для главной секции (видео-фона):
  Запрещаем скролл только на ней, 
  так как мы убрали overflow: hidden с body.
*/
#hero {
	overflow: hidden;
}

/* --- ОСНОВНЫЕ СЕКЦИИ И МАКЕТ --- */
section {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0; 
	pointer-events: none;
}

section.visible {
	opacity: 1; /* Показываем активную секцию */
	pointer-events: auto; /* Делаем активную секцию интерактивной */
}

/* Общий стиль для секций портфолио с блюром */
.portfolio-section {
	background: rgba(10, 10, 30, 0.6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

/* --- АНИМАЦИИ (KEYFRAMES) --- */
/* Анимация "дыхания" для аватара */
/* @keyframes pulse-glow {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05); 
	}
	100% {
		transform: scale(1);
	}
}
*/
/* "Легкая" анимация свечения для псевдо-элементов 
@keyframes pulse-opacity {
	0% {
		opacity: 0.7;
	}
	100% {
		opacity: 1;
	}
} */

/* --- СТИЛИ КНОПОК --- */
/* Основная объемная кнопка */
.volumetric-button {
	padding: 15px 35px;
	font-size: 1rem;
	font-weight: 400;
	color: #e0e0ff;
	border: 1px solid rgba(180, 200, 255, 0.4);
	border-radius: 100px;
	background: rgba(10, 10, 30, 0.3);
	box-shadow: 0 0 15px rgba(180, 200, 255, 0.2), inset 0 0 5px rgba(180, 200, 255, 0.1);
	transition: all 0.3s ease-in-out;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
}

.volumetric-button:hover {
	color: #fff;
	background: rgba(180, 200, 255, 0.2);
	border-color: var(--glow-color);
	box-shadow: 0 0 25px rgba(180, 200, 255, 0.5), inset 0 0 10px rgba(180, 200, 255, 0.3);
	transform: translateY(-2px) scale(1.05);
}

/* Кнопка "Узнать стоимость" */
.price-button {
	padding: 12px 25px;
	font-size: 0.9rem;
	margin-top: 20px;
	width: 100%;
	border-radius: 12px;
}

/* Большая круглая кнопка "Play" на главном экране */
#enter-button {
	width: 250px;
	height: 250px;
	position: relative;
	padding: 0;
	font-size: 8.5rem;
	border-radius: 50%;
	display: flex; /* Для центрирования иконки */
	align-items: center;
	justify-content: center;
	text-indent: 0.3em; /* Сдвиг иконки для визуального баланса */
	border-width: 2px;
	box-shadow: 0 0 30px rgba(180, 200, 255, 0.5), inset 0 0 15px rgba(180, 200, 255, 0.25);
}

/* Кнопки навигации (Назад/Закрыть) */
.back-to-hero-button {
	position: absolute;
	top: 40px;
	left: 40px;
	z-index: 5;
}

.close-viewer-button {
	position: absolute;
	top: 40px;
	right: 40px;
	z-index: 12; /* Выше чем Swiper */
}

/* --- ТИПОГРАФИКА И ТЕКСТОВЫЕ СТИЛИ --- */
/* Заголовки в секциях портфолио */
.portfolio-title {
	font-size: 2.8rem;
	letter-spacing: 8px;
	font-weight: 300;
	text-shadow: 0 0 8px var(--glow-color), 0 0 20px rgba(180, 200, 255, 0.5);
	text-align: center;
	text-transform: uppercase;
	position: absolute;
	top: 5%;
	z-index: 11; /* Выше Swiper, но ниже кнопки закрытия */
	padding: 0 20px;
	width: 100%;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); /* Для анимации появления */
}

.portfolio-title span {
	display: inline-block; /* Для анимации появления */
}

/* Заголовки внутри панелей */
.title-main {
	font-size: 1.7rem;
	font-weight: 500;
	margin-bottom: 8px;
	color: #fff;
}

.title-sub {
	font-size: 1.5rem;
	font-weight: 300;
	color: #e0e0ff;
	text-transform: lowercase;
	line-height: 1.3;
}

/* Выделенный текст */
.highlight-text {
	color: #C5A6FF;
	font-weight: 600;
	text-shadow: 0 0 6px rgba(197, 166, 255, 0.5);
}

/* --- СЕКЦИЯ HERO (ГЛАВНЫЙ ЭКРАН) --- */
#hero-video-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1; /* Под контентом */
}

#hero-video-bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block; /* Добавлено для страховки */
}

/* Затемняющий оверлей для видео */
#hero-video-bg::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(2, 2, 8, 0.6);
	/* z-index: -1; - Не нужно, так как псевдоэлемент внутри */
}

#hero .hero-content {
	position: relative; /* Чтобы z-index сработал */
	z-index: 2; /* Над фоновым видео */
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-left: 40px;
	padding-right: 40px;
}

/* --- СЕКЦИЯ SERVICES (ПАНЕЛИ УСЛУГ) --- */
#services {
	perspective: 1000px; /* Для 3D-эффекта при наведении */
}

.services-grid {
	display: grid;
	width: 90%;
	max-width: 1200px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Адаптивная сетка */
	grid-gap: 30px;
}

.service-item-wrapper {
	display: flex;
	flex-direction: column; /* Панель и кнопка под ней */
}

/* Стеклянная панель */
.plexiglass-panel {
	background: transparent;
	/* backdrop-filter: blur(25px); */
	border: 1px solid rgba(150, 150, 255, 0.2);
	border-radius: 16px;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* Текст начинается сверху */
	text-align: left;
	font-weight: 400;
	transition: transform 0.2s ease-out, border-color 0.3s ease, box-shadow 0.3s ease;
	will-change: transform; /* Оптимизация анимации */
	padding: 30px;
	transform-style: preserve-3d; /* Для 3D-эффекта */
	flex-grow: 1; /* Панель растягивается по высоте */
}

.plexiglass-panel:not(#contact-panel) {
	min-height: 400px; /* Минимальная высота для панелей услуг */
}

.plexiglass-panel:hover {
	border-color: var(--glow-color);
	box-shadow: 0 0 30px rgba(163, 163, 255, 0.3);
}

.panel-content h3 {
	display: flex;
	flex-direction: column;
	margin-bottom: 25px;
	font-weight: 400;
	min-height: 110px; /* Резервируем место для заголовков */
	word-break: break-word; /* Перенос длинных слов */
}

.plexiglass-panel:not(#contact-panel) .panel-content p {
	font-size: 1rem;
	font-weight: 400;
	opacity: 0.9;
	line-height: 1.7;
	text-align: left;
}

/* Панель контактов (особая) */
#contact-panel {
	grid-column: 1 / -1; /* Растягивается на всю ширину сетки */
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: auto; /* Высота по контенту */
}

#contact-panel .panel-content h3 {
	min-height: auto;
	margin-bottom: 15px;
	font-size: 1.6rem;
	font-weight: 500;
}

#contact-panel .panel-content p {
	font-size: 0.9rem;
	font-weight: 300;
	opacity: 0.8;
	line-height: 1.5;
}

/* --- ФОРМЫ (КОНТАКТНАЯ И КВИЗ-БРИФ) --- */
/* Общий контейнер формы */
.form-container {
	width: 100%;
	max-width: 600px; /* Ограничение ширины */
	padding: 40px;
	background: rgba(20, 20, 50, 0.2);
	border: 1px solid rgba(150, 150, 255, 0.2);
	border-radius: 16px;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.form-container h2 {
	text-align: center;
	font-size: 2rem;
	margin-bottom: 15px;
	font-weight: 400;
	text-shadow: 0 0 8px var(--glow-color);
}

.form-container p {
	text-align: center;
	font-size: 0.9rem;
	font-weight: 300;
	opacity: 0.8;
	line-height: 1.5;
	max-width: 400px; /* Ограничение ширины текста */
	margin: 0 auto 30px auto;
}

/* Стили для ID основной контактной формы */
#brief-form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Ряд полей в форме */
.form-row {
	display: flex;
	gap: 20px;
}

.form-row .form-group {
	flex: 1; /* Поля занимают равное пространство */
}

/* Общие стили для полей ввода и select в контактной форме */
#brief-form input,
#brief-form select {
	width: 100%;
	padding: 15px 20px;
	background: transparent;
	border: 1px solid rgba(180, 200, 255, 0.4);
	border-radius: 8px;
	color: #e0e0ff;
	font-family: 'Manrope', sans-serif;
	font-size: 1rem;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#brief-form input:focus,
#brief-form select:focus {
	outline: none;
	border-color: var(--glow-color);
	box-shadow: 0 0 15px rgba(180, 200, 255, 0.3);
}

/* Кастомная стрелка для select */
#brief-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 1em;
	padding-right: 40px; /* Место для стрелки */
}

#brief-form select option {
	background-color: #010130;
	color: #e0e0ff;
}

/* Кнопка отправки в контактной форме */
#brief-form .volumetric-button {
	width: 100%;
	padding: 20px 0;
	font-size: 1.1rem;
	margin-top: 10px;
}

/* Сообщения об успехе/ошибке (скрыты по умолчанию) */
#form-success-message,
#form-error-message {
	display: none;
	text-align: center;
	line-height: 1.6;
	font-size: 1.1rem;
}

#form-error-message {
	color: #ff8a8a; /* Цвет ошибки */
}

/* Стили для квиза-брифа */
.brief-selection-grid {
	display: grid;
	grid-template-columns: 1fr 1fr; /* Две колонки для выбора */
	gap: 20px;
	margin-top: 30px;
}

/* Лейблы над полями в квизе */
#brief-form-step .form-group label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.9rem;
	font-weight: 500;
	opacity: 0.8;
}

/* Поле textarea в квизе */
#brief-form-step textarea {
	width: 100%;
	padding: 15px 20px;
	background: transparent;
	border: 1px solid rgba(180, 200, 255, 0.4);
	border-radius: 8px;
	color: #e0e0ff;
	font-family: 'Manrope', sans-serif;
	font-size: 1rem;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	min-height: 120px;
	resize: vertical; /* Разрешаем менять высоту */
}

#brief-form-step textarea:focus {
	outline: none;
	border-color: var(--glow-color);
	box-shadow: 0 0 15px rgba(180, 200, 255, 0.3);
}

/* Кастомный скроллбар для textarea (только Webkit) */
#brief-form-step textarea::-webkit-scrollbar {
	width: 8px;
}

#brief-form-step textarea::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

#brief-form-step textarea::-webkit-scrollbar-thumb {
	background-color: rgba(180, 200, 255, 0.4);
	border-radius: 4px;
}

#brief-form-step textarea::-webkit-scrollbar-thumb:hover {
	background-color: rgba(180, 200, 255, 0.6);
}

/* Контейнер для radio/checkbox */
.options-container {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.option-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
}

.option-wrapper label {
	font-weight: 400;
	opacity: 0.9;
	/* cursor: none; - Уже задано глобально */
}

/* Кастомные radio/checkbox */
input[type="radio"],
input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	margin: 0;
	font: inherit;
	color: var(--glow-color);
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
	border: 0.1em solid var(--glow-color);
	transform: translateY(-0.075em); /* Выравнивание по тексту */
	display: grid; /* Для центрирования галочки */
	place-content: center;
	transition: all 0.2s ease;
	/* cursor: none; - Уже задано глобально */
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="checkbox"] {
	border-radius: 4px;
}

/* Псевдоэлемент для галочки/точки */
input[type="radio"]::before,
input[type="checkbox"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	transform: scale(0); /* Скрыт по умолчанию */
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--glow-color); /* Способ заливки цветом */
	background-color: var(--glow-color);
}

input[type="radio"]::before {
	border-radius: 50%; /* Точка */
}

input[type="checkbox"]::before {
	transform-origin: bottom left;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); /* Рисуем галочку */
}

/* Показываем галочку/точку при выборе */
input[type="radio"]:checked::before,
input[type="checkbox"]:checked::before {
	transform: scale(1);
}

/* Легкий фон при выборе */
input[type="radio"]:checked,
input[type="checkbox"]:checked {
	background: rgba(180, 200, 255, 0.2);
}

/* Стили для fieldset (группировка полей) в квизе */
.form-fieldset {
	border: 1px solid rgba(180, 200, 255, 0.2);
	border-radius: 8px;
	padding: 20px;
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.form-fieldset legend {
	padding: 0 10px; /* Отступы вокруг текста легенды */
	font-size: 1.1rem;
	font-weight: 500;
	color: #fff;
}

/* Поле "Другое" для radio/checkbox */
.other-text-input {
	display: none; /* Скрыто по умолчанию */
	width: 100%;
	margin-left: 10px; /* Небольшой отступ */
	padding: 10px 15px;
	background: transparent;
	border: 1px solid rgba(180, 200, 255, 0.4);
	border-radius: 8px;
	color: #e0e0ff;
	font-family: 'Manrope', sans-serif;
	font-size: 0.9rem;
}

/* --- МОДАЛЬНЫЕ ОКНА (ОБЩИЕ СТИЛИ) --- */
/* Затемнение фона для модальных окон */
#pricing-modal,
#avatar-modal,
#brief-modal /* Добавлено модальное окно брифа */ {
	position: fixed;
	top: 0; /* Добавлено для #brief-modal */
	left: 0; /* Добавлено для #brief-modal */
	width: 100%; /* Добавлено для #brief-modal */
	height: 100%; /* Добавлено для #brief-modal */
	display: flex; /* Добавлено для #brief-modal */
	align-items: center; /* Добавлено для #brief-modal */
	justify-content: center; /* Добавлено для #brief-modal */
	z-index: 100; /* Выше основного контента */
	background: rgba(10, 10, 30, 0.6);
	/* backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px); */
	opacity: 0; /* Скрыты по умолчанию */
	pointer-events: none; /* Неактивны по умолчанию */
}

/* Показываем активное модальное окно */
#pricing-modal.visible,
#avatar-modal.visible,
#brief-modal.visible {
	opacity: 1;
	pointer-events: auto;
}


/* Общий стиль контента модального окна */
#pricing-modal .modal-content,
#avatar-modal .modal-content {
	position: relative; /* Для позиционирования кнопки закрытия */
	background: rgba(20, 20, 50, 0.2);
	border: 1px solid rgba(150, 150, 255, 0.2);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* --- МОДАЛЬНОЕ ОКНО ЦЕН (PRICING MODAL) --- */
#pricing-modal .modal-content {
	border-radius: 16px;
	padding: 40px 50px;
	width: 90%;
	max-width: 800px;
	text-align: center;
}

#pricing-modal h2 {
	font-size: 2rem;
	margin-bottom: 30px;
	font-weight: 400;
	text-shadow: 0 0 8px var(--glow-color);
}

#close-pricing-modal-button {
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: none;
	color: #e0e0ff;
	font-size: 2rem;
	transition: all 0.3s ease;
}

#close-pricing-modal-button:hover {
	transform: scale(1.2) rotate(90deg);
	color: #fff;
}

/* Контейнер для карточек цен */
.pricing-packages-container {
	display: flex;
	gap: 20px;
	justify-content: center;
	width: 100%;
	margin-bottom: 30px;
	align-items: stretch; /* Карточки одинаковой высоты */
}

/* Карточка цены */
.price-package {
	flex: 1; /* Равномерное распределение */
	padding: 25px;
	border: 1px solid rgba(150, 150, 255, 0.2);
	border-radius: 12px;
	background: rgba(10, 10, 30, 0.3);
	text-align: left;
	display: flex;
	flex-direction: column; /* Элементы внутри в колонку */
}

.price-package h3 {
	font-size: 1.3rem;
	font-weight: 500;
	color: #fff;
	margin-bottom: 10px;
	min-height: 55px; /* Выравнивание заголовков */
}

.price-tag {
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--glow-color);
	margin-bottom: 20px;
	min-height: 60px; /* Выравнивание цен */
	display: flex;
	align-items: center;
}

.price-package ul {
	list-style: none;
	padding-left: 0;
	opacity: 0.9;
	flex-grow: 1; /* Список растягивается, заполняя место */
}

.price-package ul li {
	margin-bottom: 10px;
	line-height: 1.5;
	padding-left: 20px; /* Место для галочки */
	position: relative;
}

/* Галочка в списке */
.price-package ul li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--glow-color);
}

#modal-contact-button {
	margin-top: 20px;
}

/* --- МОДАЛЬНОЕ ОКНО АВАТАРА --- */
/* Кнопка-триггер аватара */
#avatar-trigger {
	position: fixed;
	bottom: 30px;
	left: 30px;
	width: 120px;
	height: 120px;
	background-color: rgba(180, 200, 255, 0.1);
	background-image: url('/images/avatar-thumbnail.jpg'); /* Фоновое изображение */
	background-size: cover;
	border: 2px solid rgba(180, 200, 255, 0.5);
	border-radius: 50%;
	z-index: 99; /* Ниже модальных окон */
	/*box-shadow: 0 0 20px rgba(180, 200, 255, 0.4);*/
	transition: all 0.3s ease;
	opacity: 0; /* Скрыт по умолчанию */
	transform: scale(0);
	pointer-events: none; /* Неактивен по умолчанию */
	animation: pulse-glow 2.5s ease-in-out infinite; /* Анимация дыхания */
	animation-play-state: paused;
}

#avatar-trigger::after {
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	background: rgba(180, 200, 255, 0.5);
	border-radius: 50%;
	/* filter: blur(25px); */
	z-index: -1;
	opacity: 0.7;
	/* Используем новые keyframes */
	animation: pulse-opacity 2.5s ease-in-out infinite yoyo;
	animation-play-state: inherit; /* Будет управляться родительским JS */
}

#avatar-trigger:hover {
	transform: scale(1.1);
	box-shadow: 0 0 30px rgba(180, 200, 255, 0.7);
	animation-play-state: paused; /* Останавливаем анимацию при наведении */
}

/* Контент модального окна аватара */
#avatar-modal .modal-content {
	width: 60vh; /* Размер зависит от высоты экрана */
	height: 60vh;
	max-width: 600px; /* Ограничения */
	max-height: 600px;
	padding: 0; /* Убираем отступы */
	border-radius: 50%; /* Круглая форма */
	/* overflow: hidden; */ /* <-- УБРАТЬ ЭТУ СТРОКУ */
}

#avatar-modal video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* Видео заполняет круг */
	border-radius: 50%; /* <-- ИЗМЕНИТЬ (вместо 0) */
	overflow: hidden; /* <-- ДОБАВИТЬ ЭТУ СТРОКУ */
}

/* Кнопка закрытия аватара */
#close-avatar-modal-button {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 35px;
	height: 35px;
	background: #010130;
	border: 1px solid rgba(150, 150, 255, 0.2);
	border-radius: 50%;
	color: #e0e0ff;
	font-size: 1.5rem;
	transition: all 0.3s ease;
	
	/* --- ИСПРАВЛЕНИЯ --- */
	display: flex; /* 1. Включаем Flex */
	align-items: center; /* 2. Центрируем по вертикали */
	justify-content: center; /* 3. Центрируем по горизонтали */
	z-index: 20; /* 4. Поднимаем кнопку НАД всем (плеер z-index: 10) */
	padding: 0; /* Убираем лишние отступы */
}

#close-avatar-modal-button:hover {
	transform: scale(1.1) rotate(90deg);
	color: #fff;
	border-color: var(--glow-color);
}

/* Кастомная кнопка Play для аватара */
#avatar-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* Центрирование */
	width: 90px;
	height: 90px;
	background: rgba(255, 255, 255, 0.15);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	/* backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px); */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10; /* Над видео */
	transition: all 0.3s ease;
	padding: 0;
}

#avatar-play-button:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: translate(-50%, -50%) scale(1.1);
}

#avatar-play-button svg {
	width: 45px;
	height: 45px;
	fill: #fff;
	margin-left: 7px; /* Коррекция центрирования иконки */
}

/* Скрываем кнопку Play во время воспроизведения */
#avatar-play-button.hidden {
	opacity: 0;
	pointer-events: none;
}

/* --- SWIPER (3D-ВИТРИНА) --- */
.viewer-content {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.swiper {
	width: 100%;
	padding-top: 50px; /* Место для верхнего отражения */
	padding-bottom: 50px; /* Место для нижнего отражения */
}

/* Общий стиль слайда */
.swiper-slide {
	background-color: rgba(15, 20, 40, 0.3);
	border: 1px solid rgba(137, 207, 240, 0.3);
	box-shadow: 0 0 20px rgba(137, 207, 240, 0.1);
	border-radius: 16px;
	width: 55%; /* Ширина активного слайда */
	max-width: 720px;
	aspect-ratio: 16/9; /* Горизонтальное соотношение */
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0004); /* Отражение снизу */
	position: relative; /* Для подписей и оверлеев */
}

/* Выравнивание слайдов по центру в секции Анимация */
#portfolio-animation .swiper-wrapper {
	align-items: center;
}

/* Вертикальные слайды (9:16) */
#portfolio-design .swiper-slide,
#portfolio-development .swiper-slide,
#portfolio-animation .swiper-slide.vertical-video /* Добавляем класс для вертикальных видео */ {
	aspect-ratio: 9 / 16;
	width: 35%; /* Уменьшаем ширину вертикальных слайдов */
	max-width: 400px;
}

/* Изображение внутри слайда */
.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* Изображение заполняет слайд */
	transition: transform 0.4s ease; /* Для зума при наведении */
}

/* Стилизация стрелок Swiper */
.swiper .swiper-button-next:after,
.swiper .swiper-button-prev:after {
	font-size: var(--swiper-navigation-size);
	font-weight: bold;
	color: var(--swiper-theme-color); /* Используем переменную */
}

/* Оверлей и иконка "+" для кликабельных слайдов */
.clickable-slide .slide-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(10, 10, 30, 0.6);
	opacity: 0; /* Скрыт по умолчанию */
	transition: opacity 0.4s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clickable-slide .plus-icon {
	font-size: 5rem;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 100; /* Тонкий плюсик */
	transform: scale(0.5); /* Скрыт по умолчанию */
	opacity: 0;
	transition: all 0.4s ease;
}

/* Показываем оверлей и иконку при наведении */
.clickable-slide:hover .slide-overlay,
.clickable-slide:hover .plus-icon {
	opacity: 1;
}

.clickable-slide:hover .plus-icon {
	transform: scale(1); /* Плавное появление */
}

/* Зум изображения при наведении */
.clickable-slide:hover img {
	transform: scale(1.05);
}

/* Подписи к слайдам */
.slide-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20px;
	background: linear-gradient(0deg, rgba(10, 10, 30, 0.8) 0%, rgba(10, 10, 30, 0) 100%); /* Градиент снизу */
	opacity: 0; /* Скрыто по умолчанию */
	transform: translateY(20px); /* Начальное положение для анимации */
	transition: all 0.5s ease;
	color: #fff;
	z-index: 2; /* Над изображением/видео */
}

/* Показываем подпись для активного слайда */
.swiper-slide-active .slide-caption {
	opacity: 1;
	transform: translateY(0);
}

.slide-caption h3 {
	font-size: 1.2rem;
	font-weight: 500;
	margin: 0 0 5px 0;
}

.slide-caption p {
	font-size: 0.9rem;
	opacity: 0.8;
	margin: 0;
}

/* --- ВИДЕОПЛЕЕР --- */
/* Обертка для видео и контролов */
.video-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	overflow: hidden;
}

.video-wrapper video {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Видео заполняет обертку */
}

/* Контролы плеера (появляются при наведении) */
.video-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px 15px;
	background: rgba(10, 10, 25, 0.4);
	/* backdrop-filter: blur(10px); */
	display: flex;
	align-items: center;
	opacity: 0; /* Скрыты по умолчанию */
	transition: opacity 0.3s;
	z-index: 5; /* Над видео */
}

.video-wrapper:hover .video-controls,
.video-wrapper.paused .video-controls /* Показываем контролы и на паузе */ {
	opacity: 1;
}

/* Кнопка Play/Pause в контролах */
.play-pause-btn {
	background: none;
	border: none;
	width: 25px;
	height: 25px;
	padding: 0; /* Убираем лишние отступы */
}

.play-pause-btn .play-icon,
.play-pause-btn .pause-icon {
	width: 100%;
	height: 100%;
	fill: #fff;
}

/* Иконка Pause скрыта по умолчанию */
.play-pause-btn .pause-icon {
	display: none;
}

/* Прогресс-бар */
.progress-bar-container {
	flex-grow: 1; /* Занимает доступное пространство */
	height: 5px;
	background: rgba(255, 255, 255, 0.2);
	margin: 0 15px;
	border-radius: 5px;
	position: relative; /* Для дочернего .progress-bar */
}
/* Заполняющаяся часть прогресс-бара (добавляется через JS) */
.progress-bar-container .progress-bar {
	height: 100%;
	background: var(--glow-color);
	border-radius: 5px;
	width: 0%; /* Начальная ширина */
}

/* Отображение времени */
.time-display {
	font-size: 0.8rem;
	font-weight: 500;
	min-width: 80px; /* Чтобы время не прыгало */
	text-align: right; /* Выравнивание по правому краю */
}

/* Большая кнопка Play по центру */
.big-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	/* backdrop-filter: blur(5px); */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
	z-index: 3; /* Над видео, но под контролами */
}

.big-play-button:hover {
	background: rgba(255, 255, 255, 0.2);
}

.big-play-button svg {
	width: 40px;
	height: 40px;
	fill: #fff;
}

/* Скрываем большую кнопку Play во время воспроизведения */
video.playing + .big-play-button {
	opacity: 0;
	pointer-events: none;
}

/* Специальные стили для видео в просмотрщике (Photo Viewer) */
#photo-viewer .photo-grid-item .video-wrapper {
	border-radius: 12px;
	border: 1px solid rgba(150, 150, 255, 0.2);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
	height: auto; /* Высота по контенту */
	max-height: 80vh; /* Ограничение высоты */
	aspect-ratio: 9 / 16; /* Вертикальные пропорции (можно убрать, если не нужно) */
	display: flex; /* Для выравнивания */
	align-items: center;
	justify-content: center;
}

#photo-viewer .photo-grid-item video {
	object-fit: contain; /* Видео вписывается, сохраняя пропорции */
	height: auto; /* Высота подстраивается */
	width: 100%; /* Ширина заполняет контейнер */
	border-radius: 12px; /* Скругление как у картинок */
	border: 1px solid rgba(150, 150, 255, 0.2);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
	max-height: 80vh; /* Ограничение высоты */
}


/* --- ПРОСМОТРЩИК ФОТО (PHOTO VIEWER - ДЕСКТОП) --- */
#photo-viewer {
	z-index: 20; /* Выше основного контента */
	/* background и backdrop-filter уже есть в .portfolio-section */
}

.photo-grid {
	display: flex; /* Элементы в ряд */
	gap: 20px;
	padding: 20px;
	width: 95%;
	max-width: 1600px;
	justify-content: center;
	align-items: center; /* Выравнивание по центру */
}

.photo-grid-item {
	flex: 1; /* Равномерное распределение */
	min-width: 0; /* Предотвращает переполнение */
	transition: transform 0.3s ease;
}

.photo-grid-item:hover {
	transform: scale(1.03); /* Небольшой зум при наведении */
}

.photo-grid-item img {
	width: 100%;
	height: auto; /* Высота подстраивается */
	max-height: 80vh; /* Ограничение высоты */
	object-fit: contain; /* Картинка вписывается */
	border-radius: 12px;
	border: 1px solid rgba(150, 150, 255, 0.2);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* --- ПРОСМОТРЩИК ФОТО (МОБИЛЬНЫЙ) --- */
#single-image-viewer-mobile {
	z-index: 100; /* Выше всего остального */
	background: rgba(10, 10, 30, 0.8); /* Более темный фон */
	/* backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px); */
	justify-content: flex-start; /* Начинаем контент сверху */
}

#mobile-viewer-content {
	width: 100%;
	height: 100%;
	overflow-y: auto; /* Включаем скролл */
	padding: 80px 5% 80px 5%; /* Отступы сверху (под кнопку) и по бокам */
	display: flex;
	flex-direction: column; /* Элементы друг под другом */
	align-items: center; /* Центрируем по горизонтали */
	gap: 20px; /* Отступ между элементами */
}

#mobile-viewer-content img,
#mobile-viewer-content video /* Добавляем стили для видео */ {
	width: 100%;
	max-width: 500px; /* Ограничение ширины */
	height: auto;
	border-radius: 12px;
	border: 1px solid rgba(150, 150, 255, 0.2);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}


/* --- АДАПТИВНЫЕ СТИЛИ (ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ) --- */
@media (max-width: 768px) {
	/* Hero секция */
	#hero .hero-content {
		padding: 20px;
	}
	#enter-button {
		width: 100px; /* Уменьшаем кнопку */
		height: 100px;
		font-size: 3.0rem !important; /* Уменьшаем иконку */
		text-indent: 0.3em;
	}

	/* Кнопки навигации */
	.back-to-hero-button {
		top: 20px;
		left: 20px;
		right: auto; /* Гарантируем позицию слева */
	}
	.close-viewer-button {
		top: 20px;
		right: 20px;
	}

	/* Секция Услуг */
	#services {
		justify-content: flex-start; /* Начинаем сверху */
		padding-top: 80px; /* Место для кнопки "Назад" */
		overflow-y: auto; /* Включаем скролл */
		padding-bottom: 80px; /* Отступ от UI браузера */
	}
	.services-grid {
		grid-gap: 20px;
		grid-template-columns: 1fr; /* Одна колонка */
	}
	.plexiglass-panel {
		min-height: auto; /* Убираем мин. высоту */
		text-align: left;
		/* aspect-ratio: unset; - Не нужно, так как min-height: auto */
	}

	/* Форма контактов */
	#portfolio-contact-form.portfolio-section {
		justify-content: flex-start;
		padding-top: 80px;
		padding-bottom: 80px;
		overflow-y: auto;
	}
	.form-row {
		flex-direction: column; /* Поля друг под другом */
	}
	.brief-selection-grid {
		grid-template-columns: 1fr; /* Одна колонка */
	}


	/* Модальное окно цен */
	#pricing-modal .modal-content {
		width: 95%;
		padding: 30px 15px;
		max-height: 90vh; /* Ограничиваем высоту */
		overflow-y: auto; /* Скролл при необходимости */
	}
	.pricing-packages-container {
		flex-direction: column; /* Карточки друг под другом */
	}

	/* Аватар */
	#avatar-trigger {
		bottom: auto; /* Переносим в правый верхний угол */
		left: auto;
		top: 15px;
		right: 20px;
		width: 80px; /* Уменьшаем размер */
		height: 80px;
	}
	#avatar-modal .modal-content {
		width: 90vw; /* Размер по ширине экрана */
		height: 90vw;
		max-width: 480px; /* Ограничения */
		max-height: 480px;
	}

	/* Секции портфолио */
	.portfolio-section {
		justify-content: flex-start; /* Начинаем сверху */
	}
	.portfolio-title {
		position: relative; /* Убираем абсолютное позиционирование */
		top: unset;
		padding-top: 80px; /* Место для кнопки "Назад" */
		margin-bottom: 0;
		font-size: 1.2rem; /* Уменьшаем шрифт */
		letter-spacing: 1px;
		line-height: 1.4;
		padding-left: 15px;
		padding-right: 15px;
	}
	.portfolio-section .viewer-content {
		height: auto; /* Высота по контенту */
		flex-grow: 1; /* Занимает оставшееся место */
		max-height: calc(100% - 140px); /* Ограничение высоты, чтобы не перекрывать кнопки/заголовок */
	}

	/* Swiper */
	.swiper {
		padding-top: 20px;
	}
	.swiper-slide {
		width: 85%; /* Слайды шире */
		-webkit-box-reflect: unset; /* Убираем отражение */
	}
	/* Вертикальные слайды */
	#portfolio-design .swiper-slide,
	#portfolio-development .swiper-slide,
	#portfolio-animation .swiper-slide.vertical-video {
		width: 65%; /* Делаем вертикальные слайды чуть шире стандартных */
	}

	/* Эффекты ховера для кликабельных слайдов (показываем сразу) */
	.clickable-slide .slide-overlay,
	.clickable-slide .plus-icon {
		opacity: 1;
	}
	.clickable-slide .slide-overlay {
		background-color: rgba(10, 10, 30, 0.5); /* Чуть светлее оверлей */
	}
	.clickable-slide .plus-icon {
		transform: scale(0.9); /* Чуть меньше иконка */
		font-size: 4rem;
	}

	/* Подписи к слайдам */
	.slide-caption {
		padding: 15px;
	}
	.slide-caption h3 {
		font-size: 1rem;
	}
	.slide-caption p {
		font-size: 0.8rem;
	}

	/* Уменьшаем стрелки Swiper */
	:root {
		--swiper-navigation-size: 28px;
	}

	/* Уменьшаем кнопку Play для видео в Swiper */
	#portfolio-animation .big-play-button {
		width: 70px;
		height: 70px;
	}
	#portfolio-animation .big-play-button svg {
		width: 35px !important; /* Уменьшаем SVG иконку */
		height: 35px !important;
	}
	/* Стили для кнопки на вертикальном видео */
	#portfolio-animation .swiper-slide.vertical-video .big-play-button {
		width: 70px;
		height: 70px;
	}
	#portfolio-animation .swiper-slide.vertical-video .big-play-button svg {
		width: 35px;
		height: 35px;
	}


	/* Просмотрщик фото (Desktop версия адаптируется) */
	.photo-grid {
		flex-direction: column; /* Элементы друг под другом */
		justify-content: flex-start;
		height: 100%;
		overflow-y: auto; /* Включаем скролл */
		padding-top: 80px; /* Место для кнопки "Назад" */
		padding-bottom: 80px;
	}
	.photo-grid-item {
		width: 90%;
		max-width: 400px;
	}
	.photo-grid-item img,
	#photo-viewer .photo-grid-item video /* Применяем и к видео */ {
		max-height: none;
		width: 100%;
	}

}

/* --- СТИЛИ ВАЛИДАЦИИ ФОРМЫ --- */
/* Класс ошибки для полей ввода и fieldset */
.input-error {
	border-color: #ff8a8a !important; /* Яркая рамка для ошибки */
	box-shadow: 0 0 15px rgba(255, 138, 138, 0.5) !important;
}