/* Reset & Base */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		:root {
			--primary: #65A9DD;
			--primary-light: #7EB6E3;
			--dark: #0e1116;
			--light: #ffffff;
			--gold: #D4AF37;
			--ease-premium: cubic-bezier(0.33, 1, 0.68, 1);
			--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
		}

		html {
			font-family: 'Inter', sans-serif;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		body {
			height: 100vh;
			background: #ffffff;
			color: var(--dark);
			overflow: hidden;
			position: relative;
			transition: background 0.6s ease;
		}

		body.night-mode {
			background: #0e1116;
			color: var(--light);
		}

		/* ПРЕМИАЛЬНЫЙ ПРЕЛОАДЕР */
		.preloader {
			position: fixed;
			inset: 0;
			z-index: 10000;
			background: #000000;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
		}

		.loader-waves {
			position: relative;
			display: flex;
			gap: 12px;
			height: 80px;
			align-items: center;
		}

		.wave-line {
			width: 4px;
			background: linear-gradient(to top, 
				transparent 0%, 
				var(--primary) 50%, 
				var(--primary-light) 100%);
			border-radius: 4px;
			animation: waveAnimation 1.5s ease-in-out infinite;
			opacity: 0;
			animation-fill-mode: forwards;
		}

		.wave-line:nth-child(1) { 
			height: 30px; 
			animation-delay: 0s;
		}
		.wave-line:nth-child(2) { 
			height: 50px; 
			animation-delay: 0.1s;
		}
		.wave-line:nth-child(3) { 
			height: 70px; 
			animation-delay: 0.2s;
		}
		.wave-line:nth-child(4) { 
			height: 50px; 
			animation-delay: 0.3s;
		}
		.wave-line:nth-child(5) { 
			height: 30px; 
			animation-delay: 0.4s;
		}

		@keyframes waveAnimation {
			0% {
				transform: scaleY(0.5);
				opacity: 0;
			}
			50% {
				transform: scaleY(1.2);
				opacity: 1;
			}
			100% {
				transform: scaleY(1);
				opacity: 0.8;
			}
		}

		.loader-text-container {
			position: absolute;
			bottom: 30%;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
			opacity: 0;
			animation: textFadeIn 1s ease forwards;
			animation-delay: 0.8s;
		}

		@keyframes textFadeIn {
			to {
				opacity: 1;
				transform: translateX(-50%) translateY(-10px);
			}
		}

		.loader-main-text {
			font-size: 32px;
			font-weight: 100;
			letter-spacing: 8px;
			color: #ffffff;
			margin-bottom: 10px;
			text-transform: uppercase;
		}

		.loader-sub-text {
			font-size: 12px;
			font-weight: 300;
			letter-spacing: 4px;
			color: var(--primary);
			text-transform: uppercase;
		}

		.preloader.fade-out {
			animation: preloaderFadeOut 0.8s var(--ease-premium) forwards;
		}

		@keyframes preloaderFadeOut {
			to {
				opacity: 0;
				transform: scale(1.02);
				pointer-events: none;
			}
		}

		/* MAIN HERO */
		.hero {
			position: relative;
			width: 100%;
			height: 100vh;
			opacity: 0;
			animation: heroRevealPremium 1.5s var(--ease-premium) forwards;
			animation-delay: 2.8s;
		}

		@keyframes heroRevealPremium {
			to {
				opacity: 1;
			}
		}

		.hero-visual {
			position: absolute;
			inset: 0;
			overflow: hidden;
		}

		.hero-slide {
			position: absolute;
			inset: 0;
			opacity: 0;
			transform: scale(1.1);
			transition: opacity 2s var(--ease-premium), transform 2s var(--ease-premium);
		}

		.hero-slide.active {
			opacity: 1;
			transform: scale(1);
		}

		.hero-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transform: scale(1.1);
			transition: transform 20s var(--ease-premium);
		}

		.hero-slide.active .hero-image {
			transform: scale(1);
		}

		.hero-slide::after {
			display: none;
		}

		/* Logo */
		.logo {
			position: fixed;
			top: 30px;
			left: 50px;
			z-index: 1000;
			width: 100px;
			height: 50px;
			opacity: 0;
			transform: translateY(-30px);
			animation: elementFadeDown 1.2s var(--ease-premium) forwards;
			animation-delay: 3.5s;
		}

		@keyframes elementFadeDown {
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.logo svg {
			width: 100%;
			height: 100%;
			transition: transform 0.4s var(--ease-premium);
		}

		.logo:hover svg {
			transform: scale(1.05);
		}

		/* Content */
		.hero-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			z-index: 10;
		}

		.hero-content > * {
			opacity: 0;
			transform: translateY(40px);
			animation: premiumContentReveal 1.4s var(--ease-premium) forwards;
		}

		@keyframes premiumContentReveal {
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.hero-title {
			font-size: clamp(28px, 4vw, 42px);
			font-weight: 300;
			line-height: 1.2;
			margin-bottom: 20px;
			color: #fff;
			letter-spacing: 6px;
			animation-delay: 3.8s;
			text-shadow: 
				0 2px 20px rgba(0,0,0,0.8),
				0 4px 40px rgba(0,0,0,0.6),
				0 8px 60px rgba(0,0,0,0.4);
		}

		.hero-subtitle {
			font-size: clamp(48px, 7vw, 86px);
			font-weight: 200;
			line-height: 1;
			margin-bottom: 50px;
			color: #fff;
			animation-delay: 4s;
			letter-spacing: 2px;
			text-shadow: 
				0 2px 20px rgba(0,0,0,0.9),
				0 4px 40px rgba(0,0,0,0.7),
				0 8px 80px rgba(0,0,0,0.5);
			position: relative;
		}

		.hero-subtitle::after {
			content: '';
			position: absolute;
			bottom: -20px;
			left: 50%;
			transform: translateX(-50%) scaleX(0);
			width: 120px;
			height: 1px;
			background: linear-gradient(90deg, transparent, var(--primary), transparent);
			animation: lineExpand 1.2s var(--ease-premium) forwards;
			animation-delay: 4.5s;
		}

		@keyframes lineExpand {
			to { transform: translateX(-50%) scaleX(1); }
		}

		/* ПРЕМИАЛЬНЫЙ ТЕЛЕФОН */
		.hero-phone {
			display: inline-flex;
			align-items: center;
			gap: 12px;
			color: rgba(255, 255, 255, 0.75);
			text-decoration: none;
			font-size: 18px;
			font-weight: 500;
			letter-spacing: 2px;
			transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
			position: relative;
			animation-delay: 4.2s;
			padding: 12px 0;
			text-shadow: 
				0 2px 20px rgba(0,0,0,0.8),
				0 4px 40px rgba(0,0,0,0.6),
				0 8px 60px rgba(0,0,0,0.4);
		}

		/* Иконка телефона с анимацией */
		.phone-icon {
			width: 18px;
			height: 18px;
			position: relative;
			opacity: 0.8;
			transition: all 0.3s ease;
		}

		.phone-icon svg {
			width: 100%;
			height: 100%;
			stroke: currentColor;
			fill: none;
			stroke-width: 1.5;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		/* Пульсация иконки */
		@keyframes phonePulse {
			0%, 100% {
				transform: scale(1);
			}
			50% {
				transform: scale(1.1);
			}
		}

		.hero-phone:hover .phone-icon {
			opacity: 1;
			animation: phonePulse 1s ease-in-out infinite;
		}

		/* Номер телефона */
		.phone-number {
			position: relative;
		}

		/* Разделители в номере для лучшей читаемости */
		.phone-separator {
			opacity: 0.5;
			margin: 0 2px;
		}

		/* Элегантная линия под номером при наведении */
		.hero-phone::after {
			content: '';
			position: absolute;
			bottom: 8px;
			left: 32px;
			right: 0;
			height: 1px;
			background: linear-gradient(90deg, 
				transparent,
				rgba(255, 255, 255, 0.4),
				transparent);
			transform: scaleX(0);
			transform-origin: center;
			transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
		}

		.hero-phone:hover::after {
			transform: scaleX(1);
		}

		.hero-phone:hover {
			color: rgba(255, 255, 255, 0.95);
			transform: translateY(-1px);
		}

		/* Световое свечение при наведении */
		.hero-phone::before {
			content: '';
			position: absolute;
			inset: -10px -20px;
			background: radial-gradient(ellipse at center, 
				rgba(101, 169, 221, 0.1) 0%, 
				transparent 70%);
			opacity: 0;
			transition: opacity 0.3s ease;
			pointer-events: none;
		}

		.hero-phone:hover::before {
			opacity: 1;
		}

		/* Side Navigation */
		.side-nav {
			position: fixed;
			right: 50px;
			top: 50%;
			transform: translateY(-50%);
			z-index: 100;
			display: flex;
			flex-direction: column;
			gap: 24px;
			opacity: 0;
			animation: fadeIn 1s ease forwards;
			animation-delay: 4.5s;
		}

		@keyframes fadeIn {
			to { opacity: 1; }
		}

		.nav-dot {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: transparent;
			border: 1px solid rgba(255, 255, 255, 0.2);
			cursor: pointer;
			transition: all 0.4s var(--ease-premium);
			position: relative;
		}

		.nav-dot::before {
			content: '';
			position: absolute;
			inset: -8px;
			border-radius: 50%;
			border: 1px solid transparent;
			transition: all 0.4s var(--ease-premium);
		}

		.nav-dot.active {
			background: var(--primary);
			border-color: var(--primary);
		}

		.nav-dot.active::before {
			border-color: rgba(101, 169, 221, 0.3);
		}

		.nav-dot:hover {
			border-color: rgba(255, 255, 255, 0.5);
		}

		/* Navigation Arrows */
		.hero-nav {
			position: fixed;
			bottom: 50px;
			left: 50px;
			display: flex;
			gap: 20px;
			z-index: 100;
			opacity: 0;
			animation: fadeIn 1s ease forwards;
			animation-delay: 4.5s;
		}

		.nav-btn {
			width: 54px;
			height: 54px;
			border: 1px solid rgba(255, 255, 255, 0.15);
			background: rgba(255, 255, 255, 0.03);
			backdrop-filter: blur(20px);
			border-radius: 50%;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.4s var(--ease-premium);
			position: relative;
			overflow: hidden;
		}

		.nav-btn::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			background: rgba(101, 169, 221, 0.1);
			border-radius: 50%;
			transform: translate(-50%, -50%);
			transition: all 0.4s ease;
		}

		.nav-btn:hover::before {
			width: 100%;
			height: 100%;
		}

		.nav-btn:hover {
			border-color: rgba(101, 169, 221, 0.4);
			transform: scale(1.05);
		}

		.nav-btn svg {
			width: 20px;
			height: 20px;
			stroke: rgba(255, 255, 255, 0.7);
			stroke-width: 1.5;
			fill: none;
			position: relative;
			z-index: 1;
		}

		/* Call Me Button */
		.call-me-btn {
			position: fixed;
			bottom: 120px;
			right: 24px;
			width: 64px;
			height: 64px;
			padding: 0;
			background: linear-gradient(135deg, var(--primary), var(--primary-light));
			color: #fff;
			border: none;
			border-radius: 50%;
			cursor: pointer;
			transition: all 0.4s var(--ease-premium);
			box-shadow: 
				0 10px 30px rgba(101, 169, 221, 0.3),
				0 20px 60px rgba(101, 169, 221, 0.15);
			z-index: 100;
			opacity: 0;
			animation: fadeIn 1s ease forwards, breathe 4s ease-in-out infinite;
			animation-delay: 4.8s, 5.8s;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		@keyframes breathe {
			0%, 100% { transform: scale(1); }
			50% { transform: scale(1.05); }
		}

		.call-me-btn::before {
			content: '';
			position: absolute;
			inset: -2px;
			border-radius: 50%;
			background: linear-gradient(135deg, var(--primary), transparent, var(--primary-light));
			opacity: 0;
			animation: rotateGlow 3s linear infinite;
			z-index: -1;
		}

		@keyframes rotateGlow {
			0% { transform: rotate(0deg); opacity: 0; }
			50% { opacity: 1; }
			100% { transform: rotate(360deg); opacity: 0; }
		}

		.call-me-btn svg {
			width: 28px;
			height: 28px;
			fill: none;
			stroke: #fff;
			stroke-width: 1.5;
			stroke-linecap: round;
			stroke-linejoin: round;
			transition: all 0.3s ease;
		}

		.call-me-btn:hover {
			transform: translateY(-3px) scale(1.1);
			box-shadow: 
				0 15px 40px rgba(101, 169, 221, 0.4),
				0 25px 70px rgba(101, 169, 221, 0.2);
		}

		/* МОДАЛЬНОЕ ОКНО - С БОЛЕЕ ТЕМНЫМ ТЕКСТОМ */
		.modal-overlay {
			position: fixed;
			inset: 0;
			background: rgba(0, 0, 0, 0.9);
			backdrop-filter: blur(20px);
			z-index: 2000;
			opacity: 0;
			visibility: hidden;
			transition: all 0.4s var(--ease-premium);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.modal-overlay.active {
			opacity: 1;
			visibility: visible;
		}

		.modal-container {
			width: 90%;
			max-width: 400px;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
			border-radius: 18px;
			padding: 32px 28px 28px;
			position: relative;
			transform: scale(0.9) translateY(30px);
			transition: all 0.4s var(--ease-premium);
			box-shadow: 
				0 20px 60px rgba(0, 0, 0, 0.2),
				0 10px 30px rgba(0, 0, 0, 0.1);
		}

		body.night-mode .modal-container {
			background: linear-gradient(135deg, rgba(20, 20, 30, 0.98), rgba(30, 30, 40, 0.95));
		}

		.modal-overlay.active .modal-container {
			transform: scale(1) translateY(0);
		}

		.modal-close {
			position: absolute;
			top: 18px;
			right: 18px;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: transparent;
			border: 1px solid rgba(0, 0, 0, 0.15);
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s var(--ease-premium);
		}

		.modal-close:hover {
			background: rgba(0, 0, 0, 0.08);
			transform: rotate(90deg);
		}

		.modal-close svg {
			width: 14px;
			height: 14px;
			stroke: #1a1a1a;
			stroke-width: 1.5;
		}

		body.night-mode .modal-close {
			border-color: rgba(255, 255, 255, 0.1);
		}

		body.night-mode .modal-close:hover {
			background: rgba(255, 255, 255, 0.05);
		}

		body.night-mode .modal-close svg {
			stroke: #fff;
		}

		.modal-header {
			text-align: center;
			margin-bottom: 20px;
		}

		/* ТЕМНЫЙ ТЕКСТ В ФОРМЕ */
		.modal-title {
			font-size: 26px;
			font-weight: 400;
			color: #0d0d0d;
			margin-bottom: 4px;
			letter-spacing: -0.5px;
		}

		body.night-mode .modal-title {
			color: #ffffff;
			font-weight: 300;
		}

		.modal-subtitle {
			font-size: 12px;
			color: #2a2a2a;
			letter-spacing: 0.2px;
			font-weight: 400;
		}

		body.night-mode .modal-subtitle {
			color: rgba(255, 255, 255, 0.7);
			font-weight: 300;
		}

		.modal-form {
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

		.form-group {
			position: relative;
		}

		.form-input {
			width: 100%;
			padding: 12px 16px;
			font-size: 13px;
			font-weight: 400;
			color: #1a1a1a;
			background: rgba(0, 0, 0, 0.03);
			border: 1px solid rgba(0, 0, 0, 0.12);
			border-radius: 8px;
			transition: all 0.3s var(--ease-premium);
			outline: none;
		}

		body.night-mode .form-input {
			background: rgba(255, 255, 255, 0.03);
			color: #fff;
			border-color: rgba(255, 255, 255, 0.08);
			font-weight: 300;
		}

		.form-input:focus {
			background: #fff;
			border-color: var(--primary);
			box-shadow: 0 0 0 3px rgba(101, 169, 221, 0.1);
		}

		body.night-mode .form-input:focus {
			background: rgba(255, 255, 255, 0.05);
		}

		.form-input::placeholder {
			color: #6a6a6a;
			font-weight: 300;
		}

		body.night-mode .form-input::placeholder {
			color: rgba(255, 255, 255, 0.4);
		}

		.form-label {
			position: absolute;
			top: -8px;
			left: 12px;
			padding: 0 4px;
			font-size: 10px;
			font-weight: 500;
			letter-spacing: 0.2px;
			color: var(--primary);
			background: linear-gradient(to bottom, transparent 50%, white 50%);
			opacity: 0;
			transform: translateY(10px);
			transition: all 0.3s var(--ease-premium);
			pointer-events: none;
		}

		body.night-mode .form-label {
			background: linear-gradient(to bottom, transparent 50%, rgba(20, 20, 30, 0.98) 50%);
		}

		.form-input:focus + .form-label,
		.form-input:not(:placeholder-shown) + .form-label {
			opacity: 1;
			transform: translateY(0);
		}

		/* ЧЕКБОКСЫ - С БОЛЕЕ ТЕМНЫМ ТЕКСТОМ */
		.form-agreements {
			margin: 12px 0 6px;
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.agreement-item {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.agreement-checkbox {
			width: 16px;
			height: 16px;
			min-width: 16px;
			cursor: pointer;
			position: relative;
			appearance: none;
			background: rgba(0, 0, 0, 0.03);
			border: 2px solid rgba(0, 0, 0, 0.2);
			border-radius: 3px;
			transition: all 0.3s var(--ease-premium);
		}

		body.night-mode .agreement-checkbox {
			background: rgba(255, 255, 255, 0.02);
			border-color: rgba(255, 255, 255, 0.2);
		}

		.agreement-checkbox:hover {
			border-color: var(--primary);
		}

		.agreement-checkbox:checked {
			background: linear-gradient(135deg, var(--primary), var(--primary-light));
			border-color: var(--primary);
		}

		.agreement-checkbox:checked::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 3px;
			height: 6px;
			border: solid white;
			border-width: 0 2px 2px 0;
			transform: translate(-50%, -60%) rotate(45deg);
		}

		.agreement-checkbox:focus {
			outline: none;
			box-shadow: 0 0 0 3px rgba(101, 169, 221, 0.1);
		}

		.agreement-label {
			font-size: 10px;
			line-height: 1.3;
			color: #2a2a2a;
			font-weight: 400;
			cursor: pointer;
			user-select: none;
		}

		body.night-mode .agreement-label {
			color: rgba(255, 255, 255, 0.7);
			font-weight: 300;
		}

		.agreement-link {
			color: var(--primary);
			text-decoration: none;
			border-bottom: 1px solid transparent;
			transition: all 0.3s ease;
			display: inline;
			font-weight: 500;
		}

		.agreement-link:hover {
			color: var(--primary-light);
			border-bottom-color: var(--primary-light);
		}

		.agreement-checkbox.error {
			border-color: #e74c3c;
			animation: shake 0.5s ease;
		}

		@keyframes shake {
			0%, 100% { transform: translateX(0); }
			25% { transform: translateX(-5px); }
			75% { transform: translateX(5px); }
		}

		/* GOOGLE RECAPTCHA */
		.recaptcha-container {
			margin: 12px 0;
			display: flex;
			justify-content: center;
			transform: scale(0.85);
			transform-origin: center;
		}

		/* КНОПКА ОТПРАВКИ */
		.form-submit {
			padding: 14px 28px;
			background: linear-gradient(135deg, var(--primary), var(--primary-light));
			color: #fff;
			font-size: 13px;
			font-weight: 500;
			letter-spacing: 0.6px;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s var(--ease-premium);
			margin-top: 2px;
			position: relative;
			overflow: hidden;
		}

		.form-submit::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.2);
			transform: translate(-50%, -50%);
			transition: width 0.6s ease, height 0.6s ease;
		}

		.form-submit:hover::before {
			width: 400px;
			height: 400px;
		}

		.form-submit:hover {
			transform: translateY(-2px);
			box-shadow: 0 10px 30px rgba(101, 169, 221, 0.3);
		}

		.form-submit:disabled {
			opacity: 0.7;
			cursor: not-allowed;
		}

		/* СООБЩЕНИЯ ОБ УСПЕХЕ/ОШИБКЕ */
		.form-message {
			margin-top: 10px;
			padding: 8px 12px;
			border-radius: 6px;
			font-size: 11px;
			font-weight: 400;
			text-align: center;
			display: none;
		}

		.form-message.success {
			background: rgba(76, 175, 80, 0.1);
			color: #2e7d32;
			border: 1px solid rgba(76, 175, 80, 0.2);
			display: block;
		}

		.form-message.error {
			background: rgba(244, 67, 54, 0.1);
			color: #c62828;
			border: 1px solid rgba(244, 67, 54, 0.2);
			display: block;
		}

		/* Theme Toggle */
		.theme-toggle {
			position: fixed;
			top: 40px;
			right: 40px;
			z-index: 1500;
			width: 72px;
			height: 36px;
			background: rgba(255, 255, 255, 0.08);
			backdrop-filter: blur(20px) saturate(150%);
			border-radius: 36px;
			border: 1px solid rgba(255, 255, 255, 0.1);
			cursor: pointer;
			overflow: hidden;
			transition: all 0.4s var(--ease-premium);
			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
			opacity: 0;
			animation: fadeIn 1s ease forwards;
			animation-delay: 3.5s;
		}

		.theme-toggle:hover {
			transform: translateY(-1px);
			box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
		}

		.theme-toggle.night-mode {
			background: linear-gradient(135deg, rgba(20, 20, 35, 0.4) 0%, rgba(40, 40, 70, 0.3) 100%);
			border-color: rgba(100, 120, 255, 0.15);
		}

		.toggle-slider {
			position: absolute;
			top: 50%;
			left: 4px;
			width: 28px;
			height: 28px;
			background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
			border-radius: 50%;
			transition: all 0.4s var(--ease-premium);
			transform: translateY(-50%);
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
		}

		.theme-toggle.night-mode .toggle-slider {
			transform: translateX(36px) translateY(-50%);
			background: linear-gradient(135deg, #2a2a3e 0%, #1e1e2e 100%);
		}

		.sun-icon, .moon-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			transition: all 0.4s ease;
		}

		.sun-icon {
			width: 18px;
			height: 18px;
			opacity: 1;
		}

		.theme-toggle.night-mode .sun-icon {
			opacity: 0;
			transform: translate(-50%, -50%) rotate(180deg) scale(0.5);
		}

		.moon-icon {
			width: 14px;
			height: 14px;
			opacity: 0;
			transform: translate(-50%, -50%) rotate(-180deg) scale(0.5);
		}

		.theme-toggle.night-mode .moon-icon {
			opacity: 1;
			transform: translate(-50%, -50%) rotate(0deg) scale(1);
		}

		.sun-icon svg, .moon-icon svg {
			width: 100%;
			height: 100%;
		}

		.sun-icon svg circle {
			fill: #FFC107;
		}

		.sun-icon svg line {
			stroke: #FFC107;
			stroke-width: 2;
			stroke-linecap: round;
		}

		.moon-icon svg {
			fill: #b8b8d0;
		}

		/* Mobile responsive */
		@media (max-width: 768px) {
			.logo {
				width: 60px;
				height: 40px;
				top: 13px;
				left: 25px;
			}

			.theme-toggle {
				top: 18px;
				right: 75px;
				width: 60px;
				height: 30px;
			}

			.toggle-slider {
				width: 22px;
				height: 22px;
			}

			.theme-toggle.night-mode .toggle-slider {
				transform: translateX(30px) translateY(-50%);
			}

			.hero-content {
				width: 90%;
				max-width: 400px;
			}
			
			.hero-title {
				font-size: 24px;
				letter-spacing: 4px;
			}
			
			.hero-subtitle {
				font-size: 42px;
				margin-bottom: 35px;
			}
			
			.hero-phone {
				font-size: 14px;
				gap: 10px;
			}
			
			.phone-icon {
				width: 16px;
				height: 16px;
			}

			.side-nav {
				right: 20px;
			}

			.hero-nav {
				left: 20px;
				bottom: 30px;
			}

            .call-me-btn {
                right: 20px;
                bottom: 90px;
				width: 56px;
				height: 56px;
            }

			.modal-container {
				padding: 28px 20px 24px;
				max-width: 340px;
			}

			.modal-title {
				font-size: 22px;
			}

			.modal-subtitle {
				font-size: 11px;
			}

			.form-agreements {
				gap: 8px;
				margin: 10px 0 4px;
			}
			
			.agreement-checkbox {
				width: 14px;
				height: 14px;
				min-width: 14px;
			}
			
			.agreement-label {
				font-size: 9px;
			}

			.recaptcha-container {
				transform: scale(0.75);
			}

			.loader-main-text {
				font-size: 24px;
				letter-spacing: 6px;
			}

			.loader-sub-text {
				font-size: 11px;
			}
		}

		/* Premium grain texture */
		body::after {
			content: "";
			position: fixed;
			inset: 0;
			pointer-events: none;
			opacity: 0.03;
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.95" numOctaves="3"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.5"/></svg>');
			z-index: 1;
			mix-blend-mode: overlay;
		}

		/* ПЛАШКА С АКЦИЯМИ - УЛУЧШЕННОЕ ЖИДКОЕ СТЕКЛО */
		.promo-banner {
			position: fixed;
			bottom: 40px;
			left: 50%;
			transform: translateX(-50%) translateY(100px);
			z-index: 95;
			opacity: 0;
			animation: promoBannerReveal 0.8s var(--ease-premium) forwards;
			animation-delay: 5.5s;
		}

		@keyframes promoBannerReveal {
			to {
				opacity: 1;
				transform: translateX(-50%) translateY(0);
			}
		}

		.promo-link {
			display: inline-flex;
			align-items: center;
			gap: 20px;
			padding: 16px 30px;
			text-decoration: none;
			position: relative;
			border-radius: 50px;
			transition: all 0.4s var(--ease-premium);
			overflow: hidden;
			
			background: linear-gradient(135deg, 
				rgba(14, 17, 22, 0.75) 0%,
				rgba(20, 25, 35, 0.65) 100%);
			backdrop-filter: blur(24px) saturate(200%);
			-webkit-backdrop-filter: blur(24px) saturate(200%);
			border: 1px solid rgba(255, 255, 255, 0.18);
			box-shadow: 
				0 8px 32px rgba(0, 0, 0, 0.25),
				0 2px 8px rgba(0, 0, 0, 0.15),
				inset 0 1px 0 rgba(255, 255, 255, 0.1),
				inset 0 -1px 0 rgba(0, 0, 0, 0.2);
		}

		.promo-link::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 200%;
			height: 100%;
			background: linear-gradient(90deg,
				transparent 0%,
				transparent 40%,
				rgba(255, 255, 255, 0.08) 50%,
				transparent 60%,
				transparent 100%);
			transform: translateX(-100%);
			transition: transform 0.8s ease;
		}

		.promo-link:hover::before {
			transform: translateX(0);
		}

		.promo-link:hover {
			transform: translateY(-2px) scale(1.02);
			background: linear-gradient(135deg, 
				rgba(14, 17, 22, 0.85) 0%,
				rgba(20, 25, 35, 0.75) 100%);
			border-color: rgba(255, 255, 255, 0.25);
			box-shadow: 
				0 12px 40px rgba(0, 0, 0, 0.3),
				0 4px 12px rgba(0, 0, 0, 0.2),
				inset 0 1px 0 rgba(255, 255, 255, 0.15),
				inset 0 -1px 0 rgba(0, 0, 0, 0.25);
		}

		.promo-discount {
			font-size: 18px;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.95);
			letter-spacing: 1px;
			line-height: 1;
			display: flex;
			align-items: baseline;
			gap: 6px;
			text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		}

		.promo-percent {
			font-size: 22px;
			font-weight: 600;
			background: linear-gradient(135deg, var(--gold), var(--gold-light));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4))
					drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
		}

		.promo-divider {
			width: 1px;
			height: 30px;
			background: linear-gradient(to bottom,
				transparent,
				rgba(255, 255, 255, 0.3),
				transparent);
		}

		.promo-date {
			font-size: 12px;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.95);
			letter-spacing: 0.5px;
			text-transform: uppercase;
			line-height: 1.4;
			text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		}

		.promo-date-highlight {
			color: var(--primary-light);
			font-weight: 500;
			filter: drop-shadow(0 0 5px rgba(101, 169, 221, 0.3));
		}

		body.night-mode .promo-link {
			background: linear-gradient(135deg, 
				rgba(30, 35, 45, 0.8) 0%, 
				rgba(35, 40, 55, 0.7) 100%);
			border-color: rgba(255, 255, 255, 0.12);
		}

		body.night-mode .promo-link:hover {
			background: linear-gradient(135deg, 
				rgba(30, 35, 45, 0.9) 0%, 
				rgba(35, 40, 55, 0.8) 100%);
			border-color: rgba(255, 255, 255, 0.2);
		}

		@media (max-width: 768px) {
			.promo-banner {
				bottom: 150px;
				left: 50%;
				transform: translateX(-50%);
				width: calc(100% - 150px);
				max-width: 340px;
				opacity: 0;
				animation: none;
			}
			
			.promo-banner {
				animation: promoBannerMobile 0.8s var(--ease-premium) forwards;
				animation-delay: 5.5s;
			}
			
			@keyframes promoBannerMobile {
				from {
					opacity: 0;
					transform: translateX(-50%) translateY(100px);
				}
				to {
					opacity: 1;
					transform: translateX(-50%) translateY(0);
				}
			}
			
			.promo-link {
				padding: 12px 20px;
				gap: 14px;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				border-radius: 40px;
				width: 100%;
			}
			
			.promo-discount {
				font-size: 14px;
				font-weight: 400;
				gap: 4px;
				white-space: nowrap;
			}
			
			.promo-percent {
				font-size: 17px;
				font-weight: 600;
			}
			
			.promo-divider {
				width: 1px;
				height: 24px;
				flex-shrink: 0;
			}
			
			.promo-date {
				font-size: 10px;
				letter-spacing: 0.3px;
				line-height: 1.3;
				white-space: nowrap;
			}
			
			.promo-date-highlight {
				font-size: 11px;
			}
		}

		@media (max-width: 380px) {
			.promo-banner {
				max-width: 300px;
			}
			
			.promo-link {
				padding: 10px 16px;
				gap: 12px;
			}
			
			.promo-discount {
				font-size: 13px;
			}
			
			.promo-percent {
				font-size: 16px;
			}
			
			.promo-date {
				font-size: 9px;
			}
			
			.promo-divider {
				height: 20px;
			}
		}

		@media (max-width: 320px) {
			.promo-banner {
				width: calc(100% - 20px);
				max-width: none;
			}
			
			.promo-link {
				padding: 10px 14px;
				gap: 10px;
			}
			
			.promo-discount {
				font-size: 12px;
			}
			
			.promo-percent {
				font-size: 15px;
			}
			
			.promo-date {
				font-size: 9px;
			}
		}