:root {
	 --bg: #f6f7fb;
	 --bg-alt: #ffffff;
	 --surface: #ffffff;
	 --surface-2: #f1f5f9;
	 --text: #0f172a;
	 --muted: #475569;
	 --accent: #2563eb;
	 --accent-soft: rgba(37, 99, 235, 0.12);
	 --border: rgba(15, 23, 42, 0.08);
	 --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
	 --radius-lg: 16px;
	 --radius-md: 12px;
	 --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}
/* ========================= RESET + LAYOUT FIX ========================= */
 * {
	 box-sizing: border-box;
}
 html, body {
	 margin: 0;
	 padding: 0;
	 height: 100%;
	 font-family: var(--font);
	 color: var(--text);
	 line-height: 1.6;
}
/* PAGE LAYOUT (THIS FIXES FOOTER) */
 body {
	 display: flex;
	 flex-direction: column;
	 min-height: 100vh;
	/* background image */
	 background: url("../images/background.jpg") center/cover no-repeat fixed;
	 position: relative;
}
/* overlay for readability */
 body::before {
	 content: "";
	 position: fixed;
	 inset: 0;
	 background: rgba(248, 250, 252, 0.82);
	 z-index: -1;
}
/* ========================= TYPOGRAPHY ========================= */
 h1, h2, h3, p {
	 margin: 0;
}
/* ========================= CONTAINER (IMPORTANT FIX) ========================= */
 .container {
	 width: min(1100px, 92%);
	 margin: 0 auto;
	/* IMPORTANT: DO NOT STRETCH */
	 flex: none;
	/* spacing rhythm */
	 padding: 24px 0;
	 display: grid;
	 grid-template-columns: 1fr;
	 gap: 18px;
}
/* ========================= HEADER ========================= */
 .site-header {
	 position: sticky;
	 top: 0;
	 backdrop-filter: blur(10px);
	 background: rgba(255, 255, 255, 0.7);
	 border-bottom: 1px solid var(--border);
	 z-index: 10;
}
 .header-content {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 padding: 18px 0;
}
 h1 {
	 font-size: clamp(1.8rem, 3vw, 2.3rem);
}
 .role {
	 color: var(--accent);
	 font-weight: 500;
}
 .location {
	 color: var(--muted);
	 font-size: 0.9rem;
}
/* ========================= LINKS ========================= */
 .header-links a {
	 text-decoration: none;
	 color: var(--text);
	 padding: 6px 10px;
	 border-radius: 999px;
	 border: 1px solid transparent;
	 transition: 0.2s ease;
}
 .header-links a:hover {
	 background: var(--accent-soft);
	 border-color: var(--accent);
	 transform: translateY(-1px);
}
/* ========================= SECTIONS ========================= */
 section {
	 background: var(--surface);
	 border: 1px solid var(--border);
	 border-radius: var(--radius-lg);
	 box-shadow: var(--shadow);
	 padding: 22px;
	 transition: 0.2s ease;
}
 section:hover {
	 transform: translateY(-2px);
	 background: var(--surface-2);
}
 section h2 {
	 font-size: 0.8rem;
	 letter-spacing: 0.18em;
	 text-transform: uppercase;
	 color: var(--muted);
	 margin-bottom: 12px;
}
/* ========================= SKILLS ========================= */
 .skills-grid {
	 display: grid;
	 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	 gap: 12px;
}
 .skill-group {
	 background: var(--surface-2);
	 border: 1px solid var(--border);
	 border-radius: var(--radius-md);
	 padding: 12px;
}
 .skill-group h3 {
	 color: var(--accent);
	 margin-bottom: 6px;
}
 .skill-group li {
	 color: var(--muted);
	 font-size: 0.9rem;
}
/* ========================= ITEMS ========================= */
 .item {
	 background: var(--surface-2);
	 border: 1px solid var(--border);
	 border-radius: var(--radius-md);
	 padding: 14px;
	 margin-bottom: 12px;
	 transition: 0.2s ease;
}
 .item:hover {
	 transform: translateY(-2px);
	 border-color: var(--accent);
}
 .item-meta {
	 color: var(--muted);
	 font-size: 0.85rem;
}
/* ========================= LINKS ========================= */
 a {
	 color: var(--accent);
}
 a:hover {
	 opacity: 0.85;
}
/* Cloudflare Turnstile */
.cf-turnstile {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px;
	border-radius: 10px;
	background: var(--surface);
	border: 1px solid var(--border);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cf-turnstile:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
/* ========================= FOOTER (STICKS TO BOTTOM) ========================= */
 .site-footer {
	 margin-top: auto;
	 border-top: 1px solid var(--border);
	 background: var(--bg-alt);
}
 .footer-content {
	 display: flex;
	 justify-content: space-between;
	 padding: 18px 0;
	 color: var(--muted);
	 font-size: 0.85rem;
}
/* ========================= FORM ========================= */
 .contact {
	 text-align: center;
	 max-width: 520px;
	 margin: 0 auto;
}
 .contact-sub {
	 color: var(--muted);
	 margin-bottom: 16px;
}
 .contact-form {
	 display: flex;
	 flex-direction: column;
	 gap: 12px;
	 margin-top: 10px;
}
 .contact-form input {
	 font-family: var(--font);
	 padding: 12px;
	 border-radius: 10px;
	 border: 1px solid var(--border);
	 background: var(--surface);
}
 .contact-form input:focus {
	 outline: none;
	 border-color: var(--accent);
}
 .contact-form button {
	 font-family: var(--font);
	 background: var(--accent);
	 color: white;
	 border: none;
	 padding: 12px;
	 border-radius: 10px;
	 font-weight: 600;
	 cursor: pointer;
	 transition: 0.2s ease;
}
 .contact-form button:hover {
	 opacity: 0.9;
}
 .contact-form textarea {
	 font-family: var(--font);
	 background: var(--surface);
	 border: 1px solid var(--border);
	 border-radius: 10px;
	 padding: 12px;
	 color: var(--text);
	 font-size: 0.95rem;
	 resize: none;
	 min-height: 120px;
	 line-height: 1.5;
	 transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
 .contact-form textarea:focus {
	 border-color: var(--accent);
	 outline: none;
	 box-shadow: 0 0 0 3px var(--accent-soft);
}
 .request-access {
	 text-align: center;
	 max-width: 520px;
	 margin: 0 auto;
}
 .request-sub {
	 color: var(--muted);
	 margin-bottom: 16px;
}
 .request-form {
	 display: flex;
	 flex-direction: column;
	 gap: 12px;
	 margin-top: 10px;
}
 .request-form input {
	 font-family: var(--font);
	 padding: 12px;
	 border-radius: 10px;
	 border: 1px solid var(--border);
	 background: var(--surface);
}
 .request-form input:focus {
	 outline: none;
	 border-color: var(--accent);
}
 .request-form button {
	 font-family: var(--font);
	 background: var(--accent);
	 color: white;
	 border: none;
	 padding: 12px;
	 border-radius: 10px;
	 font-weight: 600;
	 cursor: pointer;
	 transition: 0.2s ease;
}
 .request-form button:hover {
	 opacity: 0.9;
}
 .request-form textarea {
	 font-family: var(--font);
	 background: var(--surface);
	 border: 1px solid var(--border);
	 border-radius: 10px;
	 padding: 12px;
	 color: var(--text);
	 font-size: 0.95rem;
	 resize: none;
	 min-height: 120px;
	 line-height: 1.5;
	 transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
 .request-form textarea:focus {
	 border-color: var(--accent);
	 outline: none;
	 box-shadow: 0 0 0 3px var(--accent-soft);
}
 #status {
	 margin-top: 10px;
	 font-size: 0.9rem;
	 color: var(--muted);
}
/* ========================= 404 PAGE (UNCHANGED DESIGN) ========================= */
 .bl_page404 {
	 min-height: 100vh;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 background: radial-gradient(circle at top, #1e1b4b, #0f172a);
	 color: #fff;
	 text-align: center;
	 padding: 20px;
	 font-family: "Comic Sans MS", "Comic Neue", cursive;
}
 .bl_page404 h1 {
	 font-size: 34px;
	 color: #fbbf24;
	 text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
}
 .bl_page404 p {
	 color: #c7d2fe;
	 font-size: 16px;
	 max-width: 600px;
	 line-height: 1.7;
}
/* Everything below untouched (your original 404 design) */
 .bl_page404__wrapper {
	 position: relative;
	 width: 100%;
	 margin: 10px auto;
	 max-width: 440px;
	 min-height: 410px;
}
 .bl_page404__img {
	 width: 100%;
}
 .bl_page404__link {
	 display: inline-block;
	 margin: 20px auto 0;
	 width: 260px;
	 height: 64px;
	 line-height: 64px;
	 background-color: #f95801;
	 color: #fff;
	 font-weight: 700;
	 text-transform: uppercase;
	 text-decoration: none;
	 border-radius: 30px;
	 text-align: center;
	 box-shadow: 0 5px 0 #9c1007, inset 0 0 18px rgba(253, 60, 0, 0.75);
}
 .bl_page404__link:hover {
	 background-color: #ff7400;
}
 .bl_page404__el1, .bl_page404__el2, .bl_page404__el3 {
	 position: absolute;
	 opacity: 1;
	 animation: float404 800ms linear infinite;
	 z-index: 2;
}
 .bl_page404__el1 {
	 top: 108px;
	 left: 102px;
	 width: 84px;
	 height: 106px;
	 background: url("images/404-1.png") no-repeat center;
}
 .bl_page404__el2 {
	 top: 92px;
	 left: 136px;
	 width: 184px;
	 height: 106px;
	 background: url("images/404-2.png") no-repeat center;
}
 .bl_page404__el3 {
	 top: 108px;
	 left: 180px;
	 width: 284px;
	 height: 106px;
	 background: url("images/404-3.png") no-repeat center;
}
 @keyframes float404 {
	 0% {
		 transform: translateY(0);
		 opacity: 1;
	}
	 100% {
		 transform: translateY(-60px);
		 opacity: 0;
	}
}
 @media (min-width: 768px) {
	 .container {
		 width: min(1100px, 90%);
		 gap: 22px;
	}
}
 @media (min-width: 1024px) {
	 .container {
		 width: min(1150px, 88%);
		/* subtle layout breathing room */
		 gap: 26px;
	}
}