@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;500;600&display=swap");

:root {
	--neo-ink: #10232d;
	--neo-gold: #ffbd21;
	--neo-yellow: #ffe94b;
}

body {
	justify-content: flex-start;
	min-height: 100vh;
	padding: clamp(3em, 7vw, 7em) clamp(2em, 7vw, 7em) 3em;
	color: rgba(255, 255, 255, .78);
	background: #071920;
	font-family: "Open Sans", sans-serif;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(5, 20, 27, .96) 0%, rgba(7, 25, 32, .9) 45%, rgba(7, 25, 32, .54) 72%, rgba(7, 25, 32, .35) 100%);
}

#bg { opacity: .65; }
#bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	background: radial-gradient(circle at 68% 40%, rgba(255, 189, 33, .12), transparent 30%);
}

#header { width: min(780px, 100%); margin: auto 0 0; }

.brand {
	display: block;
	width: min(390px, 82vw);
	margin: 0 0 clamp(3.5em, 8vh, 6em);
	padding: 17px 22px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 18px;
	box-shadow: none;
	backdrop-filter: blur(0) saturate(100%);
	-webkit-backdrop-filter: blur(0) saturate(100%);
	transition: background .9s ease, border-color .9s ease, box-shadow .9s ease, backdrop-filter .9s ease;
}

.logo-glass-active .brand {
	background: linear-gradient(135deg, rgba(255, 255, 255, .285), rgba(255, 255, 255, .083));
	border-color: rgba(255, 255, 255, .36);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .465),
		inset 0 -1px 0 rgba(255, 255, 255, .075),
		0 20px 55px rgba(0, 0, 0, .135);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
}

.kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 1.3em;
	color: var(--neo-yellow);
	font: 700 .73em/1.4 "Montserrat", sans-serif;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.kicker span { width: 42px; height: 3px; background: var(--neo-gold); border-radius: 99px; }

#header h1 {
	max-width: 760px;
	margin: 0 0 .35em;
	color: #fff;
	font: 800 clamp(3.15em, 6.2vw, 6em)/.98 "Montserrat", sans-serif;
	letter-spacing: -.055em;
	text-wrap: balance;
}

#header .lead {
	max-width: 690px;
	margin-bottom: 2.2em;
	color: rgba(255, 255, 255, .7);
	font-size: clamp(1em, 1.35vw, 1.25em);
	line-height: 1.65;
}

.contact-actions { display: flex; flex-wrap: wrap; gap: .8em; margin-bottom: auto; }
.contact-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7em;
	min-width: 166px;
	height: 3.4em;
	padding: 0 1.5em;
	border: 0;
	border-radius: 8px;
	font: 700 .86em/1 "Montserrat", sans-serif;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.contact-actions a:hover { transform: translateY(-2px); }
.contact-actions a:focus-visible { outline: 3px solid rgba(255, 233, 75, .55); outline-offset: 4px; }
.primary-action { color: var(--neo-ink) !important; background: linear-gradient(135deg, var(--neo-gold), var(--neo-yellow)); box-shadow: 0 12px 30px rgba(255, 189, 33, .24); }
.secondary-action { color: #fff !important; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22) !important; backdrop-filter: blur(8px); }

#footer {
	position: absolute;
	left: auto;
	right: clamp(2em, 5vw, 5em);
	bottom: clamp(2em, 5vw, 4em);
	width: min(390px, 38vw);
	margin-top: 0;
	opacity: .68;
}
.availability { display: flex; align-items: center; gap: 10px; margin-bottom: .8em; color: rgba(255, 255, 255, .78); font-size: .8em; }
.availability span { width: 8px; height: 8px; background: var(--neo-gold); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 189, 33, .13); }
.contact-data { display: flex; flex-wrap: wrap; gap: .5em 1.4em; margin-bottom: 1.2em; color: rgba(255, 255, 255, .6); font-size: .78em; }
.contact-data a, #footer .copyright a { color: rgba(255, 255, 255, .75); border-color: rgba(255, 255, 255, .18); }
#footer .copyright { color: rgba(255, 255, 255, .38); font-size: .68em; }

@media screen and (max-width: 736px) {
	body { padding: 2em 1.5em; }
	body::before { background: linear-gradient(90deg, rgba(5, 20, 27, .94), rgba(7, 25, 32, .73)); }
	.brand { margin-bottom: 4em; }
	#header h1 { font-size: clamp(2.75em, 13vw, 4.2em); }
	.contact-actions { flex-direction: column; }
	.contact-actions a { width: 100%; }
	#footer {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		margin-top: 4em;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	#bg div.visible { animation: none !important; }
	.contact-actions a, .brand { transition: none; }
}