:root {
		--dark-green: #0F3F2E; /* deep, muted forest */
		--leaf-green: #2F7A4E; /* refined primary */
		--ground-green: #B7CF9A; /* soft desaturated background */
		--white: #FFFFFF;
		--text-dark: #333333;
}

/* Base */
html,body{
	height:100%;
}
body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	background-color: var(--white);
	color: var(--text-dark);
	line-height: 1.6;
}

/* Layout */
header {
	background-color: var(--white);
	border-bottom: 4px solid var(--ground-green);
	padding: 1rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Header inner layout - keeps logo and nav on the same line */
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; flex-wrap:nowrap }
.logo{height:60px}
/* inline logo used inside headings */
.logo-inline{ height:48px; vertical-align:middle; margin-right:0.6rem }

main{max-width:960px;margin:0 auto;padding:4rem 2rem;}

.container{max-width:720px;margin:0 auto}

/* Hero / About */
.hero{ text-align:center;margin-bottom:2rem }
.hero h1{ color:var(--dark-green); font-family:'Montserrat',sans-serif; font-weight:700; font-size:2.5rem; margin-bottom:0.5rem }
.bio{ font-size:1.05rem; color:#444; max-width:720px; margin:0 auto }

/* Buttons */
.btn{ display:inline-block; background-color:var(--ground-green); color:var(--dark-green); padding:0.9rem 1.6rem; border-radius:50px; text-decoration:none; font-weight:700; font-family:'Montserrat',sans-serif; transition:transform .18s,box-shadow .18s }
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,0.08) }

/* Blogs */
.blogs{ margin-top:1.5rem; text-align:left }
.blogs h2{ margin-bottom:0.25rem }
.blogs p.meta{ color:#555; margin-top:0 }
.blogs ul{ padding-left:1.25rem }
.blogs li{ margin:0.6rem 0 }

/* Footer */
footer{ background-color:var(--ground-green); color:var(--dark-green); text-align:center; padding:2rem }

/* Founder section */
.founder-section { margin-top: 3rem; }
.social-links { margin-top: 1.5rem; }

/* Utility */
.muted{ color:#666 }

/* Responsive tweaks */
@media (max-width:640px){
	.hero h1{ font-size:1.75rem }
	main{ padding:2rem }
}

/* Top navigation */
.nav{
	display:flex;
	gap:1rem;
	align-items:center;
}
.nav a{
	color:var(--dark-green);
	text-decoration:none;
	font-weight:600;
	padding:0.4rem 0.6rem;
	border-radius:6px;
}
.nav a:hover{ background: rgba(174,213,129,0.06); color:var(--dark-green) }

/* Active nav link */
.nav a.active{ background:var(--ground-green); color:var(--dark-green); box-shadow:0 2px 6px rgba(174,213,129,0.12) }

/* Focus styles for keyboard users */
.nav a:focus-visible, .btn:focus-visible { outline: 3px solid rgba(174,213,129,0.18); outline-offset: 2px; border-radius:6px }

/* Visually hidden (screen-reader only) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* On small screens collapse nav into stacked links */
@media (max-width:520px){
	.nav{ gap:0.5rem; flex-wrap:wrap }
	.nav a{ display:block; width:100%; padding:0.6rem }
}