/* Self-hosted fonts — no external requests */
@font-face {
	font-family: 'Orbitron';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/orbitron-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Cinzel';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/cinzel-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Cinzel';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/cinzel-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== CSS VARIABLES ===== */
:root {
	--overlay-1: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.8));
	--overlay-2: radial-gradient(900px 600px at 80% 30%, rgba(55,71,79,.28), transparent 60%),
	             radial-gradient(700px 500px at 15% 80%, rgba(125,182,177,.22), transparent 60%);
	--ink: #e8f0f2;
	--muted: #b5c8cc;
	--accent: #7db6b1;
	--accent-dark: rgba(55,71,79,1);
	--bg: #090e10;
	--glass-bg: rgba(9,14,16,.6);
	--glass-border: rgba(125,182,177,.12);
}

* {
	box-sizing: border-box;
}

html, body {
	min-height: 100%;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 60px;
}

body {
	margin: 0;
	font-family: 'Orbitron', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
	color: var(--ink);
	background: var(--bg);
}

/* ===== ANIMATED BACKGROUND GRADIENT ===== */
.bg-gradient {
	position: fixed;
	inset: 0;
	z-index: -2;
	background: var(--bg);
	overflow: hidden;
}

.bg-gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('../images/hero-banner.jpg');
	background-size: cover;
	background-position: center;
	opacity: 0.22;
	filter: blur(2px) grayscale(0.4);
}

/* Overlay gradients on top */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: var(--overlay-1), var(--overlay-2);
	pointer-events: none;
}

/* ===== FIXED NAV ===== */
.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 3vw, 32px);
	padding: 0 20px;
	height: 52px;
	background: rgba(9, 14, 16, 0.82);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(125,182,177,.1);
}

.site-nav a {
	color: var(--muted);
	text-decoration: none;
	font-size: clamp(.65rem, 1.4vw, .8rem);
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: color .2s ease;
	padding: 4px 0;
	border-bottom: 1px solid transparent;
}

.site-nav a:hover {
	color: var(--ink);
}

.site-nav__book {
	color: var(--ink) !important;
	border: 1px solid rgba(125,182,177,.3) !important;
	border-radius: 6px;
	padding: 5px 14px !important;
	background: rgba(55,71,79,.25);
	transition: background .2s ease, border-color .2s ease !important;
}

.site-nav__book:hover {
	background: rgba(55,71,79,.5) !important;
	border-color: rgba(125,182,177,.55) !important;
}

.site-nav a.is-active {
	color: var(--ink);
	border-bottom-color: rgba(125,182,177,.5);
}

/* ===== HERO SECTION ===== */
.hero {
	min-height: 100svh;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	overflow: hidden;
	background: transparent;
	padding-top: calc(6vh + 52px);
}

.hero::after {
	display: none;
}

/* ===== HERO LOGO IMAGE ===== */
.hero-logo-wrap {
	position: relative;
	z-index: 2;
	margin-bottom: 4vh;
}

.hero-logo {
	max-width: clamp(220px, 42vw, 680px);
	width: 100%;
	height: auto;
	filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(125,182,177,.65)) drop-shadow(0 0 28px rgba(55,71,79,.45));
}

.hero-inner {
	margin-top: auto;
	margin-bottom: 12vh;
	position: relative;
	z-index: 2;
	padding: 0 20px;
}

/* ===== BUTTONS ===== */
.btn {
	position: relative;
	display: inline-block;
	margin: .25em;
	padding: 12px 22px;
	text-decoration: none;
	color: var(--ink);
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 10px;
	background: rgba(255,255,255,.06);
	backdrop-filter: blur(4px);
	transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
	overflow: hidden;
	will-change: transform;
	font-family: 'Orbitron', sans-serif;
	font-size: .8rem;
	letter-spacing: .06em;
}

.btn:hover {
	transform: translateY(-2px);
	border-color: rgba(255,255,255,.35);
	box-shadow: 0 6px 28px rgba(0,0,0,.45);
}

.btn--primary {
	border-color: transparent;
	background: linear-gradient(90deg, rgba(55,71,79,.5), rgba(125,182,177,.35));
}

.btn--primary::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 12px;
	background: linear-gradient(90deg, #37474f, #7db6b1, #37474f);
	filter: blur(18px);
	opacity: .3;
	z-index: -1;
}

.btn--ghost {
	border-color: rgba(125,182,177,.25);
	background: rgba(125,182,177,.06);
}

/* ===== SOCIAL ICONS (HERO) ===== */
.social {
	display: flex;
	justify-content: center;
	margin-top: 1.25rem;
}

.social__viewport {
	position: relative;
	max-width: 92vw;
	overflow: hidden;
}

.social__viewport::before,
.social__viewport::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 26px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to right, rgba(9,14,16,1), rgba(9,14,16,0));
}

.social__viewport::after  { right: 0; transform: scaleX(-1); }
.social__viewport::before { left: 0; }

.social__track {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 4px 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.social__track::-webkit-scrollbar { display: none; }

.social__track > a {
	flex: 0 0 auto;
	scroll-snap-align: center;
}

.social-icons {
	margin-top: -3.3em;
	display: flex;
	justify-content: center;
	gap: 16px;
}

.social-icons a,
.social a {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(125,182,177,.1);
	transition: background .25s ease;
}

.social-icons a img,
.social a img {
	width: 30px;
	height: 30px;
	object-fit: contain;
	filter: invert(1) opacity(.7);
	transition: filter .25s ease, transform .25s ease;
}

.social-icons a:hover img,
.social a:hover img {
	filter: invert(1) opacity(1) drop-shadow(0 0 8px rgba(125,182,177,.6));
	transform: translateY(-1px);
}

@media (min-width: 500px) {
	.social__viewport { overflow: visible; max-width: none; }
	.social__viewport::before,
	.social__viewport::after { display: none; }
	.social__track { overflow: visible; }
}

/* ===== HERO SUBTITLE ===== */
.hero-subtitle {
	font-size: clamp(.75rem, 2vw, 1rem);
	color: var(--muted);
	letter-spacing: .06em;
	line-height: 1.7;
	margin: .5em 0 1em;
}

/* ===== MAIN CONTENT ===== */
main {
	position: relative;
	text-align: center;
}

/* ===== SECTION INNER ===== */
.section-inner {
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(28px, 5vw, 64px) 20px;
}

/* ===== GLITCH HEADING ===== */
.hero-glitch {
	font-size: clamp(20px, 8vw, 72px);
	line-height: 1;
	display: inline-block;
	color: #fff;
	z-index: 2;
	letter-spacing: 7px;
	filter: drop-shadow(10px 10px 30px rgba(125,182,177,.3));
}

.hero-container {
	position: relative;
	text-align: center;
	margin-bottom: clamp(24px, 4vw, 48px);
}

.environment {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.5;
	filter: blur(5px);
	background-size: cover;
}

.layers {
	position: relative;
}

.layers::before,
.layers::after {
	content: attr(data-text);
	position: absolute;
	width: 110%;
	z-index: -1;
}

.layers::before {
	top: 10px;
	left: 15px;
	color: #37474f;
}

.layers::after {
	top: 5px;
	left: -10px;
	color: #7db6b1;
}

/* Glitch animations */
.glitch span {
	animation: paths 5s step-end infinite;
}

.glitch::before {
	animation: paths 5s step-end infinite, opacity 5s step-end infinite,
	  font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
	animation: paths 5s step-end infinite, opacity 5s step-end infinite,
	  font 7s step-end infinite, movement 8s step-end infinite;
}

@keyframes paths {
	0% {
		clip-path: polygon(0% 43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%, 18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%, 41% 39%, 18% 39%, 18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39% 4%, 39% 14%, 76% 14%, 76% 52%, 23% 52%, 23% 35%, 19% 35%, 19% 8%, 36% 8%, 36% 31%, 73% 31%, 73% 16%, 1% 16%, 1% 56%, 50% 56%, 50% 8%);
	}
	5% {
		clip-path: polygon(0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%, 11% 64%, 94% 64%, 94% 70%, 88% 70%, 88% 32%, 18% 32%, 18% 96%, 10% 96%, 10% 62%, 9% 62%, 9% 84%, 68% 84%, 68% 50%, 52% 50%, 52% 55%, 35% 55%, 35% 87%, 25% 87%, 25% 39%, 15% 39%, 15% 88%, 52% 88%);
	}
	30% {
		clip-path: polygon(0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%, 13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%, 17% 54%, 81% 54%, 81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%, 55% 12%, 55% 62%, 68% 62%, 68% 51%, 0% 51%, 0% 92%, 63% 92%, 63% 4%, 65% 4%);
	}
	45% {
		clip-path: polygon(0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%, 33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%, 5% 20%, 79% 20%, 79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%, 96% 57%, 96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%, 63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%, 15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%, 97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%, 17% 14%, 39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%);
	}
	76% {
		clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);
	}
	90% {
		clip-path: polygon(0% 41%, 13% 41%, 13% 6%, 87% 6%, 87% 93%, 10% 93%, 10% 13%, 89% 13%, 89% 6%, 3% 6%, 3% 8%, 16% 8%, 16% 79%, 0% 79%, 0% 99%, 92% 99%, 92% 90%, 5% 90%, 5% 60%, 0% 60%, 0% 48%, 89% 48%, 89% 13%, 80% 13%, 80% 43%, 95% 43%, 95% 19%, 80% 19%, 80% 85%, 38% 85%, 38% 62%);
	}
	1%, 7%, 33%, 47%, 78%, 93% { clip-path: none; }
}

@keyframes movement {
	0%   { top: 0px;   left: -20px; }
	15%  { top: 10px;  left: 10px; }
	60%  { top: 5px;   left: -10px; }
	75%  { top: -5px;  left: 20px; }
	100% { top: 10px;  left: 5px; }
}

@keyframes opacity {
	0%  { opacity: 0.1; } 5%  { opacity: 0.7; } 30% { opacity: 0.4; }
	45% { opacity: 0.6; } 76% { opacity: 0.4; } 90% { opacity: 0.8; }
	1%, 7%, 33%, 47%, 78%, 93% { opacity: 0; }
}

@keyframes font {
	0%  { font-weight: 100; color: #37474f; filter: blur(3px); }
	20% { font-weight: 500; color: #fff;    filter: blur(0); }
	50% { font-weight: 300; color: #7db6b1; filter: blur(2px); }
	60% { font-weight: 700; color: #fff;    filter: blur(0); }
	90% { font-weight: 500; color: #37474f; filter: blur(6px); }
}

/* ===== SECTION LEAD ===== */
.section-lead {
	color: var(--muted);
	font-size: clamp(.8rem, 1.6vw, 1rem);
	letter-spacing: .08em;
	margin: 0 0 clamp(20px, 3vw, 36px);
	text-transform: uppercase;
}

/* ===== SERVICES BANNER ===== */
.services-banner {
	width: 100%;
	aspect-ratio: 16/6;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: clamp(20px, 3vw, 36px);
	background:
		linear-gradient(to bottom, rgba(9,14,16,.25) 0%, rgba(9,14,16,.6) 100%),
		url('../images/image-1.jpg') center/cover no-repeat;
	border: 1px solid var(--glass-border);
	box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

/* ===== SERVICES GRID ===== */
.services-section {
	position: relative;
	z-index: 3;
	width: 100%;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.service-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 32px 24px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	backdrop-filter: blur(6px);
	box-shadow: 0 8px 28px rgba(0,0,0,.35);
	text-decoration: none;
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0,0,0,.5);
	border-color: rgba(125,182,177,.3);
	background: rgba(9,14,16,.75);
}

.service-card--featured {
	border-color: rgba(125,182,177,.3);
	background: linear-gradient(135deg, rgba(55,71,79,.25), rgba(125,182,177,.1));
	box-shadow: 0 8px 36px rgba(125,182,177,.12), 0 8px 28px rgba(0,0,0,.35);
}

.service-card__icon {
	font-size: 2.2rem;
	margin-bottom: 16px;
	color: var(--accent);
	filter: drop-shadow(0 0 8px rgba(125,182,177,.4));
}

.service-card__title {
	font-size: clamp(.9rem, 2vw, 1.1rem);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 12px;
}

.service-card__desc {
	font-size: .82rem;
	color: var(--muted);
	line-height: 1.7;
	margin: 0;
}

/* ===== DETAIL SECTIONS ===== */
.detail-section,
.detail-section--alt {
	position: relative;
	z-index: 3;
	width: 100%;
}

.detail-section .section-inner {
	max-width: 1000px;
}

.detail-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 4vw, 48px);
	align-items: center;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	backdrop-filter: blur(6px);
	padding: clamp(24px, 4vw, 40px);
}

.detail-content--reverse {
	direction: rtl;
}

.detail-content--reverse > * {
	direction: ltr;
}

@media (max-width: 640px) {
	.detail-content,
	.detail-content--reverse {
		grid-template-columns: 1fr;
		direction: ltr;
	}
}

/* Image placeholders with CSS art */
.detail-image {
	width: 100%;
	aspect-ratio: 4/3;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	background: rgba(9,14,16,.8);
	border: 1px solid var(--glass-border);
}

.detail-image--mastering {
	background:
		linear-gradient(135deg, rgba(9,14,16,.55) 0%, rgba(9,14,16,.35) 100%),
		url('../images/image-2.jpg') center/cover no-repeat;
}

.detail-image--mastering::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(9,14,16,.7) 0%, rgba(9,14,16,.1) 60%);
	border-radius: 10px;
}

.detail-image--mastering::before {
	content: "";
}

.detail-image--stem {
	background:
		linear-gradient(135deg, rgba(9,14,16,.5) 0%, rgba(9,14,16,.35) 100%),
		url('../images/image-3.jpg') center/cover no-repeat;
}

.detail-image--stem::before {
	content: "";
}

.detail-image--stem::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(9,14,16,.7) 0%, rgba(9,14,16,.1) 60%);
	border-radius: 10px;
}

.detail-image--mixing {
	background:
		linear-gradient(135deg, rgba(9,14,16,.5) 0%, rgba(9,14,16,.35) 100%),
		url('../images/image-4.jpg') center/cover no-repeat;
}

.detail-image--mixing::before {
	content: "";
}

.detail-image--mixing::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(9,14,16,.7) 0%, rgba(9,14,16,.1) 60%);
	border-radius: 10px;
}

/* Detail text */
.detail-text {
	text-align: left;
	color: var(--muted);
	font-size: clamp(.82rem, 1.5vw, .95rem);
	line-height: 1.8;
}

.detail-text p {
	margin: 0 0 1em;
}

.detail-text p:last-child {
	margin-bottom: 0;
}

.detail-list {
	list-style: none;
	padding: 0;
	margin: 1em 0 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.detail-list li {
	padding: 6px 0 6px 20px;
	position: relative;
	font-size: .82rem;
	border-bottom: 1px solid rgba(125,182,177,.06);
}

.detail-list li:last-child {
	border-bottom: none;
}

.detail-list li::before {
	content: "›";
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 700;
}

/* ===== ABOUT SECTION ===== */
.about-section {
	position: relative;
	z-index: 3;
	width: 100%;
}

.about-content {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: clamp(20px, 4vw, 40px);
	align-items: start;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	backdrop-filter: blur(6px);
	padding: 32px;
	text-align: left;
}

@media (max-width: 600px) {
	.about-content {
		grid-template-columns: 1fr;
	}
}

.about-image {
	width: 100%;
	aspect-ratio: 3/4;
	border-radius: 10px;
	background:
		linear-gradient(to bottom, rgba(9,14,16,.15) 0%, rgba(9,14,16,.55) 100%),
		url('../images/hero-banner.jpg') center/cover no-repeat;
	border: 1px solid var(--glass-border);
	position: relative;
	overflow: hidden;
}

.about-image::before {
	content: none;
}

.about-image::after {
	content: none;
}

.about-text {
	color: var(--muted);
	font-size: clamp(.82rem, 1.5vw, .95rem);
	line-height: 1.8;
}

.about-text p {
	margin: 0 0 1em;
}

.about-text p:last-child {
	margin-bottom: 0;
}

.about-tagline {
	margin-top: 1.5em !important;
	padding-top: 1.25em;
	border-top: 1px solid rgba(125,182,177,.1);
	color: rgba(232,240,242,.45) !important;
	font-size: .78rem !important;
	letter-spacing: .08em;
}

/* ===== HIGHLIGHTS SECTION ===== */
.highlights-section {
	position: relative;
	z-index: 3;
	width: 100%;
}

.highlights-content {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	padding: 32px;
	backdrop-filter: blur(6px);
	max-width: 680px;
	margin: 0 auto;
}

.highlights__list {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 36px;
}

.highlights__row {
	display: contents;
}

.highlights__list dt,
.highlights__list dd {
	padding: 18px 0;
	border-bottom: 1px solid rgba(125,182,177,.06);
}

.highlights__list dt:first-of-type,
.highlights__list dd:first-of-type {
	padding-top: 4px;
}

.highlights__list dt:last-of-type,
.highlights__list dd:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}

.highlights__list dt {
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.35);
	white-space: nowrap;
	text-align: left;
	align-self: baseline;
}

.highlights__list dd {
	margin: 0;
	font-size: .9rem;
	color: var(--ink);
	line-height: 1.5;
	text-align: left;
	align-self: baseline;
}

.highlights__list dd a {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(125,182,177,.25);
	transition: color .2s, border-color .2s;
}

.highlights__list dd a:hover {
	color: var(--ink);
	border-color: var(--ink);
}

.highlight-badge {
	display: inline-block;
	padding: 2px 8px;
	margin-right: 6px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	border-radius: 999px;
	border: 1px solid rgba(125,182,177,.5);
	background: rgba(125,182,177,.12);
	box-shadow: 0 0 10px rgba(125,182,177,.2);
	color: var(--ink);
	vertical-align: middle;
}

@media (max-width: 500px) {
	.highlights__list {
		grid-template-columns: 1fr;
	}
	.highlights__list dt {
		padding-bottom: 4px;
		border-bottom: none;
	}
	.highlights__list dd {
		padding-top: 0;
	}
}

/* ===== CONTACT SECTION ===== */
.contact-section {
	position: relative;
	z-index: 3;
	width: 100%;
}

.contact-content {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	padding: 40px 32px;
	backdrop-filter: blur(6px);
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
}

.contact-intro {
	margin: 0 0 12px;
	font-size: clamp(.9rem, 2vw, 1.1rem);
	letter-spacing: .06em;
	color: var(--ink);
}

.contact-desc {
	margin: 0 0 28px;
	font-size: .88rem;
	color: var(--muted);
	line-height: 1.7;
}

.contact-btn {
	font-size: .9rem;
	padding: 14px 28px;
}

.contact-social {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(125,182,177,.08);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.contact-social__link {
	color: var(--muted);
	text-decoration: none;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: color .2s;
}

.contact-social__link:hover {
	color: var(--accent);
}

.contact-social__sep {
	color: rgba(255,255,255,.2);
	font-size: .7rem;
}

.contact-links {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ===== FOOTER ===== */
.site-footer {
	position: relative;
	z-index: 3;
	text-align: center;
	padding: 40px 20px;
	border-top: 1px solid rgba(125,182,177,.08);
	color: var(--muted);
	font-size: .8rem;
	letter-spacing: .04em;
}

.site-footer p {
	margin: 0 0 8px;
}

.site-footer__links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 12px;
	font-size: .7rem;
	opacity: .5;
}

.site-footer__links span {
	opacity: .4;
}

.site-footer a {
	color: var(--muted);
	text-decoration: none;
	border-bottom: 1px solid rgba(125,182,177,.2);
	transition: color .2s, border-color .2s;
}

.site-footer a:hover {
	color: var(--ink);
	border-color: var(--ink);
}

/* ===== MOBILE POLISH ===== */
@media (max-width: 600px) {
	body {
		padding-top: env(safe-area-inset-top, 0);
	}

	.hero-logo {
		max-width: min(80vw, 340px);
	}

	.btn {
		padding: 10px 16px;
		font-size: .85rem;
	}

	.hero-inner {
		margin-bottom: 8vh;
	}

	.social-icons {
		gap: 10px;
		margin-top: 1.2em;
	}

	.social-icons a {
		width: 40px;
		height: 40px;
	}

	.social-icons a img {
		width: 20px;
		height: 20px;
	}
}

/* ===================================================
   DETAILS PAGE
   =================================================== */

/* Compact hero variant — no full-viewport height */
.hero--compact {
	min-height: 60svh;
}

/* Details sections share the z-index stack */
.details-section {
	position: relative;
	z-index: 3;
	width: 100%;
}

/* ===== PRICE CARD ===== */
.price-card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	backdrop-filter: blur(6px);
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

.price-card--featured {
	border-color: rgba(125,182,177,.28);
	box-shadow: 0 8px 40px rgba(125,182,177,.1), 0 8px 32px rgba(0,0,0,.4);
}

/* Full-width image strip at top of card */
.price-card__image {
	width: 100%;
	aspect-ratio: 16/5;
	position: relative;
}

.price-card__image--mastering {
	background:
		linear-gradient(to bottom, rgba(9,14,16,.1) 0%, rgba(9,14,16,.65) 100%),
		url('../images/image-2.jpg') center/cover no-repeat;
}

.price-card__image--stem {
	background:
		linear-gradient(to bottom, rgba(9,14,16,.1) 0%, rgba(9,14,16,.65) 100%),
		url('../images/image-3.jpg') center/cover no-repeat;
}

.price-card__image--mixing {
	background:
		linear-gradient(to bottom, rgba(9,14,16,.1) 0%, rgba(9,14,16,.65) 100%),
		url('../images/image-4.jpg') center/cover no-repeat;
}

/* Card body */
.price-card__body {
	padding: clamp(24px, 4vw, 40px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(20px, 3vw, 36px);
	align-items: start;
}

/* CTA button — always spans full width at the bottom */
.price-card__cta {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: 8px;
}

/* ===== PRICE BLOCK (requirement / turnaround / scope) ===== */
.price-block {
	text-align: left;
}

.price-block__title {
	font-size: .65rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(125,182,177,.15);
}

.price-block__text {
	margin: 0;
	font-size: .88rem;
	color: var(--muted);
	line-height: 1.7;
}

.price-block__text strong {
	color: var(--ink);
	font-weight: 700;
}

/* ===== REQUIREMENTS LIST ===== */
.req-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.req-list li {
	padding: 0 0 8px 18px;
	position: relative;
	font-size: .84rem;
	color: var(--muted);
	line-height: 1.6;
	border-bottom: 1px solid rgba(125,182,177,.06);
}

.req-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.req-list li::before {
	content: "›";
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 700;
}

code {
	font-family: 'Orbitron', monospace;
	font-size: .75rem;
	background: rgba(125,182,177,.08);
	border: 1px solid rgba(125,182,177,.15);
	border-radius: 4px;
	padding: 2px 6px;
	color: var(--ink);
	word-break: break-all;
}

.req-example {
	display: block;
	margin-top: 4px;
	font-size: .76rem;
	color: rgba(181,200,204,.55);
	font-style: italic;
}

/* ===================================================
   IMPRESSUM MODAL
   =================================================== */

.impressum-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--muted);
	font-family: 'Orbitron', sans-serif;
	font-size: .7rem;
	letter-spacing: .08em;
	border-bottom: 1px solid rgba(125,182,177,.2);
	transition: color .2s, border-color .2s;
}

.impressum-btn:hover {
	color: var(--ink);
	border-color: var(--ink);
}

.modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 500;
	background: rgba(0,0,0,.65);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: backdrop-in .2s ease;
}

.modal-backdrop[hidden] {
	display: none;
}

@keyframes backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.modal {
	position: relative;
	background: rgba(9,14,16,.92);
	border: 1px solid rgba(125,182,177,.2);
	border-radius: 14px;
	backdrop-filter: blur(12px);
	padding: 40px 36px 32px;
	max-width: 420px;
	width: 100%;
	box-shadow: 0 24px 64px rgba(0,0,0,.6);
	animation: modal-in .2s ease;
}

@keyframes modal-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

.modal__close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: none;
	color: var(--muted);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
	transition: color .2s, background .2s;
}

.modal__close:hover {
	color: var(--ink);
	background: rgba(255,255,255,.07);
}

.modal__title {
	font-size: .65rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(125,182,177,.15);
}

.modal__name {
	margin: 0 0 8px;
	font-size: 1rem;
	color: var(--ink);
	letter-spacing: .04em;
}

.modal__email {
	margin: 0 0 20px;
}

.modal__email a {
	color: var(--accent);
	text-decoration: none;
	font-size: .85rem;
	border-bottom: 1px solid rgba(125,182,177,.3);
	transition: color .2s, border-color .2s;
}

.modal__email a:hover {
	color: var(--ink);
	border-color: var(--ink);
}

.modal__postal {
	margin: 0;
	font-size: .78rem;
	color: rgba(181,200,204,.5);
	padding-top: 16px;
	border-top: 1px solid rgba(125,182,177,.08);
	letter-spacing: .04em;
}