/* Custom Font */
@font-face {
	font-family: "Departure Mono";
	src: url("fonts/departure-mono.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: "Untitled Sans";
	src: url("fonts/untitled-sans-regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

/* CSS Custom Properties */
:root {
	--color-bg: #000000;
	--color-text: #ffffff;
	--color-accent: #aaff00;
	--color-border: #1a1a1a;
	--opacity-10: rgba(255, 255, 255, 0.1);
	--opacity-25: rgba(255, 255, 255, 0.25);
	--opacity-50: rgba(255, 255, 255, 0.5);
	--opacity-75: rgba(255, 255, 255, 0.75);
	--opacity-90: rgba(255, 255, 255, 0.9);
	--gap-section: 16px;
	--gap-flex: 20px;
	--gap-row-header: 16px;
	--gap-row-cards: 80px;
	--gap-row-footer: 80px;
	--max-width: 2880px;
	/* SVG color variables */
	--fill-0: #ffffff;
}

/* Light Mode */
:root.light-mode {
	--color-bg: #ffffff;
	--color-text: #000000;
	--color-accent: #7b7b7b;
	--color-border: #e5e5e5;
	--opacity-10: rgba(0, 0, 0, 0.1);
	--opacity-25: rgba(0, 0, 0, 0.25);
	--opacity-50: rgba(0, 0, 0, 0.5);
	--opacity-75: rgba(0, 0, 0, 0.75);
	--opacity-90: rgba(0, 0, 0, 0.9);
	/* SVG color variables for light mode */
	--fill-0: #000000;
}

/* Modern CSS Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	font-family: "Departure Mono", monospace;
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	tab-size: 4;
	scroll-behavior: smooth;
}

body {
	margin: 0 auto;
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-size: 11px;
	max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit;
}

ul,
ol {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: inherit;
}

a:hover {
	opacity: 0.5;
}

a.underline {
	text-decoration: underline;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
	appearance: button;
}

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

pre,
code {
	font-family: "Departure Mono", monospace;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.mono {
	font-family: "Departure Mono", monospace;
}

/* Opacity utility classes */
.opacity-10 {
	opacity: 0.1;
}

.opacity-25 {
	opacity: 0.25;
}

.opacity-50 {
	opacity: 0.5;
}

.opacity-75 {
	opacity: 0.75;
}

.opacity-90 {
	opacity: 0.9;
}

.accent {
	color: var(--color-accent);
}

.divider {
	width: 100%;
	height: 0;
	border: none;
	border-top: 1px dashed var(--color-border);
	margin: var(--gap-section) 0;
	padding: 0;
}

.uppercase {
	text-transform: uppercase;
}

/* Blink Animation */
@keyframes blink {
	0%,
	100% {
		opacity: 0.5;
	}
	50% {
		opacity: 0.3;
	}
}

.blink {
	animation: blink 2.5s ease-in-out infinite;
}

/* Scroll Animation */
@keyframes scroll-horizontal {
	0% {
		transform: translateX(60vw);
	}
	100% {
		transform: translateX(-100%);
	}
}

/* ---------------------------- */

/* Header */
.header {
	display: flex;
	gap: var(--gap-flex);
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 60px 60px 0;
	width: 100%;
	box-sizing: border-box;
}

.header-column {
	display: flex;
	flex-direction: column;
	gap: var(--gap-section);
	flex: 1;
}

.header-label {
	font-family: "Departure Mono", monospace;
	font-size: 11px;
	line-height: normal;
	text-transform: uppercase;
	color: var(--opacity-50);
	visibility: hidden;
	display: inline-block; /* Ensure min-height works */
}

.header-label.typewriter-active {
	visibility: visible;
}

.header-label a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.header-label a:hover {
	opacity: 0.5;
}

/* Hero Section */
.hero {
	position: relative;
	max-width: none;
	margin: 0 auto;
	padding: 0;
	min-height: 512px;
	margin-top: 200px;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.hero-title {
	position: relative;
	width: max-content;
	min-height: 512px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	animation: scroll-horizontal 40s linear infinite;
}

.hero-ascii {
	position: relative;
	font-family: "Departure Mono", monospace;
	color: var(--color-text);
	text-transform: uppercase;
	display: inline-block;
	white-space: nowrap;
	flex-shrink: 0;
}

.hero-ascii-daas {
	margin-right: 4rem;
}

.hero-ascii-graphics {
	margin-right: 0;
}

.hero-ascii-graphics .ascii-text {
	color: var(--color-accent);
}

.ascii-text {
	font-size: 27.5px;
	line-height: 27.5px;
	margin: 0;
	white-space: pre;
	opacity: 0;
	transition: opacity 2.5s ease-in-out;
}

.ascii-text.fade-in {
	opacity: 1;
}

.ascii-char-animate {
	display: inline;
	position: relative;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	background-color: transparent;
	opacity: 1;
	z-index: 1;
}

.hero-icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.8s ease-in-out, transform 0.3s ease;
}

.hero-icon.fade-in {
	opacity: 1;
}

.hero-icon img {
	width: 100%;
	height: 100%;
	max-width: 92px;
	max-height: 92px;
	object-fit: contain;
	display: block;
}

.hero-icon img[src=""],
.hero-icon img:not([src]) {
	display: none;
}

/* FACE - LIME */
.hero-icon-1 {
	left: 21%;
	top: 0;
	width: 5.3%;
	min-width: 92px;
	max-width: 92px;
	height: auto;
	max-height: 92px;
	aspect-ratio: 1;
	transform: rotate(6.034deg);
}

.hero-icon-1:hover {
	transform: rotate(11.034deg);
}

/* FACE - WHITE */
.hero-icon-2 {
	right: 11%;
	top: 74%;
	width: 5.5%;
	min-width: 92px;
	max-width: 92px;
	height: auto;
	max-height: 92px;
	aspect-ratio: 1;
	transform: rotate(351.498deg);
}

.hero-icon-2:hover {
	transform: rotate(356.498deg);
}

/* RULER */
.hero-icon-3 {
	left: 50.5%;
	top: 54%;
	width: 6.1%;
	min-width: 92px;
	max-width: 92px;
	height: auto;
	max-height: 92px;
	aspect-ratio: 1;
	transform: rotate(255.093deg);
}

.hero-icon-3:hover {
	transform: rotate(260.093deg);
}

/* HORNS */
.hero-icon-4 {
	left: 32%;
	top: 66%;
	width: 5.7%;
	min-width: 70px;
	max-width: 70px;
	height: auto;
	max-height: 92px;
	transform: rotate(9.048deg);
}

.hero-icon-4:hover {
	transform: rotate(14.048deg);
}

.hero-graphics {
	position: relative;
	width: 100%;
	max-width: 2320px;
	margin: 0 auto;
	padding: 60px 60px 0;
	box-sizing: border-box;
	overflow: hidden;
	max-height: 800px;
	min-height: 800px;
}

.hero-graphics::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to top, var(--color-bg), transparent);
	pointer-events: none;
	z-index: 1;
}

.hero-graphic {
	position: absolute;
	display: block;
	max-width: 100%;
	height: auto;
	z-index: 0;
}

img.hero-graphic {
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
}

img.hero-graphic.fade-in {
	opacity: 1;
}

.hero-graphic-1 {
	left: 5%;
	top: 40%;
	width: 20%;
	max-width: 400px;
	transform: rotate(-5deg);
}

.hero-graphic-2 {
	left: 15%;
	top: 10%;
	width: 26%;
	max-width: 604px;
	transform: rotate(7.254deg);
}

.hero-graphic-3 {
	right: 8%;
	top: 30%;
	width: 39%;
	max-width: 900px;
	transform: rotate(351.948deg);
}

/* Cards Section */
.cards {
	display: flex;
	gap: var(--gap-flex);
	max-width: var(--max-width);
	margin: 0 auto;
	margin-top: 200px;
	padding: 0 60px;
	width: 100%;
	box-sizing: border-box;
}

.card {
	display: flex;
	flex-direction: column;
	gap: var(--gap-section);
	flex: 1;
}

.card .divider {
	margin: 8px 0;
}

.card-icon {
	font-family: "Departure Mono", monospace;
	font-size: 33px;
	line-height: 33px;
	color: var(--color-accent);
	text-transform: uppercase;
	margin: 0;
}

.card-label {
	font-family: "Departure Mono", monospace;
	font-size: 11px;
	line-height: normal;
	text-transform: uppercase;
	color: var(--opacity-25);
	margin: 0;
}

.card-content {
	font-family: "Departure Mono", monospace;
	font-size: 22px;
	line-height: 33px;
	color: var(--color-text);
}

.card-title {
	font-size: 22px;
	line-height: 33px;
	margin: 0 0 0 0;
	font-weight: normal;
}

.card-subtitle {
	font-size: 22px;
	line-height: 33px;
	margin: 0;
	font-weight: normal;
}

.card-body {
	font-family: "Untitled Sans", sans-serif;
	font-size: 15px;
	line-height: 25px;
	color: var(--opacity-90);
	opacity: 0.8;
	max-width: 444px;
}

.card-body p {
	margin: 0 0 15px 0;
}

.card-body p:last-child {
	margin-bottom: 0;
}

.card-body a:hover {
	opacity: 0.625;
}

.pricing-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 15px;
}

.pricing-table td {
	padding: 0;
	vertical-align: top;
}

.pricing-table td:first-child {
	padding-right: 15px;
}

/* Work Samples Section */
.work-samples {
	display: flex;
	flex-direction: column;
	gap: var(--gap-section);
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--gap-section) 60px;
	margin-top: 120px;
	width: 100%;
	box-sizing: border-box;
}

.work-samples .divider {
	margin: 8px 0;
}

.work-icon {
	font-family: "Departure Mono", monospace;
	font-size: 33px;
	line-height: 33px;
	color: var(--opacity-10);
	text-transform: uppercase;
	margin: 0;
}

.work-label {
	font-family: "Departure Mono", monospace;
	font-size: 11px;
	line-height: normal;
	text-transform: uppercase;
	color: var(--opacity-25);
	margin: 0;
}
.work-content {
	max-width: 444px; /* Temporary */
}

/* Footer */
.footer {
	display: flex;
	flex-direction: column;
	gap: var(--gap-flex);
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 60px;
	margin-top: 200px;
	width: 100%;
	box-sizing: border-box;
}

.footer-columns-wrapper {
	display: flex;
	gap: var(--gap-flex);
	width: 100%;
	margin-bottom: 60px;
}

.footer-column {
	display: flex;
	flex-direction: column;
	gap: var(--gap-section);
	flex: 1;
}

.footer-column .divider {
	margin: 8px 0;
}

.footer-icon {
	font-family: "Departure Mono", monospace;
	font-size: 33px;
	line-height: 33px;
	color: var(--opacity-10);
	text-transform: uppercase;
	margin: 0;
}

.footer-label {
	font-family: "Departure Mono", monospace;
	font-size: 11px;
	line-height: normal;
	text-transform: uppercase;
	color: var(--opacity-25);
	margin: 0;
}

.footer-content {
	font-family: "Departure Mono", monospace;
	font-size: 16.5px;
	line-height: normal;
	color: var(--color-text);
}

.footer-content p {
	margin: 0 0 8px 0;
	line-height: normal;
}

.footer-content p:last-child {
	margin-bottom: 0;
}

.footer-content a:hover {
	opacity: 0.5;
}

.desktop {
	display: none;
}

.bonus-column,
.bonus-card {
	display: none;
}

/* Responsive Design */
@media only screen and (max-width: 2420px) {
	body {
		max-width: 1840px;
	}

	/* Header */
	.header {
		flex-wrap: wrap;
		row-gap: var(--gap-row-header);
		padding-left: 3rem;
		padding-right: 3rem;
	}

	.header-column,
	.bonus-column {
		width: calc(33.333% - var(--gap-flex) * 2 / 3);
		flex: 0 0 calc(33.333% - var(--gap-flex) * 2 / 3);
		min-width: 300px;
	}

	.bonus-column {
		display: flex;
	}

	.header-column:nth-child(n + 4) .divider {
		display: none;
	}

	/* Hero */
	.hero {
		max-width: none;
		width: 100vw;
		overflow: hidden;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}

	/* Cards */
	.cards {
		flex-wrap: wrap;
		row-gap: var(--gap-row-cards);
		padding-left: 3rem;
		padding-right: 3rem;
	}

	.card,
	.bonus-card {
		width: calc(33.333% - var(--gap-flex) * 2 / 3);
		flex: 0 0 calc(33.333% - var(--gap-flex) * 2 / 3);
		min-width: 300px;
	}

	.bonus-card {
		display: flex;
	}

	/* Work Samples */
	.work-samples {
		padding-left: 3rem;
		padding-right: 3rem;
	}

	/* Footer */
	.footer {
		padding-left: 3rem;
		padding-right: 3rem;
	}

	.footer-columns-wrapper {
		flex-wrap: wrap;
		row-gap: var(--gap-row-footer);
	}

	.footer-column {
		width: calc(33.333% - var(--gap-flex) * 2 / 3);
		flex: 0 0 calc(33.333% - var(--gap-flex) * 2 / 3);
		min-width: 300px;
	}

	footer .desktop {
		display: block;
	}
}
@media only screen and (max-width: 1860px) {
	.header {
		padding-top: 2rem;
	}

	.divider {
		margin: 0;
	}
}

@media only screen and (max-width: 1460px) {
	body {
		max-width: 1040px;
	}

	/* Header */
	.header {
		flex-wrap: wrap;
		row-gap: var(--gap-row-header);
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.header-column,
	.footer-column,
	.bonus-column,
	.bonus-card {
		width: calc(50% - var(--gap-flex) / 2);
		flex: 0 0 calc(50% - var(--gap-flex) / 2);
		min-width: 300px;
	}

	.bonus-column,
	.bonus-card {
		display: flex;
	}

	.hide {
		display: none;
	}

	.header-column:nth-child(3) .divider {
		display: none;
	}

	/* Hero */
	.hero-graphics {
		display: none;
	}

	.hero {
		min-height: 400px;
		padding: 0;
		margin: 4rem 0 0 0;
		max-width: none;
		width: 100vw;
		overflow: hidden;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}

	.hero-ascii-daas {
		margin-right: 4rem;
	}

	.hero-icon {
		display: none;
	}

	/* Cards */
	.cards {
		flex-wrap: wrap;
		row-gap: var(--gap-row-cards);
		padding-left: 2rem;
		padding-right: 2rem;
		margin-top: 10rem;
	}

	.card {
		width: calc(50% - var(--gap-flex) / 2);
		flex: 0 0 calc(50% - var(--gap-flex) / 2);
		min-width: 300px;
	}

	/* Work Samples */
	.work-samples {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	/* Footer */
	.footer {
		padding-left: 2rem;
		padding-right: 2rem;
		margin-top: 12rem;
	}

	.footer-columns-wrapper {
		flex-wrap: wrap;
		row-gap: var(--gap-row-footer);
	}
}

@media only screen and (max-width: 1040px) {
	/* Header */
	.header {
		flex-wrap: wrap;
		row-gap: var(--gap-row-header);
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.header-column,
	.footer-column,
	.bonus-column,
	.bonus-card {
		width: calc(50% - var(--gap-flex) / 2);
		flex: 0 0 calc(50% - var(--gap-flex) / 2);
		min-width: 280px;
	}

	.bonus-column,
	.bonus-card {
		display: flex;
	}

	.hide {
		display: none;
	}

	.header-column:nth-child(3) .divider {
		display: none;
	}

	/* Hero */
	.hero-graphics {
		display: none;
	}

	.hero {
		max-width: none;
		width: 100vw;
		overflow: hidden;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}

	/* Cards */
	.cards {
		flex-wrap: wrap;
		row-gap: var(--gap-row-cards);
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.card {
		width: calc(50% - var(--gap-flex) / 2);
		flex: 0 0 calc(50% - var(--gap-flex) / 2);
		min-width: 280px;
	}

	.card .divider {
		margin: 0;
	}

	/* Work Samples */
	.work-samples {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	/* Footer */
	.footer {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.footer-columns-wrapper {
		flex-wrap: wrap;
		row-gap: var(--gap-row-footer);
	}

	.footer-column .divider {
		margin: 0;
	}
}

@media only screen and (max-width: 980px) {
	/* Header */
	.header {
		flex-direction: column;
		padding: 1.5rem;
	}

	.header-column {
		width: 100%;
		flex: 1 1 100%;
		max-width: 100%;
	}

	.header-column:nth-child(3) .divider {
		display: block;
	}

	.header .bonus-column {
		display: none;
	}

	/* Hero */
	.hero {
		margin-top: 2rem;
		padding: 0;
		max-width: none;
		width: 100vw;
		overflow: hidden;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}

	.hero-title {
		min-height: 400px;
		align-items: end;
	}

	.ascii-text {
		font-size: 22px;
		line-height: 22px;
	}

	/* Cards */
	.cards {
		flex-direction: column;
		padding: 1.5rem;
	}

	.card {
		width: 100%;
		flex: 1 1 100%;
		max-width: 100%;
	}

	.card-title,
	.card-subtitle {
		font-size: 16.5px;
		line-height: 22px;
	}

	.card-body {
		font-size: 14px;
		line-height: 22px;
	}

	.pricing-table tr {
		display: block;
	}

	.pricing-table td {
		display: block;
		width: 100%;
		padding-right: 0;
		padding-bottom: 0px;
	}

	.pricing-table tr:last-child td:last-child {
		padding-bottom: 0;
	}

	.card-icon {
		font-size: 22px;
		line-height: 22px;
	}

	/* Work Samples */
	.work-samples {
		padding: 1.5rem;
	}

	/* Footer */
	.footer {
		padding: 1.5rem;
		margin-top: 4rem;
	}

	.footer-columns-wrapper {
		flex-direction: column;
		row-gap: calc(var(--gap-row-footer) / 1.5);
		margin-bottom: 20px;
	}

	.footer-column {
		width: 100%;
		flex: 1 1 100%;
		max-width: 100%;
	}

	.footer-column.bonus-column {
		display: flex;
	}

	.footer-icon {
		display: none;
		font-size: 22px;
		line-height: 22px;
	}

	.footer-content {
		font-size: 11px;
	}
}

@media only screen and (max-width: 420px) {
	/* Header */
	.header-column {
		width: 100%;
		flex: 1 1 100%;
		max-width: 100%;
	}

	/* Hero */
	/* (no hero-specific styles at this breakpoint) */

	/* Cards */
	.card {
		width: 100%;
		flex: 1 1 100%;
		max-width: 100%;
	}

	/* Work Samples */
	/* (no work-samples-specific styles at this breakpoint) */

	/* Footer */
	.footer-column {
		width: 100%;
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* SVG color overrides for light/dark mode */
/* All hero icons are now inlined, so CSS variables work! */
.hero-icon svg {
	width: 100%;
	height: 100%;
}

/* Hero graphics still use <img> tags, so we need filters */
.hero-graphic {
	filter: none;
	transition: filter 0.2s ease;
}

:root.light-mode .hero-graphic {
	filter: invert(1);
}

/* Focus styles for accessibility */
*:focus {
	outline: 2px solid var(--opacity-50);
	outline-offset: 2px;
}