/* styles.css */
:root {
	--bg: #0b0d12;
	--bg-elev: #11141b;
	--text: #e7ecf3;
	--muted: #9aa6b2;
	--primary: #7c6cff;
	--primary-2: #53e0ff;
	--accent: #a1ffb0;
	--danger: #ff6b6b;
	--card: rgba(255,255,255,0.06);
	--stroke: rgba(255,255,255,0.12);
	--shadow: 0 10px 30px rgba(0,0,0,0.35);
	--radius: 16px;
	--glass: saturate(120%) blur(10px);

	--header-grad: conic-gradient(from 180deg at 50% -10%, rgba(124,108,255,.18), rgba(83,224,255,.18), transparent 60%);
	--underline: linear-gradient(90deg, var(--primary), var(--primary-2));
}

:root[data-theme="light"] {
	--bg: #f6f8fb;
	--bg-elev: #ffffff;
	--text: #0d1220;
	--muted: #5b6572;
	--primary: #5e4bff;
	--primary-2: #00b7ff;
	--accent: #00c775;
	--card: rgba(10,16,28,0.04);
	--stroke: rgba(13,18,32,0.08);
	--shadow: 0 10px 30px rgba(13,18,32,0.10);
}

/* Theme transition */
html.theme-animating, html.theme-animating * {
	transition: color .45s ease, background-color .45s ease, border-color .45s ease, filter .45s ease, opacity .45s ease, box-shadow .45s ease;
}

.nav-list {
	padding-left: 0;
}

/* Telegram Button Styles */
.telegram-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: linear-gradient(135deg, #0088cc, #00a8ff);
	color: white;
	text-decoration: none;
	border-radius: 12px;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
	border: none;
	cursor: pointer;
}

.telegram-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
	background: linear-gradient(135deg, #0077bb, #0099ee);
}

.telegram-btn:active {
	transform: translateY(0);
}

.telegram-btn svg {
	transition: transform 0.3s ease;
}

.telegram-btn:hover svg {
	transform: scale(1.1);
}

/* Telegram Section */
.telegram-section {
	margin-top: 2rem;
}

.telegram-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: var(--radius);
	backdrop-filter: var(--glass);
	transition: all 0.3s ease;
}

.telegram-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.telegram-icon {
	font-size: 2.5rem;
	animation: pulse 2s infinite;
}

.telegram-content h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text);
}

.telegram-content p {
	margin: 0 0 1rem 0;
	color: var(--muted);
	font-size: 0.9rem;
}

.btn-telegram {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: linear-gradient(135deg, #0088cc, #00a8ff);
	color: white;
	text-decoration: none;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
	border: none;
	cursor: pointer;
}

.btn-telegram:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
	background: linear-gradient(135deg, #0077bb, #0099ee);
	color: white;
	text-decoration: none;
}

.btn-telegram:active {
	transform: translateY(0);
}

.btn-telegram svg {
	transition: transform 0.3s ease;
}

.btn-telegram:hover svg {
	transform: scale(1.1);
}

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

/* Responsive */
@media (max-width: 768px) {
	.telegram-card {
		flex-direction: column;
		text-align: center;
	}
	
	.telegram-btn {
		font-size: 13px;
		padding: 6px 12px;
	}
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: Inter, Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--text);
	background:
		radial-gradient(1200px 600px at 85% -10%, rgba(124,108,255,0.15), transparent 60%),
		radial-gradient(900px 600px at -10% 20%, rgba(83,224,255,0.18), transparent 60%),
		linear-gradient(180deg, var(--bg), var(--bg));
	overflow-x: hidden;
}

img { 
	max-width: 100%; 
	display: block; 
	height: auto;
	object-fit: cover;
	loading: lazy;
}
a { color: inherit; text-decoration: none; }
.no-scroll { overflow: hidden; }

.container { width: min(1160px, 92%); margin: 0 auto; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 12px 18px; border-radius: 12px; border: 1px solid var(--stroke);
	background: var(--card); color: var(--text); backdrop-filter: var(--glass); box-shadow: var(--shadow);
	cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-2px); filter: saturate(115%); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 14px 22px; font-weight: 700; }
.btn-sm { padding: 8px 12px; font-size: 14px; }
.btn-primary { 
	background: linear-gradient(135deg, var(--primary), var(--primary-2)); 
	border: none; 
	color: #fff; 
	position: relative;
	overflow: hidden;
}
.btn-primary::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	transition: left 0.5s ease;
}
.btn-primary:hover::before {
	left: 100%;
}
.btn-primary:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}
.btn-ghost { background: transparent; border: 1px solid var(--stroke); }

.link { color: var(--primary-2); text-decoration: underline; text-underline-offset: 4px; }

.site-header {
	top: 0; z-index: 50; background: transparent;
	transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
	width: 100%;
}


/* Саня у тебя в стилях полный пиздец! */
main {
	margin-top: 30px;
}

.site-header.elevated {
	background: color-mix(in oklab, var(--bg-elev) 86%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--stroke);
	box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.site-header.fancy { position: fixed; isolation: isolate; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }

.header-glow {
	position: absolute; inset: -20px 0 auto 0; height: 120px; z-index: -1;
	background: var(--header-grad);
	filter: blur(22px); opacity: .6; pointer-events: none;
}
.scroll-progress { position: absolute; inset: auto 0 0 0; height: 2px; background: transparent; }
.scroll-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--underline); }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .2px; }
.brand-logo { font-size: 22px; }
.brand-name .accent { color: var(--primary-2); }

.nav { position: relative; }
.nav-toggle {
	display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
	align-items: center; justify-content: center; background: transparent;
	border: 1px solid var(--stroke); border-radius: 10px; color: var(--text);
}
.nav-toggle span { width: 18px; height: 2px; background: currentColor; display: block; }
.nav-list { display: flex; gap: 18px; align-items: center; list-style: none; }
.nav-list a { padding: 8px 10px; border-radius: 10px; position: relative; }
.nav-list a:hover { background: var(--card); }
.nav-list a.active { color: color-mix(in oklab, var(--text) 90%, var(--primary-2)); }
.nav-underline {
	position: absolute; bottom: -6px; left: 0; height: 3px; width: 40px; border-radius: 3px;
	background: var(--underline); transform: translateX(0); transition: transform .25s ease, width .25s ease;
}

.header-controls {
	display: flex; gap: 8px; align-items: center;
}
.theme-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--card);
	position: relative; overflow: hidden; transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.theme-toggle:hover { transform: translateY(-2px); }
.theme-toggle .icon { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .45s ease, transform .45s ease; }
html[data-theme="dark"] .theme-toggle .sun { opacity: 0; transform: rotate(-20deg) scale(.9); }
html[data-theme="dark"] .theme-toggle .moon { opacity: 1; transform: rotate(0deg) scale(1); }
html[data-theme="light"] .theme-toggle .sun { opacity: 1; transform: rotate(0deg) scale(1); }
html[data-theme="light"] .theme-toggle .moon { opacity: 0; transform: rotate(20deg) scale(.9); }
.theme-toggle .sparkle {
	position: absolute; inset: -30%; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.9), transparent 40%);
	border-radius: 50%; filter: blur(8px); opacity: 0; transform: scale(.2);
}
.theme-toggle .sparkle.blast { animation: sparkle .6s ease forwards; }
@keyframes sparkle {
	0% { opacity: 0; transform: scale(.2); }
	40% { opacity: .8; transform: scale(1.1); }
	100% { opacity: 0; transform: scale(1.6); }
}

/* New sun-moon animation styles */
.sun-moon {
	position: relative;
	width: 24px;
	height: 24px;
}

.sun, .moon {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.moon {
	opacity: 0;
	transform: rotate(-90deg);
}

.dark .sun {
	opacity: 0;
	transform: rotate(90deg);
}

.dark .moon {
	opacity: 1;
	transform: rotate(0deg);
}

.theme-toggle:hover {
	transform: translateY(-2px) scale(1.1);
}

.hero { position: relative; padding: 80px 0 40px; }
.bg-grid {
	position: absolute; inset: 0; pointer-events: none; opacity: .25;
	background-image:
		linear-gradient(to right, color-mix(in oklab, var(--stroke) 70%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in oklab, var(--stroke) 70%, transparent) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: radial-gradient(60% 60% at 50% 20%, #000 40%, transparent 80%);
	animation: gridFlow 18s linear infinite;
}
@keyframes gridFlow {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 160px 80px, 0 160px; }
}

.hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; }
.hero-copy h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.05; margin: 0 0 14px; letter-spacing: -0.02em; }
.hero-copy p { color: var(--muted); font-size: 18px; margin: 0 0 20px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.hero-badges { display: flex; gap: 10px; list-style: none; padding: 0; margin: 14px 0 0; color: var(--muted); }
.hero-badges li { border: 1px dashed var(--stroke); padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.03); }

.reveal { opacity: 0; transform: translateY(16px); filter: blur(4px); transition: opacity .6s ease, transform .6s ease, filter .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal.delay { transition-delay: .12s; }

.hero-visual { position: relative; }
.orb {
	position: absolute; inset: -10% -10% auto auto; width: 260px; height: 260px; border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(124,108,255,.6), transparent 60%),
	            radial-gradient(circle at 70% 70%, rgba(83,224,255,.6), transparent 60%);
	filter: blur(30px); opacity: .6; pointer-events: none;
	animation: orbFloat 8s ease-in-out infinite;
}
@keyframes orbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.device-card {
	position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--stroke);
	background: var(--card); backdrop-filter: var(--glass); box-shadow: var(--shadow);
	transform-style: preserve-3d; transition: transform .15s ease, box-shadow .25s ease;
}
.device-card:hover { box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.device-card img { aspect-ratio: 4/3; width: 100%; object-fit: cover; }
.device-info { padding: 14px; }
.device-info h3 { margin: 0 0 6px; }
.device-info p { margin: 0; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.stat { display: grid; gap: 2px; place-items: start; border: 1px solid var(--stroke); background: var(--card); border-radius: 16px; padding: 12px 14px; }
.stat .num { font-size: 28px; font-weight: 800; }
.stat .unit { margin-left: 4px; color: var(--muted); }
.stat p { margin: 0; color: var(--muted); font-size: 12px; }

.scroll-indicator {
	position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
	padding: 10px 14px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--card);
	animation: float 2s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -8px); } }

.section { padding: 70px 0; }
.section.alt { background: color-mix(in oklab, var(--bg-elev) 86%, transparent); }

.grid-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: start; }
.list-check { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; }
.list-check li { position: relative; padding-left: 28px; }
.list-check li::before { content: "✔"; position: absolute; left: 0; color: var(--accent); }

.inline-cta { display: flex; gap: 12px; align-items: center; margin-top: 10px; }

.company-info {
	margin: 40px 0;
	padding: 32px;
	background: linear-gradient(135deg, rgba(124,108,255,0.08), rgba(83,224,255,0.05));
	border-radius: 24px;
	border: 1px solid rgba(124,108,255,0.2);
	backdrop-filter: var(--glass);
	box-shadow: var(--shadow);
	transition: all 0.3s ease;
}

.company-info:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
	border-color: rgba(124,108,255,0.3);
}

.company-info h3 {
	color: var(--primary);
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 12px;
}

.company-info p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--text);
	margin-bottom: 24px;
}

.company-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 24px;
}

.company-stat {
	text-align: center;
	padding: 20px 16px;
	background: rgba(255,255,255,0.06);
	border-radius: 16px;
	border: 1px solid var(--stroke);
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.company-stat:hover {
	transform: translateY(-4px);
	background: rgba(255,255,255,0.1);
	border-color: var(--primary);
	box-shadow: 0 8px 32px rgba(124,108,255,0.2);
}

.stat-number {
	display: block;
	font-size: 32px;
	font-weight: 800;
	color: var(--primary);
	margin-bottom: 8px;
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.stat-label {
	font-size: 14px;
	color: var(--muted);
	font-weight: 500;
}

.company-mission {
	margin: 40px 0 20px;
	padding: 32px;
	background: linear-gradient(135deg, rgba(161,255,176,0.08), rgba(124,108,255,0.05));
	border-radius: 24px;
	border: 1px solid rgba(161,255,176,0.2);
	backdrop-filter: var(--glass);
	box-shadow: var(--shadow);
	transition: all 0.3s ease;
}

.company-mission:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
	border-color: rgba(161,255,176,0.3);
}

.company-mission h3 {
	color: var(--accent);
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 12px;
}

.company-mission p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text);
	margin-bottom: 24px;
}

/* Action Section Styles */
.action-section {
	text-align: center;
	max-width: 1000px;
	margin: 0 auto;
}

.action-header {
	margin-bottom: 40px;
}

.action-header h2 {
	font-size: clamp(32px, 5vw, 48px);
	margin-bottom: 16px;
	color: var(--text);
}

.action-header p {
	font-size: 18px;
	color: var(--muted);
	max-width: 600px;
	margin: 0 auto;
}

.action-video {
	margin: 40px 0;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--shadow);
	border: 1px solid var(--stroke);
	background: var(--card);
	backdrop-filter: var(--glass);
}

.action-video video {
	width: 100%;
	height: auto;
	border-radius: 24px;
	display: block;
}

.action-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-top: 48px;
}

.feature-item {
	text-align: center;
	padding: 24px;
	border-radius: 20px;
	background: var(--card);
	border: 1px solid var(--stroke);
	backdrop-filter: var(--glass);
	transition: all 0.3s ease;
}

.feature-item:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow);
	border-color: var(--primary);
}

.feature-icon {
	font-size: 48px;
	margin-bottom: 16px;
	display: block;
}

.feature-item h3 {
	font-size: 20px;
	margin: 0 0 12px 0;
	color: var(--text);
}

.feature-item p {
	font-size: 14px;
	color: var(--muted);
	margin: 0;
	line-height: 1.5;
}

.media-stack { position: relative; }
.media-stack .rounded { border-radius: 18px; }
.media-stack .shadow { box-shadow: var(--shadow); border: 1px solid var(--stroke); }
.media-stack .float { position: absolute; right: -16px; bottom: -16px; width: 46%; box-shadow: var(--shadow); border: 1px solid var(--stroke); }

/* Video styles */
video {
	width: 100%;
	height: auto;
	border-radius: 18px;
	object-fit: cover;
	background: var(--card);
	transition: transform 0.3s ease;
}

video:hover {
	transform: scale(1.02);
}

video::-webkit-media-controls {
	background: rgba(0,0,0,0.7);
	border-radius: 0 0 18px 18px;
}

video::-webkit-media-controls-play-button {
	background: var(--primary);
	border-radius: 50%;
	transition: background 0.3s ease;
}

video::-webkit-media-controls-play-button:hover {
	background: var(--primary-2);
}

/* Video responsive */
@media (max-width: 767px) {
	video {
		border-radius: 12px;
	}
	
	video::-webkit-media-controls {
		border-radius: 0 0 12px 12px;
	}
}

.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature-card { padding: 18px; border-radius: 18px; border: 1px solid var(--stroke); background: var(--card); backdrop-filter: var(--glass); box-shadow: var(--shadow); transition: transform .2s ease, border-color .2s ease, background .2s ease, filter .2s ease; }
.feature-card .icon { font-size: 26px; }
.feature-card h3 { margin: 8px 0 6px; }
.feature-card p { margin: 0 0 10px; color: var(--muted); }
.feature-card .chip { 
	display: inline-block; 
	font-size: 12px; 
	font-weight: 600;
	padding: 8px 16px; 
	border-radius: 999px; 
	border: 1px solid var(--primary); 
	background: linear-gradient(135deg, rgba(124,108,255,0.1), rgba(83,224,255,0.1)); 
	color: var(--primary);
	transition: all 0.3s ease;
	cursor: pointer;
	text-decoration: none;
}
.feature-card .chip:hover {
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(124,108,255,0.3);
}
.feature-card.pop { transform: translateY(-6px) scale(1.02); filter: saturate(120%); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.product-card { display: grid; border-radius: 20px; overflow: hidden; border: 1px solid var(--stroke); background: var(--card); box-shadow: var(--shadow); transform-style: preserve-3d; transition: transform .15s ease, box-shadow .2s ease; }
.product-card:hover { box-shadow: 0 18px 48px rgba(0,0,0,.28); }
.product-media { position: relative; }
.product-media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.badge { position: absolute; left: 12px; top: 12px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-alt {
	position: absolute;
	right: 12px;
	top: 12px;
	background: linear-gradient(135deg, #00c775, #9cffdb);
	color: #022b1f;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	border: 2px solid rgba(255,255,255,0.3);
	box-shadow: 0 2px 8px rgba(0, 200, 117, 0.3);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: center;
}
.product-body { padding: 14px; display: grid; gap: 10px; }
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.tags li { font-size: 12px; color: var(--muted); border: 1px dashed var(--stroke); padding: 6px 8px; border-radius: 999px; }
.product-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.accordion { display: grid; gap: 8px; border-top: 1px dashed var(--stroke); padding-top: 10px; }
.acc-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }

.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee 18s linear infinite; }
.marquee.pause .marquee-track { animation-play-state: paused; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.quote { min-width: 280px; max-width: 360px; border: 1px solid var(--stroke); background: var(--card); border-radius: 16px; padding: 14px; }
.quote blockquote { margin: 0 0 8px; }
.quote figcaption { color: var(--muted); }

.contact-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 8px; color: var(--muted); }

.contact-form { 
	display: grid; gap: 20px; border: 1px solid var(--stroke); padding: 24px; border-radius: 20px; 
	background: var(--card); backdrop-filter: var(--glass); box-shadow: var(--shadow);
	animation: formAppear 0.8s ease;
}
@keyframes formAppear {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}
.contact-form label { 
	display: grid; gap: 8px; font-weight: 600; 
	position: relative;
	animation: fieldAppear 0.6s ease;
	animation-fill-mode: both;
}
.contact-form label:nth-child(1) { animation-delay: 0.1s; }
.contact-form label:nth-child(2) { animation-delay: 0.2s; }
.contact-form label:nth-child(3) { animation-delay: 0.3s; }
@keyframes fieldAppear {
	0% { opacity: 0; transform: translateX(-20px); }
	100% { opacity: 1; transform: translateX(0); }
}
.contact-form label::before { content: none; }
.contact-form input, .contact-form textarea { 
	border: 2px solid var(--stroke); 
	border-radius: 16px; 
	background: rgba(255,255,255,0.02); 
	color: var(--text); 
	padding: 16px 16px 16px 48px; 
	outline: none; 
	transition: all 0.3s ease;
	font-size: 16px;
	position: relative;
}
.contact-form input:hover, .contact-form textarea:hover {
	border-color: color-mix(in oklab, var(--primary) 30%, var(--stroke));
	background: rgba(255,255,255,0.04);
	transform: translateY(-1px);
}
.contact-form input::placeholder, .contact-form textarea::placeholder {
	color: var(--muted);
	transition: opacity 0.3s ease;
}
.contact-form input:focus::placeholder, .contact-form textarea:focus::placeholder {
	opacity: 0.7;
}
.contact-form textarea {
	padding: 16px 16px 16px 48px;
	resize: vertical;
	min-height: 120px;
}
.contact-form input:focus, .contact-form textarea:focus { 
	border-color: var(--primary); 
	background: rgba(124,108,255,0.05); 
	box-shadow: 0 0 0 4px rgba(124,108,255,0.15), 0 8px 32px rgba(124,108,255,0.1);
	transform: translateY(-2px);
	animation: inputFocus 0.6s ease;
}
@keyframes inputFocus {
	0% { box-shadow: 0 0 0 0 rgba(124,108,255,0.4); }
	50% { box-shadow: 0 0 0 8px rgba(124,108,255,0.1), 0 8px 32px rgba(124,108,255,0.1); }
	100% { box-shadow: 0 0 0 4px rgba(124,108,255,0.15), 0 8px 32px rgba(124,108,255,0.1); }
}
@keyframes iconPulse {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 0.8; }
}
.form-actions { display: grid; gap: 8px; }
.form-note { margin: 0; color: var(--muted); font-size: 12px; }
.was-validated :invalid { 
	border-color: var(--danger); 
	background: rgba(255,107,107,0.05);
	animation: shake 0.5s ease;
}
.was-validated :invalid:focus {
	box-shadow: 0 0 0 4px rgba(255,107,107,0.15), 0 8px 32px rgba(255,107,107,0.1);
}
@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* Form success animation */
.form-success {
	animation: formSuccessPulse 0.6s ease-out;
}

@keyframes formSuccessPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(161, 255, 176, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(161, 255, 176, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(161, 255, 176, 0);
	}
}

.btn-success {
	background: linear-gradient(135deg, var(--accent), #00c775) !important;
	color: white !important;
	border: none !important;
	animation: btnSuccessGlow 0.8s ease-out;
}

@keyframes btnSuccessGlow {
	0% {
		box-shadow: 0 0 0 0 rgba(161, 255, 176, 0.4);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(161, 255, 176, 0.2);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(161, 255, 176, 0);
	}
}

.success-icon {
	display: inline-block;
	margin-right: 8px;
	font-size: 16px;
	animation: checkmarkBounce 0.6s ease-out;
}

@keyframes checkmarkBounce {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

.site-footer { border-top: 1px solid var(--stroke); padding: 18px 0; background: color-mix(in oklab, var(--bg-elev) 80%, transparent); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.footer-nav { list-style: none; display: flex; gap: 14px; padding: 0; margin: 0; }
.footer-nav a { color: var(--muted); }
.footer-nav a:hover { color: var(--text); }

.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; }
.modal-dialog { position: relative; z-index: 1; width: min(560px, 92%); border-radius: 20px; background: var(--bg-elev); color: var(--text); padding: 18px; border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.modal-dialog.modal-large { width: min(800px, 95%); max-height: 75vh; overflow-y: auto; }
.modal-content { margin-top: 16px; }
.modal-content h4 { color: var(--primary); margin: 16px 0 8px; }
.modal-content h4:first-child { margin-top: 0; }
.modal-content ul { margin: 8px 0; padding-left: 20px; }
.modal-content li { margin: 4px 0; color: var(--muted); }
.modal-close { position: absolute; right: 10px; top: 10px; border: 1px solid var(--stroke); background: var(--card); border-radius: 10px; width: 36px; height: 36px; cursor: pointer; }
.modal-form { display: grid; gap: 20px; margin-top: 20px; }
.modal-form label { 
	display: grid; gap: 8px; font-weight: 600; 
	position: relative;
}
.modal-form label::before { content: none; }
.modal-form input { 
	border: 2px solid var(--stroke); 
	border-radius: 16px; 
	background: rgba(255,255,255,0.02); 
	color: var(--text); 
	padding: 16px 16px 16px 48px; 
	outline: none; 
	transition: all 0.3s ease;
	font-size: 16px;
	position: relative;
}
.modal-form input:hover {
	border-color: color-mix(in oklab, var(--primary) 30%, var(--stroke));
	background: rgba(255,255,255,0.04);
	transform: translateY(-1px);
}
.modal-form input::placeholder {
	color: var(--muted);
	transition: opacity 0.3s ease;
}
.modal-form input:focus::placeholder {
	opacity: 0.7;
}
.modal-form input:focus { 
	border-color: var(--primary); 
	background: rgba(124,108,255,0.05); 
	box-shadow: 0 0 0 4px rgba(124,108,255,0.15), 0 8px 32px rgba(124,108,255,0.1);
	transform: translateY(-2px);
	animation: inputFocus 0.6s ease;
}
.modal-success h4 { margin: 0 0 6px; }

/* Responsive Design - Mobile First Approach */

/* Extra Large Screens (1400px+) */
@media (min-width: 1400px) {
	.hero-inner { gap: 48px; }
	.features { grid-template-columns: repeat(4, 1fr); gap: 20px; }
	.cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.hero-copy h1 { font-size: 64px; }
	.hero-copy p { font-size: 20px; }
}

/* Large Screens (1200px - 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
	.hero-inner { gap: 36px; }
	.features { grid-template-columns: repeat(4, 1fr); gap: 16px; }
	.cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* Medium-Large Screens (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
	.hero-inner { gap: 32px; }
	.features { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.hero-copy h1 { font-size: clamp(40px, 5vw, 56px); }
	.hero-copy p { font-size: 18px; }
}

/* Tablets (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
	.cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.media-stack .float { position: static; width: 100%; margin-top: 16px; }
	.section { padding: 60px 0; }
}

/* Tablets (991px) */
@media (max-width: 991px) {
	.hero-inner { gap: 28px; }
	.hero-copy h1 { font-size: clamp(32px, 4vw, 48px); }
	.hero-copy p { font-size: 17px; }
	.hero { padding: 70px 0 40px; }
	.grid-2, .hero-inner { grid-template-columns: 1fr; }
	.features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.action-features { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* Mobile Large (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
	.header-inner { padding: 12px 0; }
	.hero { padding: 60px 0 30px; }
	.section { padding: 50px 0; }
	.contact-form { padding: 20px; gap: 16px; }
	.modal-dialog { width: 95%; padding: 16px; }
	.modal-dialog.modal-large { width: 98%; }
	.stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.stat { padding: 10px 12px; }
	.stat .num { font-size: 24px; }
	.company-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.company-info { padding: 16px; margin: 16px 0; }
	.features { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.hero-copy h1 { font-size: clamp(28px, 4vw, 40px); }
	.hero-copy p { font-size: 16px; }
	.hero-cta { flex-direction: column; align-items: stretch; }
	.hero-badges { flex-wrap: wrap; }
	.action-features { grid-template-columns: 1fr; gap: 20px; }
	.action-video { margin: 30px 0; }
}

@media (max-width: 890px){
	.nav-toggle { display: flex; margin-right: 10px;}
	.nav-list {
		position: absolute; right: 0; top: 56px; display: grid; gap: 8px; padding: 12px; min-width: 200px;
		border: 1px solid var(--stroke); border-radius: 14px; background: var(--bg-elev); box-shadow: var(--shadow);
		transform-origin: top right; transform: scale(.96); opacity: 0; pointer-events: none; transition: transform .15s ease, opacity .15s ease;
	}
	.nav-list.open { transform: scale(1); opacity: 1; pointer-events: auto; }

	.header-inner {
		justify-content: unset;
	}

	.brand {
    	margin-right: auto;
	}

	.nav-underline {
		display: none;
	}

	main {
    	margin-top: 10px;
	}
}

/* Mobile Medium (480px - 575px) <-- гениально | Я это в рот ебал*/
@media (max-width: 575px){
	.stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.cards { grid-template-columns: 1fr; gap: 12px; }
	.features { grid-template-columns: 1fr; gap: 12px; }
	.hero-cta { flex-direction: column; align-items: stretch; }
	.hero-badges { flex-wrap: wrap; }
	.contact-form input, .contact-form textarea { padding: 14px 14px 14px 44px; }
	.modal-form input { padding: 14px 14px 14px 44px; }
	.company-stats { grid-template-columns: 1fr; gap: 10px; }
	.hero-copy h1 { font-size: clamp(24px, 5vw, 32px); }
	.hero-copy p { font-size: 15px; }
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
	.hero-copy h1 { font-size: 24px; line-height: 1.2; }
	.hero-copy p { font-size: 14px; }
	.contact-form { padding: 16px; gap: 12px; }
	.contact-list li {
		display: flex;
		align-items: center;
		padding: 12px 0;
		font-size: 14px;
		line-height: 1.4;
	}
	.contact-list .modern-location-icon,
	.contact-list .modern-email-icon,
	.contact-list .modern-phone-icon {
		width: 28px;
		height: 28px;
		font-size: 12px;
		margin-right: 10px;
		flex-shrink: 0;
	}
	.modal-dialog { padding: 12px; }
	.btn { padding: 10px 16px; font-size: 14px; }
	.btn-lg { padding: 12px 20px; font-size: 16px; }
	.btn-sm { padding: 8px 12px; font-size: 13px; }
	.stats { grid-template-columns: 1fr; gap: 8px; }
	.stat { padding: 12px; text-align: center; }
	.stat .num { font-size: 20px; }
	.company-stats { grid-template-columns: 1fr; gap: 8px; }
	.company-info { padding: 12px; margin: 12px 0; }
	.features { grid-template-columns: 1fr; gap: 10px; }
	.feature-card { padding: 16px; }
	.hero { padding: 50px 0 20px; }
	.section { padding: 40px 0; }
	.hero-cta { gap: 8px; }
	.hero-badges { gap: 6px; }
	.hero-badges li { padding: 6px 10px; font-size: 12px; }
	.action-features { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
	.action-video { margin: 24px 0; }
	.feature-item { padding: 20px; }
	.feature-icon { font-size: 40px; }
}

/* Extra Small Screens (less than 320px) */
@media (max-width: 319px) {
	.container {padding: 0 8px;}
	.hero-copy h1 { font-size: 20px; }
	.hero-copy p { font-size: 13px; }
	.btn { padding: 8px 12px; font-size: 13px; }
	.btn-lg { padding: 10px 16px; font-size: 14px; }
	.contact-form { padding: 12px; }
	.modal-dialog { padding: 8px; }
	.stats { gap: 6px; }
	.stat { padding: 8px; }
	.stat .num { font-size: 18px; }
	.feature-card { padding: 12px; }
	.hero { padding: 40px 0 15px; }
	.section { padding: 30px 0; }
}

/* Ultra-wide screens */
@media (min-width: 1600px) {
	.hero-inner { grid-template-columns: 1.3fr 1fr; gap: 60px; }
	.features { grid-template-columns: repeat(5, 1fr); gap: 24px; }
	.cards { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* Landscape phones and small tablets */
@media (max-width: 640px) and (orientation: landscape) {
	.hero { padding: 60px 0 30px; }
	.hero-copy h1 { font-size: clamp(24px, 4vw, 36px); }
	.hero-inner { grid-template-columns: 1fr; gap: 24px; }
	.stats { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
}

/* Touch devices - larger touch targets */
@media (hover: none) and (pointer: coarse) {
	.btn { min-height: 44px; padding: 12px 20px; }
	.nav-list a { padding: 12px 14px; }
	.theme-toggle { width: 48px; height: 48px; }
	.modal-close { width: 40px; height: 40px; }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	:root {
		--stroke: rgba(255,255,255,0.4);
		--card: rgba(255,255,255,0.08);
	}

	.btn:hover { transform: none; filter: brightness(1.2); }
	.product-card:hover { transform: none; box-shadow: 0 12px 32px rgba(0,0,0,.4); }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.particle { display: none; }
	.orb { animation: none; }
}

/* Print styles */
@media print {
	.floating-particles,
	.theme-toggle,
	.nav-toggle,
	.modal,
	.video,
	.action-video video {
		display: none !important;
	}

	body { background: white !important; color: black !important; }
	.container { width: 100% !important; max-width: none !important; }
	.section { padding: 20px 0 !important; }
	.btn { border: 1px solid black !important; background: white !important; color: black !important; }
}

/* Dark mode specific adjustments */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--bg: #0a0c0f;
		--card: rgba(255,255,255,0.04);
	}
}

/* Focus visible improvements */
@media (min-width: 768px) {
	:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 3px;
	}
}

/* Container query support for future browsers */
@container (min-width: 768px) {
	.hero-inner {
		grid-template-columns: 1.2fr 1fr;
	}
}

/* Improved grid layouts for different screen sizes */
@media (min-width: 768px) and (max-width: 1024px) {
	.grid-2 {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}

	.action-features {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

@media (min-width: 1024px) and (max-width: 1200px) {
	.grid-2 {
		grid-template-columns: 1.1fr 1fr;
		gap: 28px;
	}

	.action-features {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
}

/* Improved form layouts on tablets */
@media (min-width: 768px) and (max-width: 1024px) {
	.contact-form {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.contact-form label {
		grid-column: span 2;
	}

	.contact-form .form-actions {
		grid-column: span 2;
		text-align: center;
	}
}

/* Better spacing for larger screens */
@media (min-width: 1200px) {
	.section { padding: 80px 0; }
	.hero { padding: 100px 0 50px; }
	.company-info { margin: 50px 0; padding: 40px; }
	.company-mission { margin: 50px 0 30px; padding: 40px; }
}

/* Improved modal responsiveness */
@media (max-width: 480px) {
	.modal-dialog {
		margin: 10px;
		width: calc(100vw - 20px);
		max-height: calc(100vh - 20px);
	}

	.team-members {
		grid-template-columns: 1fr;
	}

	.specs-grid {
		grid-template-columns: 1fr;
	}
}

/* Better image aspect ratios for different screens */
@media (max-width: 768px) {
	.device-card img {
		aspect-ratio: 4/3;
	}

	.product-media img {
		aspect-ratio: 4/3;
	}
}

@media (min-width: 768px) {
	.device-card img {
		aspect-ratio: 16/10;
	}

	.product-media img {
		aspect-ratio: 3/2;
	}
}

/* Improved typography scaling */
@media (min-width: 1200px) {
	.hero-copy h1 {
		font-size: clamp(40px, 6vw, 64px);
		line-height: 1.1;
	}

	.section h2 {
		font-size: clamp(36px, 4vw, 48px);
	}
}

/* Better button layouts on small screens */
@media (max-width: 480px) {
	.product-actions {
		flex-direction: column;
		gap: 8px;
	}

	.product-actions .btn {
		width: 100%;
		text-align: center;
	}

	.inline-cta {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
}

/* Improved navigation on tablets */
@media (min-width: 768px) and (max-width: 1024px) {
	.nav-list {
		gap: 16px;
	}

	.nav-list a {
		padding: 10px 12px;
		font-size: 15px;
	}
}

/* Better footer layout */
@media (max-width: 640px) {
	.footer-inner {
		flex-direction: column;
		align-items: center;
		gap: 16px;
		text-align: center;
	}

	.footer-nav {
		justify-content: center;
	}
}

/* Modern Phone Icon Styles */
.modern-phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: linear-gradient(135deg, #3b82f6, #1d4ed8);
	color: white;
	text-decoration: none;
	font-size: 1.1rem;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
	transition: all 0.3s ease;
	animation: phonePulse 2s infinite;
	margin-right: 0.5rem;
}

.modern-phone-icon:hover {
	transform: translateY(-2px) scale(1.1);
	box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
	background: linear-gradient(135deg, #2563eb, #1e40af);
}

.modern-phone-icon:active {
	transform: translateY(0) scale(0.95);
}

@keyframes phonePulse {
	0% {
		box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
	}
}

/* Modern Email Icon Styles */
.modern-email-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: linear-gradient(135deg, #10b981, #059669);
	color: white;
	text-decoration: none;
	font-size: 1.1rem;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
	transition: all 0.3s ease;
	animation: emailPulse 2s infinite;
	margin-right: 0.5rem;
}

.modern-email-icon:hover {
	transform: translateY(-2px) scale(1.1);
	box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
	background: linear-gradient(135deg, #059669, #047857);
}

.modern-email-icon:active {
	transform: translateY(0) scale(0.95);
}

@keyframes emailPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
	}
}

/* Modern Location Icon Styles */
.modern-location-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: linear-gradient(135deg, #10b981, #059669);
	color: white;
	text-decoration: none;
	font-size: 1.1rem;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
	transition: all 0.3s ease;
	animation: locationPulse 2s infinite;
	margin-right: 0.5rem;
	position: relative;
	overflow: hidden;
}

.modern-location-icon:hover {
	transform: translateY(-2px) scale(1.1);
	box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
	background: linear-gradient(135deg, #059669, #047857);
}

.modern-location-icon:active {
	transform: translateY(0) scale(0.95);
}

.modern-location-icon::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
	opacity: 0;
	transition: all 0.5s ease;
}

.modern-location-icon:hover::after {
	opacity: 1;
	transform: scale(1.5);
}

@keyframes locationPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
	}
}

/* Focus styles */
:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 70%, var(--primary-2)); outline-offset: 2px; }

/* Enhanced button effects */
.btn-enhanced {
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.btn-enhanced::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	transition: left 0.5s ease;
}

.btn-enhanced:hover::before {
	left: 100%;
}

.btn-enhanced:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Success button animation */
.btn-success {
	background: linear-gradient(135deg, var(--accent), #00c775) !important;
	animation: successPulse 0.6s ease;
}

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

.success-icon {
	display: inline-block;
	margin-right: 8px;
	animation: checkmark 0.8s ease;
}

@keyframes checkmark {
	0% { transform: scale(0) rotate(-180deg); opacity: 0; }
	50% { transform: scale(1.2) rotate(0deg); opacity: 1; }
	100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Form success animation */
.form-success {
	animation: formSuccess 0.6s ease;
}

@keyframes formSuccess {
	0% { transform: scale(1); }
	50% { transform: scale(1.02); }
	100% { transform: scale(1); }
}

/* Enhanced feature cards */
.feature-card-enhanced {
	position: relative;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feature-card-enhanced:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.feature-card-enhanced::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	border-radius: 20px;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.feature-card-enhanced:hover::before {
	opacity: 0.3;
}

/* Floating particles animation */
.floating-particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
}

.particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
	border-radius: 50%;
	animation: floatParticle 20s linear infinite;
}

.particle:nth-child(2) { animation-delay: -5s; }
.particle:nth-child(3) { animation-delay: -10s; }
.particle:nth-child(4) { animation-delay: -15s; }
.particle:nth-child(5) { animation-delay: -2s; }
.particle:nth-child(6) { animation-delay: -7s; }
.particle:nth-child(7) { animation-delay: -12s; }
.particle:nth-child(8) { animation-delay: -17s; }
.particle:nth-child(9) { animation-delay: -3s; }
.particle:nth-child(10) { animation-delay: -8s; }

@keyframes floatParticle {
	0% {
		transform: translateY(100vh) rotate(0deg);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateY(-100vh) rotate(360deg);
		opacity: 0;
	}
}

/* Stat animations */
.stat-item {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.6s ease;
}

.stat-item.animate-in {
	opacity: 1;
	transform: translateY(0);
}

/* Enhanced contact icons */
.modern-location-icon,
.modern-email-icon,
.modern-phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	color: white;
	margin-right: 12px;
	transition: all 0.3s ease;
	font-size: 14px;
}

.modern-location-icon:hover,
.modern-email-icon:hover,
.modern-phone-icon:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Team member styling */
.team-members {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 24px;
}

.team-member {
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 16px;
	padding: 24px;
	text-align: center;
	transition: all 0.3s ease;
}

.team-member:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.member-avatar {
	font-size: 48px;
	margin-bottom: 16px;
}

.member-role {
	color: var(--primary);
	font-weight: 600;
	margin-bottom: 8px;
}

.member-description {
	color: var(--muted);
	line-height: 1.6;
	font-size: 14px;
}

.team-cta {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--stroke);
	text-align: center;
}

/* Enhanced modal animations */
.modal.open .modal-dialog {
	animation: modalSlideIn 0.4s ease-out;
}

@keyframes modalSlideIn {
	0% {
		opacity: 0;
		transform: translateY(-50px) scale(0.9);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Gradient text effects */
.gradient-text {
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Pulse animation for important elements */
@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

.pulse-on-hover:hover {
	animation: pulse 0.6s ease;
}

/* Enhanced hero section */
.hero-visual {
	position: relative;
}

.hero-visual::before {
	content: '';
	position: absolute;
	top: -20px;
	left: -20px;
	right: -20px;
	bottom: -20px;
	background: radial-gradient(circle, rgba(124,108,255,0.1) 0%, transparent 70%);
	border-radius: 24px;
	z-index: -1;
	animation: heroGlow 4s ease-in-out infinite alternate;
}

@keyframes heroGlow {
	0% { opacity: 0.3; }
	100% { opacity: 0.6; }
}

/* Smooth reveal animations */
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.in {
	opacity: 1;
	transform: translateY(0);
}

/* Enhanced stats section */
.stats {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 40px;
	flex-wrap: wrap;
}

.stat {
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 16px;
	padding: 20px;
	text-align: center;
	min-width: 120px;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.stat:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.stat .num {
	font-size: 32px;
	font-weight: 800;
	color: var(--primary);
	margin-bottom: 4px;
	transition: all 0.3s ease;
}

.stat:hover .num {
	transform: scale(1.1);
}

.stat p {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

/* Enhanced contact form */
.contact-form {
	position: relative;
}

.contact-form::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	border-radius: 24px;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.contact-form:hover::before {
	opacity: 0.2;
}

/* Loading animation for map */
@keyframes mapLoad {
	0% { opacity: 0; transform: scale(0.95); }
	100% { opacity: 1; transform: scale(1); }
}

.map-container {
	animation: mapLoad 0.8s ease-out;
}

/* Enhanced product cards */
.product-card {
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.product-card:hover {
	transform: translateY(-12px) rotateX(5deg);
	box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}

.product-media {
	overflow: hidden;
	border-radius: 20px 20px 0 0;
}

.product-media img {
	transition: transform 0.4s ease;
}

.product-card:hover .product-media img {
	transform: scale(1.1);
}

/* Telegram section enhancement */
.telegram-section {
	position: relative;
}

.telegram-card {
	transition: all 0.3s ease;
}

.telegram-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* Enhanced badges */
.badge, .badge-alt {
	transition: all 0.3s ease;
}

.badge:hover, .badge-alt:hover {
	transform: scale(1.05);
}

/* Smooth scrolling enhancement */
html {
	scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg);
}

::-webkit-scrollbar-thumb {
	background: var(--primary);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--primary-2);
}

.field { 
	position: relative; 
	display: block; 
}
.field::before { 
	content: attr(data-icon); 
	position: absolute; 
	left: 16px; 
	top: 50%; 
	transform: translateY(-50%); 
	width: 20px; 
	height: 20px; 
	opacity: .8; 
	pointer-events: none; 
	z-index: 1;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: iconPulse 2s ease-in-out infinite;
}
.field:focus-within::before {
	opacity: 1;
	transform: translateY(-50%) scale(1.1);
	animation: none;
}
.field > input, .field > textarea { 
	position: relative; 
	z-index: 2; 
	width: 100%; 
	display: block; 
}
.product-actions .btn-ghost[data-open-accordion] { border: none; background: rgba(255,255,255,0.06); border-radius: 999px; padding: 8px 14px; box-shadow: inset 0 0 0 1px var(--stroke); }
.product-actions .btn-ghost[data-open-accordion]:hover { background: rgba(255,255,255,0.1); }

/* Стили для модального окна характеристик */
.product-feature {
	background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklab, var(--primary) 80%, var(--accent)) 100%);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 24px;
	text-align: center;
	box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.product-feature h4 {
	margin: 0 0 8px 0;
	color: white;
	font-size: 20px;
	font-weight: 700;
}

.product-feature p {
	margin: 0;
	color: rgba(255,255,255,0.9);
	font-size: 16px;
	line-height: 1.5;
}

.specs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-top: 20px;
}

.spec-category {
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--stroke);
	border-radius: 16px;
	padding: 20px;
	transition: all 0.3s ease;
}

.spec-category:hover {
	background: rgba(255,255,255,0.04);
	border-color: color-mix(in oklab, var(--primary) 30%, var(--stroke));
	transform: translateY(-2px);
}

.spec-category h4 {
	margin: 0 0 16px 0;
	color: var(--primary);
	font-size: 18px;
	font-weight: 600;
	border-bottom: 2px solid var(--primary);
	padding-bottom: 8px;
}

.spec-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spec-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	transition: all 0.2s ease;
}

.spec-row:hover {
	background: rgba(255,255,255,0.02);
	padding: 8px 12px;
	border-radius: 8px;
	margin: 0 -12px;
}

.spec-label {
	font-weight: 500;
	color: var(--text);
	flex: 1;
}

.spec-value {
	font-weight: 600;
	color: var(--primary);
	text-align: right;
	flex: 1;
}

/* Анимация нажатия для кнопок характеристик */
@keyframes buttonPress {
	0% { transform: scale(1); }
	50% { transform: scale(0.95); }
	100% { transform: scale(1); }
}

.specs-btn {
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.specs-btn:active {
	animation: buttonPress 0.2s ease;
	transform: scale(0.95);
}

.specs-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.6s ease;
	pointer-events: none;
}

.specs-btn:active::before {
	width: 300px;
	height: 300px;
}

/* Анимация появления модального окна */
#specsModal .modal-dialog {
	animation: modalSlideIn 0.4s ease-out;
}

@keyframes modalSlideIn {
	0% {
		opacity: 0;
		transform: translateY(-50px) scale(0.9);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Анимация появления категорий характеристик */
.spec-category {
	animation: categoryAppear 0.6s ease-out;
	animation-fill-mode: both;
}

.spec-category:nth-child(1) { animation-delay: 0.1s; }
.spec-category:nth-child(2) { animation-delay: 0.2s; }
.spec-category:nth-child(3) { animation-delay: 0.3s; }
.spec-category:nth-child(4) { animation-delay: 0.4s; }
.spec-category:nth-child(5) { animation-delay: 0.5s; }
.spec-category:nth-child(6) { animation-delay: 0.6s; }

@keyframes categoryAppear {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Стили для модального окна команды */
.team-members {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}

.team-member {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 24px;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 16px;
	transition: all 0.3s ease;
}

.team-member:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: var(--primary);
}

.member-avatar {
	font-size: 48px;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	border-radius: 50%;
	color: white;
	flex-shrink: 0;
}

.member-info h4 {
	margin: 0 0 8px 0;
	color: var(--text);
	font-size: 20px;
	font-weight: 700;
}

.member-role {
	color: var(--primary);
	font-weight: 600;
	margin-bottom: 12px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.member-description {
	margin: 0;
	color: var(--muted);
	line-height: 1.6;
	font-size: 14px;
}

.team-cta {
	text-align: center;
	padding: 24px;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 16px;
}

.team-cta p {
	margin: 0 0 16px 0;
	color: var(--muted);
	font-size: 16px;
}

/* Адаптивность для модального окна команды */
@media (max-width: 768px) {
	.team-members {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	
	.team-member {
		flex-direction: column;
		text-align: center;
		padding: 20px;
	}
	
	.member-avatar {
		width: 60px;
		height: 60px;
		font-size: 32px;
	}
}

/* Адаптивность для модального окна характеристик */
@media (max-width: 768px) {
	.specs-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.spec-category {
		padding: 16px;
	}

	.spec-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.spec-value {
		text-align: left;
	}
}

/* Floating particles effect */
.floating-particles {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
}

.particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: var(--primary);
	border-radius: 50%;
	opacity: 0.6;
	animation: floatParticle 20s linear infinite;
}

.particle:nth-child(2n) {
	background: var(--primary-2);
	animation-duration: 25s;
}

.particle:nth-child(3n) {
	background: var(--accent);
	animation-duration: 30s;
}

@keyframes floatParticle {
	0% {
		transform: translateY(100vh) rotate(0deg);
		opacity: 0;
	}
	10% {
		opacity: 0.6;
	}
	90% {
		opacity: 0.6;
	}
	100% {
		transform: translateY(-100px) rotate(360deg);
		opacity: 0;
	}
}

/* Enhanced card hover effects */
.product-card {
	position: relative;
	overflow: hidden;
}

.product-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(124,108,255,0.1), rgba(83,224,255,0.1));
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.product-card:hover::before {
	opacity: 1;
}

.product-card .product-body {
	position: relative;
	z-index: 2;
}

/* Scroll-triggered animations */
.stats-section {
	position: relative;
}

.stat-item {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s ease;
}

.stat-item.animate-in {
	opacity: 1;
	transform: translateY(0);
}

.stat-item:nth-child(1) { transition-delay: 0.1s; }
.stat-item:nth-child(2) { transition-delay: 0.2s; }
.stat-item:nth-child(3) { transition-delay: 0.3s; }

/* Enhanced button effects */
.btn-enhanced {
	position: relative;
	overflow: hidden;
}

.btn-enhanced::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
	transform: translateX(-100%);
	transition: transform 0.6s ease;
}

.btn-enhanced:hover::before {
	transform: translateX(100%);
}

/* Pulse animation for important elements */
@keyframes gentlePulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(124,108,255,0.4);
	}
	50% {
		transform: scale(1.02);
		box-shadow: 0 0 0 8px rgba(124,108,255,0.1);
	}
}

.cta-pulse {
	animation: gentlePulse 3s ease-in-out infinite;
}

/* Gradient text effect */
.gradient-text {
	background: linear-gradient(135deg, var(--primary), var(--primary-2), var(--accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Enhanced feature cards */
.feature-card-enhanced {
	position: relative;
	background: linear-gradient(135deg, var(--card) 0%, rgba(124,108,255,0.05) 100%);
	border: 1px solid var(--stroke);
	transition: all 0.3s ease;
}

.feature-card-enhanced::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(124,108,255,0.1), rgba(83,224,255,0.1));
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 18px;
}

.feature-card-enhanced:hover::before {
	opacity: 1;
}

.feature-card-enhanced .icon {
	transition: transform 0.3s ease;
}

.feature-card-enhanced:hover .icon {
	transform: scale(1.1) rotate(5deg);
}

/* Стили для карты */
.map-section {
	background: color-mix(in oklab, var(--bg-elev) 90%, transparent);
	border-top: 1px solid var(--stroke);
}

.map-section h2 {
	text-align: center;
	margin-bottom: 12px;
	color: var(--text);
}

.map-section p {
	text-align: center;
	color: var(--muted);
	margin-bottom: 32px;
	font-size: 16px;
}

.map-container {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--shadow);
	border: 1px solid var(--stroke);
	background: var(--card);
	backdrop-filter: var(--glass);
	height: 400px;
	transition: all 0.3s ease;
}

.map-container:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.yandex-map {
	width: 100%;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}


/* Адаптивность для карты */
@media (max-width: 991px) {
	.map-container {
		height: 350px;
	}
}

@media (max-width: 767px) {
	.map-container {
		height: 300px;
	}
}

@media (max-width: 575px) {
	.map-container {
		height: 280px;
	}
}

@media (max-width: 479px) {
	.map-container {
		height: 250px;
	}
}

@media (max-width: 319px) {
	.map-container {
		height: 200px;
	}
}