/* Color Palette
   - Primary:  #011936  
   - Secondary:#465362  
   - Accent1:  #A3A5C3  
   - Accent2:  #A9D2D5  
*/

:root{
	--primary: #011936;
	--secondary: #465362;
	--accent1: #A3A5C3; 
	--accent2: #A9D2D5;
	--card-bg: #fbfcfd;
	--muted: #9aa6af;
	--max-width: 820px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background: linear-gradient(180deg, var(--primary), #07172a 90%);
	color:var(--card-bg);
	-webkit-font-smoothing:antialiased;
}

.page-wrapper{
	max-width:var(--max-width);
	margin:22px auto;
	padding:8px;
}

.page-header{
	background: transparent;
	border:2px solid rgba(255,255,255,0.08);
	padding:10px 14px;
	text-align:center;
}
.page-header h1{
	margin:0;
	font-weight:700;
	color:var(--card-bg);
	font-size:20px;
	letter-spacing:0.6px;
}

.content{
	margin-top:14px;
}

.card{
	background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
	border:2px solid var(--secondary);
	margin-bottom:16px;
	box-shadow: 0 6px 18px rgba(2,6,12,0.45);
}

.about-card{
	min-height:260px;
	display:flex;
	align-items:flex-start;
}

.contact-card{
	padding:6px 0 16px 0;
}

.card-inner{
	padding:22px;
	width:100%;
	color:#07202b;
}

.card h2{
	margin:6px 0 0 0;
	text-align:center;
	color:var(--secondary);
	font-weight:600;
}

.lead{
	margin:0;
	color:#12353d;
	line-height:1.6;
	font-size:1rem;
}

a{color:var(--accent2); text-decoration:underline}

.contact-card p{margin:10px 0 0 0; color:var(--muted)}


.page-header::after{
	content:'';
	display:block;
	height:6px;
	width:100%;
	margin-top:10px;
	background: linear-gradient(90deg, rgba(163,165,195,0.95), var(--accent2));
	border-radius:3px;
}

@media (max-width:640px){
	:root{--max-width:94vw}
	.about-card{min-height:200px}
	.page-header h1{font-size:18px}
	.card-inner{padding:16px}
}


.site-nav{
	background: rgba(255,255,255,0.03);
	border-bottom: 1px solid rgba(255,255,255,0.04);
	position:relative; 
}
.site-nav .nav-inner{
	max-width:var(--max-width);
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:flex-end; 
	padding:8px 12px;
}
.nav-logo{
	height:64px;
	display:block;
	background:transparent;
}
.nav-links a{
	color:var(--card-bg);
	text-decoration:none;
	margin-left:18px;
	font-weight:600;
}
.logo-link{display:flex;align-items:center;position:absolute;left:12px;top:50%;transform:translateY(-50%);} 

@media (max-width:480px){
	.nav-inner{padding:8px}
	.nav-links a{margin-left:10px;font-size:14px}
	.nav-logo{height:40px}
	.logo-link{left:8px}
}