/* Forcefield — Global Styles */

@font-face {
	font-family: 'JetBrains Mono';
	src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'JetBrains Mono';
	src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	--ff-bg: #111;
	--ff-surface: #222;
	--ff-accent: #E24B4A;
	--ff-accent-hover: #c93e3d;
	--ff-text: #F5F5F5;
	--ff-text-muted: #999;
	--ff-font-mono: 'JetBrains Mono', monospace;
	--ff-font-body: 'Inter', -apple-system, sans-serif;
}

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

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background-color: var(--ff-bg);
	color: var(--ff-text);
	font-family: var(--ff-font-body);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-font-mono);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ff-text);
}

a {
	color: var(--ff-accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

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

/* Layout */

.ff-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Buttons */

.ff-btn {
	display: inline-block;
	background-color: var(--ff-accent);
	color: var(--ff-bg);
	font-family: var(--ff-font-mono);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.875rem 2rem;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ff-btn:hover {
	background-color: var(--ff-accent-hover);
	color: var(--ff-bg);
	text-decoration: none;
}

/* Header */

.ff-header {
	padding: 1rem 0;
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--ff-bg);
	border-top: 3px solid var(--ff-accent);
}

.ff-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.ff-header__logo {
	font-family: var(--ff-font-mono);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--ff-text);
	letter-spacing: 0.1em;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ff-header__logo:hover {
	text-decoration: none;
	color: var(--ff-accent);
}

.ff-header__bolt {
	flex-shrink: 0;
}

.ff-header__toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	flex-direction: column;
	gap: 5px;
}

.ff-header__toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--ff-text);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.ff-header__toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.ff-header__toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.ff-header__toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.ff-header__nav ul {
	list-style: none;
	display: flex;
	gap: 2rem;
	align-items: center;
}

.ff-header__nav a {
	font-family: var(--ff-font-mono);
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--ff-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: color 0.2s ease;
}

.ff-header__nav a:hover {
	color: var(--ff-text);
	text-decoration: none;
}

.ff-header__contact {
	background-color: var(--ff-accent);
	color: var(--ff-bg) !important;
	padding: 0.5rem 1.25rem;
	font-weight: 700;
	transition: background-color 0.2s ease;
}

.ff-header__contact:hover {
	background-color: var(--ff-accent-hover);
	color: var(--ff-bg) !important;
}

.ff-header__pay {
	border: 1px solid #555;
	color: var(--ff-text-muted) !important;
	padding: 0.5rem 1.25rem;
	font-weight: 700;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.ff-header__pay:hover {
	border-color: var(--ff-accent);
	color: var(--ff-text) !important;
}

/* Footer */

.ff-footer {
	padding: 3rem 0;
	border-top: 1px solid var(--ff-surface);
	color: var(--ff-text-muted);
	font-size: 0.875rem;
}

/* Section spacing */

.ff-section {
	padding: 6rem 0;
}

.ff-section--surface {
	background-color: var(--ff-surface);
}

.ff-section--bordered {
	padding-top: 3rem;
}

.ff-section--bordered::before {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background-color: var(--ff-accent);
	margin: 0 auto 3rem;
}

.ff-section__label {
	font-family: var(--ff-font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--ff-accent);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 1rem;
}

.ff-section__heading {
	font-size: 2.5rem;
	margin-bottom: 1.5rem;
}

.ff-section__sub {
	color: var(--ff-text-muted);
	font-size: 1.125rem;
	margin-bottom: 1rem;
}

/* Invoice */

.ff-invoice {
	max-width: 640px;
}

.ff-invoice__intro {
	color: var(--ff-text-muted);
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 2.5rem;
}

.ff-invoice .form-label {
	color: var(--ff-text-muted);
	font-size: 0.875rem;
}

.ff-invoice .form-label .text-danger {
	color: var(--ff-accent) !important;
}

.ff-invoice .form-control,
.ff-invoice .form-select,
.ff-invoice input[type="text"],
.ff-invoice input[type="email"],
.ff-invoice input[type="number"],
.ff-invoice textarea,
.ff-invoice select {
	background-color: var(--ff-surface);
	border: 1px solid #333;
	color: var(--ff-text);
	font-family: var(--ff-font-body);
	font-size: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 0;
}

.ff-invoice .form-control:focus,
.ff-invoice input:focus,
.ff-invoice textarea:focus,
.ff-invoice select:focus {
	border-color: var(--ff-accent);
	outline: none;
	box-shadow: none;
	background-color: var(--ff-surface);
	color: var(--ff-text);
}

.ff-invoice .btn-primary,
.ff-invoice button[type="submit"],
.ff-invoice input[type="submit"] {
	background-color: var(--ff-accent);
	color: var(--ff-bg);
	font-family: var(--ff-font-mono);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.875rem 2rem;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ff-invoice .btn-primary:hover,
.ff-invoice button[type="submit"]:hover,
.ff-invoice input[type="submit"]:hover {
	background-color: var(--ff-accent-hover);
	color: var(--ff-bg);
}

.ff-invoice .getpaid-payment-form-element-paragraph {
	font-size: 11px;
	color: var(--ff-text-muted);
}

/* CTA Band */

.ff-cta {
	text-align: center;
	padding: 6rem 0;
	background-color: var(--ff-surface);
}

.ff-cta__heading {
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

.ff-cta__sub {
	color: var(--ff-text-muted);
	font-size: 1.125rem;
	margin-bottom: 2.5rem;
}

/* Work Cards */

.ff-work__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
}

.ff-work__card {
	background-color: var(--ff-surface);
	padding: 2.5rem;
	transition: transform 0.2s ease;
}

.ff-work__card:hover {
	transform: translateY(-2px);
	text-decoration: none;
}

.ff-work__card-label {
	font-family: var(--ff-font-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--ff-accent);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 0.75rem;
}

.ff-work__card-title {
	font-size: 1.375rem;
	margin-bottom: 0.75rem;
	color: var(--ff-text);
}

.ff-work__card-desc {
	color: var(--ff-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.ff-work__card-stats {
	margin-top: 1.5rem;
	display: flex;
	gap: 2rem;
}

.ff-work__stat {
	font-family: var(--ff-font-mono);
	font-size: 0.8125rem;
}

.ff-work__stat strong {
	color: var(--ff-accent);
	font-size: 1.5rem;
	display: block;
	margin-bottom: 0.25rem;
}

.ff-work__stat span {
	color: var(--ff-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.6875rem;
}

/* Responsive */

@media (max-width: 1200px) {
	.ff-section__heading {
		font-size: 2rem;
	}
}

@media (max-width: 768px) {
	.ff-container {
		padding: 0 1.25rem;
	}

	.ff-section {
		padding: 4rem 0;
	}

	.ff-work__grid {
		grid-template-columns: 1fr;
	}

	.ff-cta {
		padding: 4rem 0;
	}

	.ff-cta__heading {
		font-size: 1.75rem;
	}

	.ff-section__heading {
		font-size: 1.75rem;
	}

	.ff-header__toggle {
		display: flex;
	}

	.ff-header__nav {
		display: none;
		width: 100%;
		padding-top: 1.5rem;
	}

	.ff-header__nav.is-open {
		display: block;
	}

	.ff-header__nav ul {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
	}

	.ff-header__nav li {
		border-top: 1px solid #222;
	}

	.ff-header__nav a {
		font-size: 0.875rem;
		display: block;
		padding: 1rem 0;
	}

	.ff-header__contact,
	.ff-header__pay {
		text-align: center;
		margin-top: 0.5rem;
	}
}

@media (max-width: 480px) {
	html {
		font-size: 15px;
	}
}