:root{
	--bg-1: #071127;
	--bg-2: #0b1220;
	--text: #e9eef6;
	--muted: rgba(233,238,246,0.55);
	--accent: #3aa0ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
	color:var(--text);
}

.page{position:relative;min-height:100vh;overflow:hidden}


.bg-panel{
	/* Cover entire viewport with animated background */
	position:fixed;
	inset:0;
	width:100%;
	height:100%;
	background-image:url('../../static/images/background.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	filter: contrast(.9) saturate(.95) blur(.2px);
	opacity: 0.95;
	z-index: 0;
	will-change: background-position, background-size;
	animation: panZoom 30s ease-in-out infinite;
}

/* Left content area (hero) styled as a large, impactful panel */
.glass-panel{
	position:relative;z-index:2;
	width:min(1100px,64%);
	max-width:1100px;
	padding:6.5rem 4rem 6.5rem 6rem;
	margin-left:6vw;
	margin-top:6vh;
	border-radius:12px;
	/* Darker glass: increase opacity and shift toward black */
	background: linear-gradient(180deg, rgba(8, 10, 12, 0.62), rgba(4, 6, 8, 0.5));
	border:1px solid rgba(0, 0, 0, 0.103);
	box-shadow: 0 40px 120px rgba(0,0,0,0.75);
	backdrop-filter: blur(10px) saturate(1.02);
	-webkit-backdrop-filter: blur(10px) saturate(1.02);
	text-align:left;
}

.site-header{display:flex;align-items:center;justify-content:flex-start;margin-bottom:2rem}
.logo{width:450px;height:auto;display:block}

.hero{max-width:720px}
.headline{
	margin:0 0 .6rem 0;
	font-weight:800;
	line-height:0.98;
	color:var(--text);
	font-size:clamp(2.8rem,7vw,5.6rem);
	letter-spacing:-0.02em;
}
.lead{margin:.8rem 0 1.6rem 0;color:var(--muted);font-size:clamp(1.0rem,2.4vw,1.25rem);max-width:68%}

.contacts{margin-top:1.6rem;color:var(--muted);font-size:0.98rem}
.contacts span{display:block;margin:.28rem 0}

/* subtle underline divider to mimic the mockup's section rhythm */
.glass-panel::after{
	content:'';display:block;height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.03),transparent);margin-top:2.6rem;opacity:.9
}

@media (max-width:1000px){
    	.bg-panel{display:none !important}
	.bg-panel{width:45%}
	.glass-panel{width:86%;padding:4.5rem 2.5rem;margin-left:6vw}
	.logo{width:300px}
}

@media (max-width:820px){
    	.bg-panel{display:none !important}
	.glass-panel{width:92%;margin:0 auto;padding:3rem 1.6rem;border-radius:10px;box-shadow:0 12px 38px rgba(2,6,23,0.55)}
	.headline{font-size:clamp(2rem,6.6vw,3.2rem)}
	.lead{max-width:100%}
	.site-header{justify-content:center}
	.logo{width:300px}
}

/* Mobile-specific background handling: increase baseline size so the image doesn't look small */
@media (max-width:820px){
	/* Hide animated decorative background on small screens for performance and clarity */
	.bg-panel{display:none !important}
	.glass-panel{width:92%;margin:0 auto;padding:3rem 1.6rem;border-radius:10px;box-shadow:0 12px 38px rgba(2,6,23,0.55)}
	.headline{font-size:clamp(2rem,6.6vw,3.2rem)}
	.lead{max-width:100%}
	.site-header{justify-content:center}
	.logo{width:300px}
}

@keyframes panZoomMobile{
	0%{background-position:40% 50%;background-size:170%}
	25%{background-position:48% 46%;background-size:180%}
	50%{background-position:60% 50%;background-size:190%}
	75%{background-position:52% 55%;background-size:180%}
	100%{background-position:40% 50%;background-size:170%}
}

/* Background pan & zoom animation */
@keyframes panZoom{
	0%{background-position:30% 50%;background-size:110%}
	25%{background-position:45% 45%;background-size:115%}
	50%{background-position:70% 50%;background-size:120%}
	75%{background-position:55% 55%;background-size:115%}
	100%{background-position:30% 50%;background-size:110%}
}

@media (prefers-reduced-motion:reduce){
	.bg-panel{animation:none}
}