body,
input,
select,
textarea {
	font-family: "Noto Sans", "Source Sans Pro", Helvetica, sans-serif;
	line-height: 1.65;
}

h1,
h2,
h3,
h4,
h5,
h6,
#header .logo,
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	font-family: "IBM Plex Sans", "Noto Sans", "Source Sans Pro", Helvetica, sans-serif;
}

#header .logo strong {
	font-weight: 700;
}

#header .logo span {
	font-weight: 500;
}

body {
	background:
		radial-gradient(1100px 520px at 8% -8%, rgba(92, 157, 255, 0.16), transparent 60%),
		radial-gradient(900px 480px at 100% 8%, rgba(79, 209, 184, 0.13), transparent 55%),
		#111626;
	scroll-behavior: smooth;
	color: #eaf1ff;
}

#header {
	background: rgba(13, 17, 30, 0.9);
	backdrop-filter: blur(6px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
	border-bottom: 1px solid rgba(159, 231, 255, 0.08);
}

#header .logo strong {
	border-radius: 4px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
	background: rgba(255, 255, 255, 0.95);
}

#header .logo span {
	color: #d8f3ff;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-shadow: 0 0 14px rgba(130, 216, 255, 0.16);
}

#header.is-compact {
	background: rgba(10, 14, 24, 0.96);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36);
}

#banner.major:after {
	background: linear-gradient(135deg, rgba(10, 14, 24, 0.52), rgba(10, 14, 24, 0.88));
}

h1 {
	font-size: clamp(2rem, 4vw, 3.4rem);
}

h2 {
	font-size: clamp(1.35rem, 2.2vw, 2rem);
}

h3 {
	font-size: clamp(1rem, 1.4vw, 1.2rem);
}

p, li {
	font-size: clamp(0.96rem, 1vw, 1.03rem);
}

.tiles article {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.tiles article:before {
	background: linear-gradient(180deg, rgba(36, 41, 67, 0.12), rgba(36, 41, 67, 0.75));
	transition: background 220ms ease;
}

.tiles article:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
}

.tiles article:hover:before {
	background: linear-gradient(180deg, rgba(36, 41, 67, 0.06), rgba(36, 41, 67, 0.72));
}

.image.main img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 6;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22);
	transition: transform 260ms ease, box-shadow 260ms ease;
}

.image.main {
	position: relative;
	display: block;
	padding: 0.5rem;
	border-radius: 16px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
		rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 20px 40px rgba(0, 0, 0, 0.25),
		0 0 0 1px rgba(114, 216, 255, 0.06),
		0 0 28px rgba(80, 167, 255, 0.12);
	overflow: hidden;
	animation: bannerFloat 10s ease-in-out infinite;
	transform-style: preserve-3d;
}

.image.main:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(255,255,255,0.10), transparent 35%, transparent 60%, rgba(255,255,255,0.06));
	pointer-events: none;
}

.image.main:after {
	content: "";
	position: absolute;
	inset: -20%;
	background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.10) 48%, transparent 60%);
	transform: translateX(-120%);
	animation: bannerSheen 7s ease-in-out infinite;
	pointer-events: none;
}

.image.main .banner-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 85%);
	opacity: 0.35;
	pointer-events: none;
}

.image.main .banner-orb {
	position: absolute;
	border-radius: 999px;
	pointer-events: none;
	opacity: 0.2;
	mix-blend-mode: screen;
	animation: orbDrift 14s ease-in-out infinite;
}

.image.main .banner-orb.orb-a {
	top: -1.75rem;
	right: 7%;
	width: 10rem;
	height: 10rem;
	background: radial-gradient(circle at 35% 35%, rgba(178, 234, 255, 0.95), rgba(89, 120, 255, 0.25), transparent 70%);
}

.image.main .banner-orb.orb-b {
	left: 7%;
	bottom: -1.5rem;
	width: 8rem;
	height: 8rem;
	background: radial-gradient(circle at 40% 40%, rgba(157, 255, 227, 0.9), rgba(30, 203, 171, 0.2), transparent 70%);
	animation-delay: -6s;
}

.image.main:hover img {
	transform: translateY(-2px);
	box-shadow: 0 20px 32px rgba(0, 0, 0, 0.24);
}

.image.main:hover {
	animation-duration: 6s;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 24px 44px rgba(0, 0, 0, 0.28),
		0 0 0 1px rgba(114, 216, 255, 0.12),
		0 0 34px rgba(80, 167, 255, 0.18);
}

.image.main.is-tilting {
	transition: transform 180ms ease;
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	border-radius: 8px;
}

.button.primary,
button.primary,
input[type="submit"].primary {
	background-image: linear-gradient(135deg, #4fd1b8, #5c9dff);
	border: 0;
	box-shadow: 0 10px 18px rgba(34, 61, 110, 0.35);
	transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.18);
}

.button:hover,
button:hover,
input[type="submit"]:hover {
	transform: translateY(-1px);
}

.button.primary:hover,
button.primary:hover,
input[type="submit"].primary:hover {
	box-shadow: 0 14px 22px rgba(34, 61, 110, 0.42), 0 0 18px rgba(92, 157, 255, 0.18);
}

.contact-method .icon {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
}

#menu .links a {
	transition: color 180ms ease, padding-left 180ms ease;
}

#menu .links a:hover {
	padding-left: 0.35rem;
}

#menu .links a.is-active {
	color: #9fe7ff !important;
	font-weight: 600;
}

h1, h2, h3 {
	letter-spacing: 0.02em;
}

h1, h2 {
	color: #f5f9ff;
	text-shadow: 0 0 18px rgba(124, 206, 255, 0.12);
}

h3 {
	color: #edf5ff;
	text-shadow: 0 0 12px rgba(124, 206, 255, 0.08);
}

p, li {
	color: #dce6fb;
}

a {
	color: #b8ecff;
}

a:hover {
	color: #e2fbff !important;
}

#banner.major h1 {
	text-shadow: 0 0 16px rgba(118, 199, 255, 0.25), 0 0 36px rgba(93, 140, 255, 0.12);
}

#banner.major .content p {
	text-shadow: 0 0 12px rgba(115, 212, 255, 0.1);
}

.box,
blockquote {
	border-radius: 10px;
}

.banner-note {
	margin: 0.9rem 0 0 0;
	padding: 0.75rem 0.9rem;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(159, 231, 255, 0.08);
	color: #dbefff;
	font-size: 0.95rem;
	box-shadow: inset 0 0 0 1px rgba(95, 176, 255, 0.03), 0 0 20px rgba(80, 167, 255, 0.05);
}

.mini-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.9rem;
	margin: 1.15rem 0 1.5rem 0;
}

.mini-stat {
	padding: 0.95rem 1rem;
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
	border: 1px solid rgba(159, 231, 255, 0.08);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18), 0 0 18px rgba(80, 167, 255, 0.05);
}

.mini-stat strong {
	display: block;
	font-family: "IBM Plex Sans", "Noto Sans", sans-serif;
	font-size: 1.05rem;
	color: #f2f7ff;
	text-shadow: 0 0 10px rgba(135, 221, 255, 0.12);
}

.mini-stat span {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.9rem;
	color: #bfd3f9;
}

a:focus-visible,
.button:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid #87e8ff;
	outline-offset: 3px;
}

.back-to-top {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(36, 41, 67, 0.88);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
	backdrop-filter: blur(6px);
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease;
	z-index: 10001;
}

.back-to-top:hover {
	background: rgba(48, 56, 92, 0.95);
}

.back-to-top.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Lightweight reveal states for custom.js */
.reveal-on-scroll {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 420ms ease, transform 420ms ease;
	will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
	opacity: 1;
	transform: none;
}

/* Responsive tuning */
@media screen and (max-width: 980px) {
	#header .logo span {
		letter-spacing: 0.08em;
		font-size: 0.78rem;
	}

	#banner.major .content p br {
		display: none;
	}

	.image.main img {
		border-radius: 10px;
		aspect-ratio: 16 / 7;
	}
}

@media screen and (max-width: 736px) {
	#main > section > .inner {
		padding-top: 2.25rem;
		padding-bottom: 2.25rem;
	}

	#header .logo strong {
		padding: 0 0.6em;
	}

	#header .logo span {
		display: inline-block;
		max-width: 14.5rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: top;
	}

	.contact-method {
		margin-bottom: 0.35rem;
	}

	.mini-stats {
		grid-template-columns: 1fr;
		gap: 0.7rem;
	}

	.reveal-on-scroll {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media screen and (max-width: 480px) {
	body {
		background:
			radial-gradient(650px 320px at 10% -10%, rgba(92, 157, 255, 0.14), transparent 60%),
			radial-gradient(520px 300px at 100% 10%, rgba(79, 209, 184, 0.11), transparent 55%),
			#111626;
	}

	#header .logo span {
		max-width: 10.5rem;
		font-size: 0.72rem;
	}

	.tiles article {
		border-radius: 10px;
	}

	.image.main {
		padding: 0.35rem;
		border-radius: 12px;
	}

	.image.main img {
		aspect-ratio: 4 / 3;
	}

	.image.main .banner-grid {
		opacity: 0.2;
	}

	.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		width: 100%;
	}

	.back-to-top {
		right: 0.75rem;
		bottom: 0.75rem;
		width: 2.7rem;
		height: 2.7rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		animation: none !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@keyframes bannerFloat {
	0%, 100% {
		transform: translateY(0);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.06),
			0 20px 40px rgba(0, 0, 0, 0.25),
			0 0 0 1px rgba(114, 216, 255, 0.06),
			0 0 28px rgba(80, 167, 255, 0.12);
	}
	50% {
		transform: translateY(-2px);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.08),
			0 24px 46px rgba(0, 0, 0, 0.28),
			0 0 0 1px rgba(114, 216, 255, 0.10),
			0 0 36px rgba(80, 167, 255, 0.16);
	}
}

@keyframes bannerSheen {
	0%, 15% {
		transform: translateX(-120%) rotate(0.001deg);
		opacity: 0;
	}
	22% {
		opacity: 1;
	}
	38% {
		transform: translateX(120%) rotate(0.001deg);
		opacity: 0.65;
	}
	100% {
		transform: translateX(120%) rotate(0.001deg);
		opacity: 0;
	}
}

@keyframes orbDrift {
	0%, 100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	50% {
		transform: translate3d(10px, -8px, 0) scale(1.04);
	}
}