:root {
	--lime: #b8ff2c;
	--white: #ffffff;
	--charcoal: #101210;
	--muted: #a6aba4;
	--line: rgba(255, 255, 255, 0.16);
	--tile-size: 34px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--white);
	background: var(--charcoal);
	font-family: "Trebuchet MS", "Segoe UI", sans-serif;
	overflow-x: hidden;
}

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
	isolation: isolate;
	background: var(--charcoal);
}

.pixel-grid {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: 100%;
	display: grid;
	pointer-events: auto;
	grid-template-columns: repeat(var(--columns), var(--tile-size));
	grid-template-rows: repeat(var(--rows), var(--tile-size));
	z-index: -1;
}

.pixel {
	width: var(--tile-size);
	height: var(--tile-size);
	border-right: 1px solid rgba(255, 255, 255, 0.045);
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
	background: transparent;
	transition: background-color 1.5s ease, box-shadow 1.5s ease;
}

.pixel:hover {
	background: var(--lime);
	box-shadow: 0 0 26px rgba(184, 255, 44, 0.55);
	transition: background-color 0s, box-shadow 0s;
}

.pixel.is-lit {
	background: var(--lime);
	box-shadow: 0 0 26px rgba(184, 255, 44, 0.55);
}

.pixel.is-pulsing {
	animation: pixel-pulse 760ms var(--pulse-delay, 0ms) ease-out both;
}

@keyframes pixel-pulse {
	0% {
		background: transparent;
		box-shadow: 0 0 0 rgba(184, 255, 44, 0);
	}
	24% {
		background: var(--lime);
		box-shadow: 0 0 30px rgba(184, 255, 44, 0.52);
	}
	52% {
		background: rgba(184, 255, 44, 0.72);
		box-shadow: 0 0 22px rgba(184, 255, 44, 0.34);
	}
	100% {
		background: transparent;
		box-shadow: 0 0 0 rgba(184, 255, 44, 0);
	}
}

.veil {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, transparent 0%, rgba(16, 18, 16, 0.48) 72%, var(--charcoal) 100%);
	pointer-events: none;
	z-index: -1;
}

.nav {
	position: fixed;
	top: 0;
	width: 100%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px clamp(24px, 5vw, 76px);
	z-index: 2;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 32px);
}

.logo-placeholder {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	line-height: 0;
}

.logo-placeholder img {
	display: block;
	width: 100%;
	height: 100%;
}

.nav-label {
	color: var(--muted);
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.language-toggle {
	padding: 8px 0;
	border: 0;
	color: var(--muted);
	background: transparent;
	font: inherit;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.12em;
	cursor: pointer;
}

.language-toggle:hover,
.language-toggle:focus-visible {
	color: var(--white);
	outline: none;
}

.language-option.is-active {
	color: var(--lime);
}

.hero-content {
	align-self: center;
	margin: auto;
	max-width: 880px;
	padding: 120px 24px 80px;
	text-align: center;
	pointer-events: none;
}

.eyebrow {
	margin: 0 0 24px;
	color: var(--lime);
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

h1 {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(56px, 11vw, 152px);
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 0.88;
}

.subtitle {
	max-width: 470px;
	margin: 34px auto 0;
	color: var(--muted);
	font-size: clamp(16px, 2vw, 21px);
	line-height: 1.5;
}

.scroll-note {
	position: absolute;
	bottom: 30px;
	left: 50%;
	color: var(--muted);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transform: translateX(-50%);
}

.about {
	display: grid;
	grid-template-columns: minmax(160px, 0.7fr) minmax(280px, 1.3fr);
	gap: 8vw;
	align-items: start;
	min-height: 65vh;
	padding: clamp(80px, 12vw, 180px) clamp(24px, 10vw, 160px);
	color: var(--charcoal);
	background: var(--white);
}

.section-tag {
	margin: 0;
	color: #5f685d;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.about-copy h2 {
	max-width: 720px;
	margin: 0 0 28px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(36px, 5vw, 74px);
	font-weight: 400;
	letter-spacing: -0.035em;
	line-height: 0.98;
}

.about-copy p {
	max-width: 580px;
	margin: 0 0 42px;
	color: #535a52;
	font-size: clamp(17px, 2vw, 22px);
	line-height: 1.55;
}

.footer {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 24px clamp(24px, 10vw, 160px);
	border-top: 1px solid #dfe3df;
	color: #687067;
	background: var(--white);
	font-size: 11px;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
}

.contact-button {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 15px 20px;
	border: 1px solid var(--charcoal);
	color: var(--charcoal);
	background: transparent;
	font: inherit;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 220ms ease, background-color 220ms ease;
}

.contact-button span {
	font-size: 18px;
	line-height: 0;
	transition: transform 220ms ease;
}

.contact-button:hover,
.contact-button:focus-visible {
	color: var(--charcoal);
	background: var(--lime);
	outline: none;
}

.contact-button:hover span,
.contact-button:focus-visible span {
	transform: translateX(5px);
}

@media (max-width: 680px) {
	:root {
		--tile-size: 27px;
	}

	.nav {
		padding: 20px 20px;
	}

	.logo-placeholder {
		width: 40px;
		height: 40px;
	}

	.hero-content {
		padding-right: 18px;
		padding-left: 18px;
	}

	h1 {
		font-size: clamp(50px, 17vw, 92px);
		line-height: 0.92;
	}

	.nav-actions {
		gap: 12px;
	}

	.nav-label {
		max-width: none;
		flex-shrink: 0;
		font-size: 9px;
		line-height: 1.35;
		white-space: nowrap;
		text-align: right;
	}

	.about {
		grid-template-columns: 1fr;
		gap: 54px;
	}

	.footer {
		flex-direction: column;
		gap: 8px;
		padding: 20px 24px;
	}
}