/* GuardianForge 3D — main stylesheet
   See GFCS-DESIGN-SYSTEM.md for token rationale. */

:root {
	--gfcs-bg-0: #05070B;
	--gfcs-bg-1: #080B12;
	--gfcs-bg-2: #0A0D14;
	--gfcs-charcoal: #10141C;
	--gfcs-navy: #071522;
	--gfcs-cyan: #3DE7E0;
	--gfcs-cyan-dim: #1B8E8A;
	--gfcs-red: #E4384C;
	--gfcs-text-0: #EAF2F5;
	--gfcs-text-1: #9FB2BC;
	--gfcs-border: rgba(61, 231, 224, 0.14);
	--gfcs-radius: 14px;
	--gfcs-max-width: 1200px;
	--gfcs-font-body: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
	--gfcs-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Customizer colour overrides land here via inline style on :root in header — see main.js */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--gfcs-bg-0); }

body {
	margin: 0;
	background: var(--gfcs-bg-0);
	color: var(--gfcs-text-0);
	font-family: var(--gfcs-font-body);
	line-height: 1.6;
	font-size: 16px;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gfcs-cyan); text-decoration: none; }
a:hover, a:focus-visible { color: var(--gfcs-text-0); }

:focus-visible {
	outline: 2px solid var(--gfcs-cyan);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.gfcs-skip-link {
	position: fixed;
	top: -100px; left: 1rem;
	background: var(--gfcs-cyan);
	color: #041E1C;
	padding: 0.75rem 1.25rem;
	border-radius: 8px;
	z-index: 1000;
	transition: top 0.2s ease;
}
.gfcs-skip-link:focus { top: 1rem; }

.gfcs-container {
	max-width: var(--gfcs-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ---------- 3D stage ---------- */
.gfcs-3d-stage {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 50% -10%, rgba(61,231,224,0.08), transparent 60%),
		linear-gradient(180deg, var(--gfcs-bg-0), var(--gfcs-bg-1));
}
.gfcs-3d-stage canvas { display: block; width: 100%; height: 100%; }
.gfcs-3d-stage.gfcs-3d-interactive { pointer-events: auto; }

/* Static fallback used when WebGL/JS is unavailable */
.gfcs-3d-stage.gfcs-3d-fallback {
	background:
		radial-gradient(circle at 20% 20%, rgba(61,231,224,0.10), transparent 40%),
		radial-gradient(circle at 80% 60%, rgba(228,56,76,0.06), transparent 45%),
		linear-gradient(180deg, var(--gfcs-bg-0), var(--gfcs-bg-1));
}

/* ---------- Header ---------- */
.gfcs-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(5,7,11,0.55);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: background 0.25s ease, border-color 0.25s ease;
}
.gfcs-header.gfcs-scrolled {
	background: rgba(5,7,11,0.92);
	border-bottom-color: var(--gfcs-border);
}
.gfcs-header-inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 0.85rem 1.5rem;
}
.gfcs-logo { display: flex; align-items: center; flex-shrink: 0; }
.gfcs-logo img { max-height: 44px; width: auto; }
.gfcs-logo-text { font-weight: 700; color: var(--gfcs-text-0); font-size: 1.05rem; letter-spacing: 0.01em; }
.gfcs-logo-accent { color: var(--gfcs-cyan); font-weight: 400; }

.gfcs-nav { margin-left: auto; }
.gfcs-nav-list { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; }
.gfcs-nav-list a { color: var(--gfcs-text-1); font-weight: 500; font-size: 0.95rem; }
.gfcs-nav-list a:hover { color: var(--gfcs-cyan); }

.gfcs-header-cta { flex-shrink: 0; }

.gfcs-menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--gfcs-border);
	border-radius: 8px;
	width: 42px; height: 42px;
	position: relative;
	cursor: pointer;
}
.gfcs-menu-toggle-bars,
.gfcs-menu-toggle-bars::before,
.gfcs-menu-toggle-bars::after {
	content: "";
	position: absolute;
	left: 10px; right: 10px;
	height: 2px;
	background: var(--gfcs-text-0);
}
.gfcs-menu-toggle-bars { top: 50%; transform: translateY(-50%); }
.gfcs-menu-toggle-bars::before { top: -7px; }
.gfcs-menu-toggle-bars::after { top: 7px; }

.gfcs-nav-mobile {
	display: none;
	background: var(--gfcs-bg-1);
	border-top: 1px solid var(--gfcs-border);
}
.gfcs-nav-mobile.gfcs-open { display: block; }
.gfcs-nav-mobile-list { list-style: none; margin: 0; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.gfcs-nav-mobile-list a { color: var(--gfcs-text-0); font-weight: 500; display: block; padding: 0.4rem 0; }

/* ---------- Buttons ---------- */
.gfcs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.4rem;
	border-radius: 10px;
	font-weight: 600;
	font-size: 0.95rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	min-height: 44px;
}
.gfcs-btn--primary {
	background: var(--gfcs-cyan);
	color: #041E1C;
}
.gfcs-btn--primary:hover, .gfcs-btn--primary:focus-visible {
	box-shadow: 0 0 0 3px rgba(61,231,224,0.25);
	color: #041E1C;
}
.gfcs-btn--ghost {
	background: transparent;
	color: var(--gfcs-text-0);
	border-color: var(--gfcs-border);
}
.gfcs-btn--ghost:hover, .gfcs-btn--ghost:focus-visible {
	border-color: var(--gfcs-cyan);
	color: var(--gfcs-cyan);
}

/* ---------- Sections ---------- */
.gfcs-section {
	position: relative;
	z-index: 1;
	padding: clamp(3rem, 6vw, 6rem) 0;
}
.gfcs-heading-eyebrow {
	font-family: var(--gfcs-font-mono);
	color: var(--gfcs-cyan);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.78rem;
	margin: 0 0 0.75rem;
}
.gfcs-section-title {
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	font-weight: 700;
	margin: 0 0 1rem;
	letter-spacing: -0.01em;
}
.gfcs-section-lede {
	color: var(--gfcs-text-1);
	max-width: 60ch;
	font-size: 1.05rem;
	margin-bottom: 2.5rem;
}

/* ---------- Hero ---------- */
.gfcs-hero { padding-top: clamp(4rem, 10vw, 8rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.gfcs-hero-inner { max-width: 780px; }
.gfcs-hero-title {
	font-size: clamp(2.2rem, 5.5vw, 3.6rem);
	line-height: 1.12;
	font-weight: 800;
	margin: 0 0 1.25rem;
	letter-spacing: -0.015em;
}
.gfcs-hero-subtitle { color: var(--gfcs-text-1); font-size: 1.15rem; max-width: 60ch; margin-bottom: 1.75rem; }
.gfcs-terminal-line {
	font-family: var(--gfcs-font-mono);
	color: var(--gfcs-cyan-dim);
	background: rgba(61,231,224,0.06);
	border: 1px solid var(--gfcs-border);
	border-radius: 8px;
	padding: 0.6rem 1rem;
	display: inline-block;
	font-size: 0.85rem;
	margin-bottom: 2rem;
}
.gfcs-terminal-prompt { color: var(--gfcs-cyan); margin-right: 0.5rem; }
.gfcs-terminal-cursor { animation: gfcs-blink 1.1s steps(1) infinite; }
@keyframes gfcs-blink { 50% { opacity: 0; } }

.gfcs-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Grid / Cards ---------- */
.gfcs-grid { display: grid; gap: 1.25rem; }
.gfcs-services-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gfcs-projects-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gfcs-news-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.gfcs-card {
	background: linear-gradient(180deg, var(--gfcs-charcoal), var(--gfcs-bg-2));
	border: 1px solid var(--gfcs-border);
	border-radius: var(--gfcs-radius);
	padding: 1.5rem;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.gfcs-card:hover, .gfcs-card:focus-visible {
	border-color: var(--gfcs-cyan-dim);
	box-shadow: 0 10px 30px -14px rgba(61,231,224,0.28);
	transform: translateY(-4px);
}

.gfcs-service-icon {
	display: inline-block;
	width: 40px; height: 40px;
	margin-bottom: 1rem;
	border-radius: 10px;
	background: rgba(61,231,224,0.10);
	border: 1px solid var(--gfcs-border);
}
.gfcs-service-title { margin: 0; font-size: 1.05rem; font-weight: 600; }

.gfcs-project-title { margin: 0 0 0.6rem; font-size: 1.1rem; font-weight: 700; }
.gfcs-project-desc { color: var(--gfcs-text-1); margin: 0; font-size: 0.95rem; }

/* ---------- About ---------- */
.gfcs-about-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; }
.gfcs-about-copy p { color: var(--gfcs-text-1); }
.gfcs-guardian-ring {
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid var(--gfcs-border);
	background: radial-gradient(circle, rgba(61,231,224,0.10), transparent 70%);
	position: relative;
}
.gfcs-guardian-ring::before, .gfcs-guardian-ring::after {
	content: "";
	position: absolute; inset: 12%;
	border-radius: 50%;
	border: 1px dashed var(--gfcs-border);
}
.gfcs-guardian-ring::after { inset: 26%; }

/* ---------- Contact ---------- */
.gfcs-contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; }
.gfcs-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.gfcs-contact-label { display: block; font-family: var(--gfcs-font-mono); color: var(--gfcs-text-1); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.2rem; }
.gfcs-contact-list a { font-size: 1.05rem; }
.gfcs-whatsapp-link { display: inline-block; margin-top: 1rem; color: var(--gfcs-cyan); font-weight: 600; }

.gfcs-pgp-panel {
	background: var(--gfcs-navy);
	border: 1px solid var(--gfcs-border);
	border-radius: var(--gfcs-radius);
	padding: 1.5rem;
}
.gfcs-pgp-panel h3 { margin-top: 0; font-size: 1rem; }
.gfcs-pgp-block {
	font-family: var(--gfcs-font-mono);
	font-size: 0.72rem;
	color: var(--gfcs-text-1);
	white-space: pre-wrap;
	word-break: break-all;
	max-height: 220px;
	overflow-y: auto;
	margin: 0 0 1rem;
	background: var(--gfcs-bg-0);
	border-radius: 8px;
	padding: 0.9rem;
	border: 1px solid var(--gfcs-border);
}

/* ---------- OSINT Tools page ---------- */
.gfcs-osint-disclaimer {
	color: var(--gfcs-text-1);
	max-width: 65ch;
	border-left: 3px solid var(--gfcs-red);
	padding-left: 1rem;
}
.gfcs-osint-category { margin-bottom: 2.5rem; }
.gfcs-osint-category h2 {
	font-size: 1.1rem;
	color: var(--gfcs-cyan);
	border-bottom: 1px solid var(--gfcs-border);
	padding-bottom: 0.6rem;
	margin-bottom: 1rem;
}
.gfcs-osint-tool-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem 1.5rem; }
.gfcs-osint-tool-list a {
	display: block;
	padding: 0.5rem 0;
	border-bottom: 1px dashed transparent;
	color: var(--gfcs-text-0);
}
.gfcs-osint-tool-list a:hover { border-bottom-color: var(--gfcs-cyan-dim); color: var(--gfcs-cyan); }

/* ---------- CTA band ---------- */
.gfcs-cta-band-inner {
	background: var(--gfcs-navy);
	border: 1px solid var(--gfcs-border);
	border-radius: var(--gfcs-radius);
	padding: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.gfcs-cta-band-inner h2 { margin: 0; font-size: 1.4rem; }

/* ---------- Footer ---------- */
.gfcs-footer { background: var(--gfcs-bg-1); border-top: 1px solid var(--gfcs-border); position: relative; z-index: 1; }
.gfcs-footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding: 3rem 1.5rem 2rem; }
.gfcs-footer-brand p { color: var(--gfcs-text-1); max-width: 40ch; }
.gfcs-footer-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.gfcs-footer-nav-list a { color: var(--gfcs-text-1); }
.gfcs-footer-nav-list a:hover { color: var(--gfcs-cyan); }
.gfcs-footer-bottom { padding: 1.25rem 1.5rem; border-top: 1px solid var(--gfcs-border); color: var(--gfcs-text-1); font-size: 0.85rem; }

/* ---------- 404 / generic page ---------- */
.gfcs-404, .gfcs-page-content { text-align: left; }
.gfcs-page-body { color: var(--gfcs-text-1); max-width: 75ch; }
.gfcs-page-body h2, .gfcs-page-body h3 { color: var(--gfcs-text-0); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.gfcs-about-inner { grid-template-columns: 1fr; }
	.gfcs-contact-grid { grid-template-columns: 1fr; }
	.gfcs-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
	.gfcs-nav, .gfcs-header-cta { display: none; }
	.gfcs-menu-toggle { display: block; }
	.gfcs-footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.gfcs-hero-ctas { flex-direction: column; align-items: stretch; }
	.gfcs-cta-band-inner { flex-direction: column; align-items: flex-start; }
}

/* Wide content never causes horizontal page scroll */
.gfcs-pgp-block, table, pre, code { overflow-x: auto; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Content remains fully usable if JS never runs */
.no-js .gfcs-nav-mobile { display: none; }