* {
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: menlo;
	src: url('Menlo-Regular-01.ttf');
	font-display: swap;
	font-weight: 400;
}

html {
	line-height: 1.5;
	font-family: sans-serif;
	--color-main-bg: #101010;
	--color-card-border: #2c2c2c;
	--color-text: #f0f0f0;
	--color-text-dark: #b2b1b0;
	--color-accent: #dfa020;

	font-size: 15px;

  scroll-behavior: smooth;
	font-family: menlo;
}

main {
	display: flex;
	flex-flow: column nowrap;
	gap: 6em;
	align-items: center;
	justify-items: center;
}

main > section {
	max-width: 80em;
}

body {
	background-color: var(--color-main-bg);
	color: var(--color-text);
	padding: 0ch 2ch;
}

h1 {
	font-size: 5rem;
}

h2 {
	text-align: center;
	font-size: 2.5rem;
}

h1, h2, h3, h4 {
	color: var(--color-text);
	line-height: 1;

	font-family: "Quantico", sans-serif;
	font-weight: 700;
	font-style: normal;
}

h1 em, h2 em, .subline em {
	color: var(--color-accent);
	font-style: normal;
}
.subline {
	color: var(--color-text-dark);
}

#splash .rounded-button {
	max-width: fit-content;
}

@media only screen and (min-width: 60em) {


.hoverglow img {
	filter: brightness(1.1) drop-shadow(0 0 0.05em var(--color-accent));
	transition: filter 0.2s ease;
	flex-grow: 0.6;
}

.hoverglow {
	border: 2px solid var(--color-card-border);
	border-radius: 1em;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.hoverglow:hover {
	transform: translateY(-6px);
	box-shadow: 0 8px 20px rgba(223, 160, 32, 0.3); /* orange glow */
	border-color: var(--color-accent);
}

.hoverglow:hover img {
	filter: brightness(1.4) drop-shadow(0 0 0.5em var(--color-accent));
}

}



.rounded-button {
	color: var(--color-main-bg);
	background-color: var(--color-accent);
	text-decoration: none;

	padding: 0.5ch 2ch;
	border-radius: 2.5em;
	border: 0.1em solid var(--color-accent);

	width: fit-content;
	font-weight: bold;
	display: block;
}

.rounded-button:visited {
	color: var(--color-main-bg);
}

.rounded-button:hover {
	background-color: var(--color-main-bg);
	color: var(--color-accent);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                             splash page styles                            *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#splash {
	width: 100%;
	min-height: min(100vh, 65em);
	display: flex;
	max-width: 130em;
	flex-flow: column nowrap;
	box-sizing: border-box;
	padding: 2em 0em;
}

#splash-vbox {
	display: flex;
	max-width: 150ch;
	flex-flow: column nowrap;
	justify-content: center;
	flex-grow: 1;
	gap: 1.5em;
}

#logo-icons img {
	height: 4em;
}

#logo-icons {
	margin-bottom: auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	margin-bottom: 2em;
}

#splash .subline {
	line-height: 1;
	font-size: 150%;
}

#splash .rounded-button {
	font-size: 125%;
}

@media only screen and (min-width: 45em) {
	#splash-vbox {
		min-height: 0;
		margin-left: 3em;
	}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                           services page styles                            *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#services-buttons {
	display: none;
	margin-top: 2em;
	align-items: end;
}

#services-buttons p {
	font-size: 220%;
	font-family: "Quantico", sans-serif;
	color: var(--color-accent);
	font-weight: bold;
}
#services-buttons svg {
	width: 3em;
	height: 3em;
}

#services-right{
	transform: scaleX(-1);
}

#services-buttons svg:hover {
	--color-accent: #eb5;
}

#services-buttons svg:active, #services-buttons.disabled {
	--color-accent: #69501e;
}

#services {
	overflow: hidden;
	display: grid;
	justify-content: center;
	list-style-type: none;
	padding: 1ch 0em; /* otherwise, it gets cut off on hover. */
}

#services p {
	line-height: 1;
	text-align: center;
	font-weight: bold;
}

#services li {
 	min-width: 13em;
 	min-height: 13em;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	gap: 1em;
	padding: 1em;
	box-sizing: border-box;
}

#services img {
	display: block;
	flex-grow: 0;
	width: 6em;
	height: 6em;
}

@media only screen and (min-width: 23em) {
	#services {
		grid-template-columns: min-content min-content;
	}
}

@media only screen and (min-width: 45em) {
	#services-buttons {
		display: flex;
		flex-flow: row nowrap;
		gap: 1em;
	}

	#services {
		display: flex;
		gap: 2em;
		justify-content: start;
	}

	#services .hoverglow:hover p {
		color: var(--color-accent);
	}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                           our work page styles                            *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#our-work {
	display: flex ;
	flex-flow: column nowrap;
	gap: 1em;
	overflow-x: hidden;
}


@keyframes sshow-move {
	0% { transform: translateX(0); }
	49% { opacity: 0; transform: translateX(-300%); }
	100% { transform: translateX(0); }
}

#slideshow {
	position: relative;
	background-size: cover;
	border-radius: 2em;
	padding: 1em;
	display: flex;
	max-height: 65vh;
	aspect-ratio: 1.5 / 1;
}

/* Hide the images by default */
.slide {
	height: 90%;
	max-width: 65%;
	display: block;
	position: relative;
	width: auto;
	margin: auto;
}

.slide-bg {
	width: 100%;
	height: 100%;
	border-radius: 2em;
}

.next, .prev {
	margin: auto 0;
	flex-basis: 1rem;
	text-align: center;
	border-radius: 2em;

	padding: 0.25em;
	font-size: 250%;
}

#client-grid {
	flex-basis: 45%;
	display: flex;
	flex-flow: row wrap;
	gap: 2em;
	grid-area: clients;
	justify-content: space-between;
	align-items: center;
	padding: 1em 0em;
}

#client-grid div {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	flex-grow: 1;
	gap: 2em;
}

#client-grid img {
	display: block;
	max-height: 3em;
	height: 100%;
	width: auto;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                             why us page styles                            *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#why-us {
	display: flex;
	flex-flow: column nowrap;
	gap: 3em;
}

#why-us * {
	margin: 0 auto;
	width: 100%;
}

#why-us h2 {
	grid-area: header;
}

#why-us h2 ~ * {
	color: var(--color-text-dark);
}

#why-us h3 {
	text-align: center;
	font-size: 2.5rem;
}

#why-us > p {
	grid-area: text;
}

#why-us p:not(.subline) em {
	font-style: normal;
	color: var(--color-text);
}

#why-us .card-container {
	display: flex;
	flex-flow: column nowrap;
	gap: 2em;
	overflow: hidden;
	grid-area: cards;
}

#why-us .card {
	display: grid;
	grid-template-areas: "img"
			     "name"
			     "text";
	max-width: 45em;
	gap: 1em;
	justify-content: center;
	height: fit-content;
	border-radius: 1em;
}

#why-us .card p {

	font-size: 1.25rem;
	color: var(--color-text-dark);
}

#why-us .card img {
	font-size: 1.25rem;
	grid-area: img;
	height: 6em;
	width: 6em;
}

@media only screen and (min-width: 30em) and (max-width: 55em) {
	#why-us {
	}

	#why-us .card {
		grid-template-areas:
			"img name"
			"img text";
	}

	#why-us .card h3 {
		text-align: left;
	}

	#why-us .card img {
		margin: auto 1em auto 0;
	}
}

@media only screen and (min-width: 55em) {

	#why-us .card h3 {
	}

	#why-us .card-container {

		flex-flow: row nowrap;
	}
	
	#why-us .card {
		justify-items: center;
	}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                            pricing card styles                            *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#pricing > div {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	height: fit-content;
}

#pricing section {
	color: var(--color-text);
	flex-basis: 15em;
	max-width: 22em;
	height: fit-content;
	padding: 2em 0em;
	margin: auto;
}

#pricing section li {
	line-height: 2;
	list-style-type: "✔︎ ";
	margin-left: 2ch;
}

#pricing section li::marker {
	color: #0a0;
}

#pricing section h3 {
	line-height: 1;
	font-size: 200%;
	text-align: left;
	color: var(--color-accent);
	margin-bottom: 0.25em;
}

#pricing #project-pitch {
	grid-template-columns: 1fr max-content;
	grid-template-rows: max-content 1fr;
	grid-template-areas:
		"subline pitch"
		"slideshow pitch";
	max-height: fit-content;
	gap: 2em;
}

#pricing-plans {
	margin-top: 2em;
	gap: 2em;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

#project-pitch section {
	grid-area: pitch;
}

#project-pitch p {
	color: var(--color-text-dark);
	grid-area: subline;
}

.price-block span {
	font-size: 150%;
}


.price-block p {
	color: var(--color-text-dark);
}

.price-block .price {
	font-size: 300%;
	line-height: 1;
	color: var(--color-text);
}

.features-block {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid #333;

}

.features-block .subline  {
	font-weight: bold;
	font-size: 133%;
}

#features-block + .subline {
	border-top: 1px solid #333;
}

.price-block {
	display: block;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;

	margin: 1rem 0em;
	padding: 1.5rem 0em;
}

#pricing .rounded-button:not(:first-child) {
	margin-top: 1rem;

}

#pricing .rounded-button {
	width: fit-content;
	font-size: 133%;
	font-weight: bold;
	display: block;
}

@media only screen and (min-width: 50em) {
	#pricing #project-pitch {
		display: grid;
	}
}

@media only screen and (min-width: 60em) {
	#pricing > div {
		flex-flow: row nowrap;
	}

	#pricing section {
		flex-grow: 1;
		padding: 2em;
		margin: 0;
		height: initial;
	}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                              faq card styles                              *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#faqs {
	display: flex;
	flex-flow: column nowrap;
	padding: 0 2em;
	gap: 2em;
}

.faq {
	color: var(--color-text-dark);
	list-style-type: none;
	line-height: 1.76;
}

.faq summary::-webkit-details-marker {
	display:none;
}

.faq div {
	margin: 0em auto;
    flex: 1;
	max-width: 50em;
}

.faq details {
	padding: 1em 0em;
}

.faq details:first-child {
	border-top: thin solid #45353B;
	border-bottom: thin solid #45353B;
}

.faq details:not(:first-child) {
	border-bottom: thin solid #45353B;
}

.faq summary {
	color: var(--color-accent);
	font-size: 125%;
}

.faq details[open] summary{
	margin-bottom: 1em;
}

.faq details[open] svg {
	transform: rotate(45deg);
}

#faqs summary{
	display: flex;
}

#faqs svg {
	width: 1em;
	aspect-ratio: 1 / 1;
	user-select: none;
	margin-right: 1em;
	display: inline-block;
	fill: var(--color-accent);
	min-width: 2.5ch;

	transition: transform 0.1s;
}

@media only screen and (min-width: 60em) {
	.faq {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		gap: 2em;
	}

	.faq div {
		margin: 0;
		max-width: 40em;
	}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                          contact section styles                           *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#contact {
	display: flex;
	flex-flow: column nowrap;
	gap: 1em;
	align-items: center;
}

#contact  > *:not(:first-child) {
	font-size: 150%;
	font-weight: bold;
	font-family: monospace;
	text-align: center;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                              footer styles                                *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

footer {
	margin: 0 auto;
	max-width: 100em;
	margin-top: 5em;
}

footer > div {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

#brand-footer ul {
	display: flex;
	align-items: flex-end;
	gap: 1.5em;
}

#brand-footer ul img {
	width: 3em;
	display: block;
}

#logo2 {
	max-height: 5em;
}

#address {
	color: var(--color-accent);
	font-size: 150%;
	font-family: "Quantico", sans-serif;
}

#brand-footer li {
	list-style-type: none;
}

#legal {
	text-align: center;
	margin-top: 1em;
	flex-flow: row-reverse wrap;
	border-top: 1px solid #333;
	padding: 1em 0em;
}

#legal ul {
	display: flex;
	align-self: flex-end;
	list-style-type: none;
	gap: 1.5em;
}

#legal li {
	color: var(--color-accent);
}

@media only screen and (max-width: 30em) {
	#brand-footer {
		display: block;
	}

	#brand-footer * {
		margin: 0 auto;
		display: block;
	}
	
	#logo2 {
		margin-bottom: 1em;
	}
}

@media only screen and (max-width: 55em) {
	#legal ul, #legal p {
		justify-content: center;
		gap: 2.5em;
		width: 100%;
	}
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                           responsive ui styles                            *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* father, i cannot click the book */
@media screen {
	.modlink, .modlink:visited, .modlink:active {
		color: var(--link-accent);
		text-decoration: none;
	}

	.modlink:hover {
		text-decoration: underline;
	}
}

@keyframes scanlines{
	0% { background-position: 0ch 100%; }
	100% { background-position: 0ch 0%; }
}

.crt::before {
	content: " ";
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(rgba(64, 64, 64, 0) 0, rgba(64, 64, 65, 0) 49%, rgba(0, 0, 0, 0.25) 50%);
	z-index: 2;
	background-size: 100% 0.25em;
	pointer-events: none;
	animation: scanlines linear 0.06s infinite;
}

.crt {
	animation: textShadow 1.6s infinite;
	position: relative;
}