:root{
	--accent:#aee26a; /* yellow-green */
	--accent-2:#6fbe3a; /* deeper yellow-green */
	--accent-rgb:174,226,106; /* for subtle rgba tints */
	--text:#e6e6e6; /* neutral light text */
	--bg:#0a0d12;
	--nav:#181c1f;
	/* coordinated nav link tints (not exact accent for readability) */
	--nav-link:#cfe9a8;
	--nav-link-hover:#e7f6d1;
}
*{box-sizing:border-box}
/* Bitcount Grid Double font utility */
.bitcount-grid-double{
	font-family:"Bitcount Grid Double", system-ui;
	font-optical-sizing:auto;
	font-weight:300; /* Double Light 300 */
	font-style:normal;
	font-variation-settings:
		"slnt" 0,
		"CRSV" 0.5,
		"ELSH" 0,
		"ELXP" 0;
}
/* Global background: image at ~20% visibility via dark overlay */
body{
	margin:0;
	font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	color:var(--text);
	background-color:var(--bg);
		background-image:linear-gradient(rgba(10,13,18,0.75), rgba(10,13,18,0.75)), url('/public/blankBackground.png');
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
}
/* Mobile homepage background: use dedicated image on phones */
@media (max-width:520px){
	body.home{
		background-image: linear-gradient(rgba(10,13,18,0.5), rgba(10,13,18,0.5)), url('/public/mobileBackground.png?v=20250916-2');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: scroll; /* avoid jank on mobile */
	}
}
/* Homepage background (desktop): fill the hero under the ribbon with the image (no bands) */
@media (min-width:900px){
	/* Keep the page background solid; put the image on the hero only so it starts under the ribbon */
	body.home{background:var(--bg)!important}
		body.home .hero{
			background-image:linear-gradient(rgba(10,13,18,0.5), rgba(10,13,18,0.5)), url('/public/background.png?v=20250916-3');
		background-position:center center;
		background-size:cover;
		background-repeat:no-repeat;
	}
}

/* Floating logo at bottom-right on desktop */
@media (min-width:900px){
	.floating-logo{
		position:fixed;
		right:20px;
		bottom:20px;
		width:120px;
		height:auto;
		z-index:9000;
		pointer-events:none; /* don’t block clicks */
	}
}
.nav{width:100vw;background:var(--nav);display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;box-shadow:0 2px 12px rgba(174,226,106,0.07);position:fixed;top:0;left:0;right:0;height:56px;z-index:9999}
.nav img.logo{height:48px;border-radius:8px;cursor:pointer}
.nav .links{display:flex;gap:8px;align-items:center}
.nav .links button{background:none;color:var(--nav-link);font-weight:700;border:none;cursor:pointer;padding:.3rem .7rem;border-radius:6px;font-size:1.3rem;text-shadow:0 1px 8px rgba(var(--accent-rgb),0.12);border-bottom:3px solid transparent;padding-bottom:3px}
/* hover/focus states for coordinated link color */
.nav .links button:hover{color:var(--nav-link-hover)}
.nav .links button:focus-visible{outline:2px solid rgba(var(--accent-rgb),0.35);outline-offset:2px}
/* active page indicator: colored text + underline */
.nav .links button.active{color:var(--accent);border-bottom-color:var(--accent-2);border-radius:0}
main{padding-top:56px}
.hero{position:relative;height:calc(100vh - 56px);overflow:hidden;margin:0;padding:0}
/* Allow hero to render its own background image on homepage (no forced transparent) */
.hero .overlay{position:absolute;inset:0;background:rgba(0,0,0,0.15);z-index:1}
/* Homepage already darkens background to 20%; prevent extra darkening */
@media (min-width:900px){
	body.home .hero .overlay{background:transparent!important}
}
.hero video.bg{position:fixed;left:50%;top:0;transform:translateX(-50%);height:100vh;width:auto;object-fit:contain;z-index:0;pointer-events:none}
@media (max-width:520px){
	.hero video.bg{position:relative;display:block;width:100%;height:auto}
}
.hero .content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:0 1rem;margin:0}

/* On the homepage, position hero content toward the top (match About page layout) */
/* Homepage: ensure hero content sits below the smaller nav and headline remains visible */
body.home .hero .content{justify-content:flex-start;padding-top:56px;height:auto}
@media (max-width:520px){
	body.home .hero .content{justify-content:center;padding-top:40px}
}
.hero h1{color:#dcdcdc;font-size:2.4rem;margin:0 0 1rem 0;line-height:1.05;display:inline-block;transform:translateY(-24vh);transition:transform .28s ease}
/* Homepage-specific headline tweaks: reduce how far the h1 is moved up so it's visible under various viewport sizes */
body.home .hero h1{transform:translateY(-12vh)}
@media (max-width:520px){ body.home .hero h1{transform:translateY(-8vh)} }
@media (min-width:900px){ body.home .hero h1{transform:translateY(-18vh)} }
/* Force H1 visible on the homepage: remove the large negative translate and give a safe top margin */
body.home .hero h1{transform:none!important;margin-top:18px!important}
@media (max-width:520px){ body.home .hero h1{transform:none!important;margin-top:10px!important;font-size:1.4rem!important;margin-bottom:0rem!important} }
/* Strong override to ensure headline is visible and on top of the video */
body.home .hero .content h1, body.home .hero h1{
	transform:none!important;
	margin-top:0px!important;
	position:relative!important;
	z-index:3!important;
	color:#e6e6e6!important;
	text-shadow:0 2px 18px rgba(0,0,0,0.6)!important;
}
/* Match homepage headline color to the CTA green */
body.home .hero .content h1.bitcount-grid-double,
body.home .hero h1.bitcount-grid-double{
	color:var(--accent) !important;
}
/* Make the homepage headline larger on all viewports */
body.home .hero h1.bitcount-grid-double{ font-size:3rem !important; line-height:1.06; }
@media (min-width:900px){ body.home .hero h1.bitcount-grid-double{ font-size:2.8rem !important; } }
@media (max-width:520px){ body.home .hero h1.bitcount-grid-double{ font-size:1.9rem !important; } }
/* .hero .brand{color:var(--accent);font-weight:900;font-size:3.6rem;margin-bottom:.5rem;display:inline-block;transform:translateY(6vh);transition:transform .28s ease} */
.hero .sub{color:#fff;font-weight:700;font-size:1.6rem;margin-bottom:.75rem;display:inline-block;transform:translateY(6vh);transition:transform .28s ease}
.hero .desc{color:var(--text);font-size:1.2rem;max-width:920px;margin-bottom:1rem;display:inline-block;transform:translateY(6vh);transition:transform .28s ease}
.hero .cta{display:flex;gap:12px;transform:translateY(6vh);transition:transform .28s ease}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#181c1f;padding:.9rem 1.6rem;border-radius:10px;border:none;font-weight:800;cursor:pointer;font-size:1.18rem}
/* Smaller CTA specifically inside the hero to avoid overlapping nav/logo */
.hero .btn-primary{padding:.45rem .8rem;font-size:.92rem;border-radius:8px}
@media (max-width:520px){
	.hero .btn-primary{padding:.4rem .7rem;font-size:.85rem}
}
/* Desktop override: enforce smaller CTA so it doesn't overlap nav/logo */
@media (min-width:900px){
	.hero .btn-primary{padding:.32rem .6rem;font-size:.82rem!important;border-radius:6px}
}
.contact{max-width:800px;margin:3.5rem auto;padding:1rem}
.contact form{max-width:400px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.contact input,.contact textarea{background:#181c1f;color:var(--text);border:1.5px solid var(--accent);border-radius:8px;padding:.7rem 1rem;font-size:1.05rem}
/* Unify hint colors: placeholders, subject label, and helper text */
.contact input::placeholder,.contact textarea::placeholder{color:#cfd4da;opacity:1}
label[for="subject"], .contact .helper, .multiselect .multiselect-placeholder{color:#cfd4da !important}
/* styled select to match inputs */
.contact .form-select{background:#181c1f;color:var(--text);border:1.5px solid var(--accent);border-radius:8px;padding:.7rem 1rem;font-size:1.05rem;appearance:none}

/* Multiselect custom dropdown */
.multiselect{position:relative}
.multiselect .multiselect-toggle{width:100%;text-align:left;background:#181c1f;color:var(--text);border:1.5px solid var(--accent);padding:.7rem 1rem;border-radius:8px;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.multiselect .multiselect-toggle:focus{outline:2px solid rgba(174,226,106,0.25)}
.multiselect .multiselect-options{display:none;position:absolute;left:0;right:0;z-index:50;background:#0a0d12;border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 24px rgba(0,0,0,0.6);margin-top:8px;padding:12px;border-radius:8px}
.multiselect .multiselect-options label{display:block;padding:6px 4px;color:var(--text);cursor:pointer}
.multiselect .multiselect-options input[type="checkbox"]{margin-right:8px}
.multiselect .multiselect-arrow{opacity:0.9;margin-left:8px}
.multiselect.open .multiselect-options{display:block}
.multiselect .multiselect-placeholder{color:var(--text)}
.multiselect .multiselect-toggle:hover{box-shadow:0 6px 18px rgba(174,226,106,0.1);transform:translateY(-1px);transition:all .14s ease}
.multiselect .multiselect-arrow{transition:transform .16s ease}
.multiselect.open .multiselect-arrow{transform:rotate(180deg)}
.multiselect .helper{font-size:0.85rem;color:#cfe9a8;margin-top:6px}
.contact button.send{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#181c1f;padding:.7rem 1.5rem;border-radius:8px;border:none;font-weight:700;cursor:pointer;width:100%;box-sizing:border-box}
/* Contact form: soften the accent (less vibrant yellow/green) */
.contact input,.contact textarea{border-color:rgba(var(--accent-rgb),0.55)}
.contact .form-select{border-color:rgba(var(--accent-rgb),0.55)}
.contact .multiselect .multiselect-toggle{border-color:rgba(var(--accent-rgb),0.55)}
.contact .multiselect .multiselect-toggle:hover{box-shadow:0 6px 18px rgba(var(--accent-rgb),0.06)}
.contact button.send{background:linear-gradient(90deg, rgba(var(--accent-rgb),0.75), rgba(var(--accent-rgb),0.55)); color:#0f1418}
/* Login page theming overrides (win over inline styles) */
#loginCard{
	background:#1f2622 !important; /* greenish-grey */
	border-color:rgba(207,224,90,0.35) !important; /* softened yellow-green */
	box-shadow:0 10px 36px rgba(0,0,0,0.5) !important;
}
#loginCard h2{color:var(--accent)!important}
#loginForm input{background:#181c1f!important;color:var(--text)!important;border:1.5px solid var(--accent)!important;border-radius:8px!important}
#loginForm button[type="submit"]{background:linear-gradient(90deg,var(--accent),var(--accent-2))!important;color:#181c1f!important;border:none!important;border-radius:8px!important;font-weight:700!important}
#requestAccountBtn{background:linear-gradient(90deg,var(--accent),var(--accent-2))!important;color:#181c1f!important;border:none!important;border-radius:8px!important;font-weight:700!important}
#forgotBtn{color:var(--accent)!important}
#resetForm input{background:#181c1f!important;color:var(--text)!important;border:1.5px solid var(--accent)!important;border-radius:8px!important}
#resetForm button,#backToLogin{background:linear-gradient(90deg,var(--accent),var(--accent-2))!important;color:#fff!important;border:none!important;border-radius:8px!important;font-weight:700!important}
.panel{background:rgba(10,13,18,0.88); /* near-opaque */
	border:1px solid rgba(255,255,255,0.06);
	border-radius:12px;
	box-shadow:0 8px 30px rgba(0,0,0,0.45);
	padding:24px;
	backdrop-filter:saturate(110%);
}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:1100px;margin:0 auto;padding:2.5rem 1rem}
.card{background:#181c1f;color:#fff;border-radius:12px;padding:1.2rem 1.3rem;box-shadow:0 2px 12px rgba(174,226,106,0.1)}
.card b{display:block;margin-bottom:.6rem}

/* Brand header used on non-home pages */
.brand-header{color:var(--accent);font-weight:900;text-align:center;margin:0 0 0.6rem 0;text-shadow:0 2px 8px rgba(174,226,106,0.18);font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
.brand-header--big{font-size:3rem}
.brand-header--services{font-size:1.15rem}

/* Homepage: keep only hero visible and prevent scrolling into the grid */
/* Allow homepage main to size naturally so hero content (headline) is visible */
body.home main{height:auto;overflow:auto}
body.home .grid{display:none}

@media (max-width:520px){
	.hero h1{font-size:1.6rem}
	.hero .brand{font-size:2.4rem}
	.hero .sub{font-size:1.05rem}
	.brand-header--big{font-size:2rem}
}
@media (max-width:520px){.hero h1{font-size:1.2rem}.hero .brand{font-size:2rem}}

/* Adjust h1 vertical offset at breakpoints so only the headline moves up */
@media (max-width:520px) {
	.hero h1{transform:translateY(-14vh)}
	.hero .brand,.hero .sub,.hero .desc,.hero .cta{transform:translateY(3vh)}
}
@media (min-width:900px) {
	.hero h1{transform:translateY(-30vh)}
	.hero .brand,.hero .sub,.hero .desc,.hero .cta{transform:translateY(8vh)}
}

/* Mobile-specific nav and layout fixes */
@media (max-width:520px) {
	.nav{flex-wrap:wrap;align-items:center;padding:.4rem .6rem;height:auto}
	.nav img.logo{height:48px}
	/* Hide inline nav links on phones; use hamburger menu instead */
	.nav .links{display:none}
	.nav .links button{display:none}

	/* Login page: keep actions from overflowing */
	.login-actions{flex-wrap:wrap !important;gap:8px !important}
	.login-actions #requestAccountBtn{flex:1 1 100% !important;max-width:100% !important}
	.login-actions #forgotBtn{white-space:normal !important;word-break:break-word}

	/* Ensure hero content fits on small screens */
	.hero .content{padding:1rem}
	.hero h1{font-size:1.4rem}
	.hero .brand{font-size:1.8rem}
	.hero .sub{font-size:0.95rem}
	.hero .desc{font-size:0.95rem;padding:0 .4rem}

	/* Prevent horizontal overflow */
	html,body{overflow-x:hidden}
}

	/* Hamburger menu (mobile only) */
	@media (max-width:520px){
		.hamburger{display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.12);margin-left:auto;cursor:pointer}
		.hamburger .bar{width:20px;height:2px;background:var(--text);margin:3px 0;display:block}
		.mobile-menu{position:fixed;top:56px;right:12px;left:12px;background:#0a0d12;border:1px solid rgba(255,255,255,0.06);border-radius:10px;box-shadow:0 12px 36px rgba(0,0,0,0.7);padding:8px 12px;display:none;z-index:10000}
		.mobile-menu.open{display:block}
		.mobile-menu .link{display:block;width:100%;text-align:left;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,0.06);color:var(--text);background:transparent;border:none;font-size:1.05rem}
		.mobile-menu .link:last-child{border-bottom:none}

	/* Harmonize CTA shadow color on homepage */
	.hero .btn-primary{box-shadow:0 6px 20px rgba(174,226,106,0.22)!important}

	
	/* Move homepage CTA below the eye on phones */
	body.home .hero .cta{transform:none!important;margin-top:36vh}
/* Nudge homepage description down slightly on phones */
	body.home .hero .sub{transform:translateY(35vh)!important}
	/* Nudge homepage description down slightly on phones */
	body.home .hero .desc{transform:translateY(35vh)!important}
	}

/* Interactive hover/focus styles for key buttons */
/* Smooth transitions */
.btn-primary,
.contact button.send,
#loginForm button[type="submit"],
#requestAccountBtn,
#forgotBtn{
	transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, outline-color .18s ease;
}

/* CTA hover/focus: lift, brighten, stronger glow */
.btn-primary:hover,
.btn-primary:focus-visible{
	transform: translateY(-1px) scale(1.05);
	filter: brightness(1.08);
	box-shadow: 0 10px 28px rgba(var(--accent-rgb),0.32) !important;
	outline: 2px solid rgba(var(--accent-rgb),0.45);
	outline-offset: 2px;
}

/* Contact Send hover/focus */
.contact button.send:hover,
.contact button.send:focus-visible{
	transform: translateY(-1px) scale(1.04);
	filter: brightness(1.07);
	box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.28);
	outline: 2px solid rgba(var(--accent-rgb),0.45);
	outline-offset: 2px;
}

/* Login buttons hover/focus */
#loginForm button[type="submit"]:hover,
#loginForm button[type="submit"]:focus-visible,
#requestAccountBtn:hover,
#requestAccountBtn:focus-visible{
	transform: translateY(-1px) scale(1.04);
	filter: brightness(1.07);
	box-shadow: 0 8px 22px rgba(var(--accent-rgb),0.26);
	outline: 2px solid rgba(var(--accent-rgb),0.45);
	outline-offset: 2px;
}

/* Forgot password: subtle lift + underline for clarity */
#forgotBtn{
	background: transparent !important;
	border: none !important;
}
#forgotBtn:hover,
#forgotBtn:focus-visible{
	transform: translateY(-1px) scale(1.02);
	text-decoration: underline;
	filter: brightness(1.1);
}

/* Active press feedback */
.btn-primary:active,
.contact button.send:active,
#loginForm button[type="submit"]:active,
#requestAccountBtn:active{
	transform: translateY(0) scale(0.99);
	filter: brightness(0.98);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
	.btn-primary,
	.contact button.send,
	#loginForm button[type="submit"],
	#requestAccountBtn,
	#forgotBtn{
		transition: none !important;
	}
	.btn-primary:hover, .btn-primary:focus-visible,
	.contact button.send:hover, .contact button.send:focus-visible,
	#loginForm button[type="submit"]:hover, #loginForm button[type="submit"]:focus-visible,
	#requestAccountBtn:hover, #requestAccountBtn:focus-visible,
	#forgotBtn:hover, #forgotBtn:focus-visible{
		transform: none !important;
	}
}