/* Base tokens */
:root {
	--bg: #0f172a;
	--surface: #111827;
	--card: #1f2937;
	--text: #c5c5c5;
	--muted: #9ca3af;
}

* {
	box-sizing: border-box;
}

/* Page chrome */
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	background-color: var(--bg);
	color: var(--text);
	line-height: 1.5;
	overflow-x: hidden;
	position: relative;
	isolation: isolate;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)), url("../assets/images/logoCL.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center calc(50% + var(--page-bg-shift, 0px));
	filter: blur(3px);
	transform: scale(1.03);
	transform-origin: center;
	pointer-events: none;
	z-index: -1;
}

.container {
	width: min(1100px, 92%);
	margin: 0 auto;
}

/* Navigation */
.navbar {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(17, 24, 39, 0.28);
	backdrop-filter: blur(6px);
	border-bottom: none;
	transition: background-color 0.3s ease;
}

.navbar.scrolled,
.navbar.compact {
	background: rgba(17, 24, 39, 0.38);
}

.navbar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.9rem 0;
	position: relative;
	padding-right: 0;
}

.studio-banner {
	padding: 0.9rem 0 0.65rem;
	will-change: opacity, transform;
	border-radius: 0;
	box-shadow: none;
	text-align: center;
	margin-bottom: 0;
}

.studio-banner-inner {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: bottom;
	width: 0;
	max-width: 94vw;
	font-size: clamp(1rem, 6vw, 4.2rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.03em;
	color: #ffffff;
	text-transform: none;
	border-right: 2px solid #cfe081;
	animation: bannerTyping 1.1s steps(23, end) 0.1s forwards, bannerCursor 0.6s step-end infinite;
}

@media (min-width: 901px) {
	.studio-banner-inner {
		font-size: clamp(1.5rem, 4.2vw, 3rem);
	}
}

@keyframes bannerTyping {
	from {
		width: 0;
	}
	to {
		width: 27ch;
	}
}

@keyframes bannerCursor {
	from,
	to {
		border-right-color: transparent;
	}
	50% {
		border-right-color: #cfe081;
	}
}

.nav-links {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	opacity: 1;
	transform: scale(1);
	transform-origin: right center;
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.nav-links a {
	color: var(--text);
	text-decoration: none;
	font-size: 0.95rem;
	border: 1px solid #2c384d;
	border-radius: 6px;
	padding: 0.3rem 0.6rem;
	transition: background-color 0.45s ease, color 0.45s ease;
}

.nav-links a:hover {
	background: #89a238;
	color: rgba(17, 24, 39, 0.95);
}

.burger-btn {
	display: inline-block;
	position: absolute;
	right: 0;
	top: 50%;
	color: var(--text);
	background: transparent;
	border: none;
	border-radius: 6px;
	padding: 0.2rem 0.55rem;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) scale(0);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.navbar.no-nav-animate .nav-links,
.navbar.no-nav-animate .burger-btn {
	transition: none;
}

.navbar.scrolled .nav-links,
.navbar.compact .nav-links {
	opacity: 0;
	transform: scale(0);
	pointer-events: none;
}

.navbar.scrolled .burger-btn,
.navbar.compact .burger-btn {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(-50%) scale(1);
}

.navbar.scrolled.menu-open .nav-links,
.navbar.compact.menu-open .nav-links {
	position: absolute;
	right: 0;
	top: 100%;
	margin-top: 0.45rem;
	flex-direction: column;
	align-items: flex-start;
	background: rgba(17, 24, 39, 0.98);
	padding: 0.75rem;
	border: 1px solid #374151;
	border-radius: 10px;
	gap: 0.6rem;
	z-index: 1100;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.navbar.scrolled.menu-open .nav-links a,
.navbar.compact.menu-open .nav-links a {
	width: 100%;
	background: #1f2937;
	border: none;
}

.navbar.scrolled.menu-open .nav-links a:hover,
.navbar.compact.menu-open .nav-links a:hover {
	background: rgba(137, 162, 56, 0.6);
	color: #111827;
}

.navbar.scrolled.menu-open .nav-links a:active,
.navbar.compact.menu-open .nav-links a:active {
	background: rgba(137, 162, 56, 0.6);
	color: #111827;
}

main {
	padding: 1.5rem 0 3rem;
}

/* Content cards */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.feature-card {
	height: 100%;
	margin: 0;
}

.feature-card .card-title {
	position: relative;
	display: block;
	text-align: center;
	padding-left: 2.8rem;
}

.feature-card .card-title:hover {
	animation: none;
}

.feature-card .card-title .card-title-text {
	display: inline-block;
}

.feature-card .card-title:hover .card-title-text {
	animation: headingFocus 0.6s ease-in-out forwards;
}

.feature-card .card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 999px;
	background: rgba(137, 162, 56, 0.2);
	color: #cfe081;
}

.feature-card .card-icon svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

section {
	background: var(--card);
	border: 1px solid #374151;
	border-radius: 14px;
	padding: 2rem;
	margin: 1rem 0;
}

section:hover {
	animation: shake 0.5s ease-in-out;
	box-shadow: 0 0 20px rgba(137, 162, 56, 0.4), inset 0 0 0 2px rgba(0, 0, 0, 0.5);
}

#hero:hover {
	animation: none;
}

@keyframes shake {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	10% { transform: translate(-2px, 1px) rotate(-0.5deg); }
	20% { transform: translate(3px, -2px) rotate(0.5deg); }
	30% { transform: translate(-3px, 2px) rotate(-0.5deg); }
	40% { transform: translate(2px, -1px) rotate(0.5deg); }
	50% { transform: translate(-1px, 3px) rotate(-0.5deg); }
	60% { transform: translate(3px, 1px) rotate(0.5deg); }
	70% { transform: translate(-2px, -2px) rotate(-0.5deg); }
	80% { transform: translate(1px, 2px) rotate(0.5deg); }
	90% { transform: translate(-1px, -1px) rotate(-0.5deg); }
}

section.reveal-section {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.75s ease, transform 0.75s ease;
}

section.reveal-section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

section.nav-click-fade {
	animation: navClickFade 0.55s ease;
}

@keyframes navClickFade {
	from {
		opacity: 0.25;
	}
	to {
		opacity: 1;
	}
}

/* Hero + contact bands */
#hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 3rem 0;
	min-height: clamp(240px, 50vw, 620px);
	width: 100vw;
	margin-top: 1px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
	border-left: none;
	border-right: none;
	background: rgba(137, 162, 56, 0.6);
	isolation: isolate;
}

#hero::before,
#hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

#hero::before {
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 48%, rgba(255, 255, 255, 0) 100%);
	opacity: 0;
	mix-blend-mode: screen;
	animation: heroBackgroundGlitchFlash 2.8s steps(2, end) infinite;
}

#hero::after {
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.12) 0,
		rgba(255, 255, 255, 0.12) 1px,
		transparent 1px,
		transparent 3px
	);
	opacity: 0.3;
	animation: heroBackgroundGlitchShift 3.4s linear infinite;
}

#contact-us {
	padding: 2rem 0;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
	border-left: none;
	border-right: none;
	background: rgba(137, 162, 56, 0.6);
}

#contact-us:hover {
	animation: none;
}

#contact-us h2:hover {
	animation: none;
}

#contact-us h2 {
	font-size: clamp(2.6rem, 7vw, 3.4rem);
	line-height: 1.05;
}

.contact-accordion-title {
	margin-bottom: 0.6rem;
}

.contact-accordion-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #ffffff;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.contact-accordion-icon {
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1;
	transition: transform 0.25s ease;
}

#contact-us .contact-accordion-icon {
	transform: rotate(0deg);
}

#contact-us.is-open .contact-accordion-icon {
	transform: rotate(90deg);
}

.contact-accordion-panel {
	padding-top: 0.2rem;
}

.spin-us {
	display: inline-block;
	transform-origin: center;
	transition: transform 0.65s ease;
}

#contact-us h2:hover .spin-us {
	transform: rotate(360deg);
}

#floating-cards {
	overflow: hidden;
	padding: 1.35rem 0 1.55rem;
	background: rgba(137, 162, 56, 0.28);
	border-color: rgba(207, 224, 129, 0.6);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
	border-left: none;
	border-right: none;
}

#floating-cards h2 {
	text-align: center;
	margin-bottom: 0.9rem;
	color: #ffffff;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}

#floating-cards h2:hover {
	animation: none;
	filter: none;
	color: #ffffff;
}

#floating-cards:hover {
	animation: none;
	box-shadow: none;
}

.floating-loop {
	margin-top: 0.45rem;
	padding-top: 0.35rem;
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}

.floating-track {
	display: flex;
	gap: 0.75rem;
	width: max-content;
	animation: floatingCardsLoop 22s linear infinite;
}

.floating-loop:hover .floating-track {
	animation-play-state: paused;
}

.floating-card {
	flex: 0 0 auto;
	width: clamp(110px, 14vw, 140px);
	height: clamp(110px, 14vw, 140px);
	padding: 0.7rem;
	border-radius: 12px;
	border: 1px solid rgba(123, 168, 255, 0.5);
	background: rgba(12, 17, 28, 0.78);
	color: #ffffff;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	letter-spacing: 0.02em;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
	transform: translateY(0);
	animation: floatingCardBob 2.6s ease-in-out infinite;
}

.team-icon {
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	opacity: 0.95;
}

.team-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.floating-card:nth-child(2n) {
	animation-delay: 0.5s;
}

.floating-card:nth-child(3n) {
	animation-delay: 1s;
}

.floating-card:hover {
	animation-play-state: paused;
	border-color: #ff9f2f;
	box-shadow: 0 0 0 2px rgba(255, 159, 47, 0.58), 0 8px 20px rgba(0, 0, 0, 0.28);
}

@keyframes floatingCardsLoop {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes floatingCardBob {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}

.contact-form {
	display: grid;
	gap: 0.65rem;
	margin-top: 1rem;
}

.form-success-message {
	margin-top: 1rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 8px;
	background: rgba(17, 24, 39, 0.56);
	color: #ffffff;
	font-weight: 600;
	line-height: 1.4;
}

.contact-form label {
	font-size: 0.92rem;
	font-weight: 600;
	color: #ffffff;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 8px;
	background: rgba(17, 24, 39, 0.42);
	color: #ffffff;
	font: inherit;
}

.contact-form input::placeholder,
.contact-form select,
.contact-form textarea::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	outline: 2px solid rgba(207, 224, 129, 0.95);
	outline-offset: 1px;
	border-color: rgba(207, 224, 129, 0.95);
}

.contact-form button {
	justify-self: start;
	margin-top: 0.35rem;
	padding: 0.62rem 1rem;
	border: none;
	border-radius: 8px;
	background: #cfe081;
	color: #111827;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.contact-form button:hover {
	filter: brightness(0.94);
	transform: translateY(-1px);
}

.contact-form button:active {
	transform: translateY(0);
}

#newsletter {
	background: rgba(17, 24, 39, 0.82);
	border-color: #3b475f;
	padding: 1.6rem 0;
}

#newsletter:hover {
	animation: none;
	box-shadow: 0 0 20px rgba(137, 162, 56, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.newsletter-inner {
	width: min(1100px, 92%);
	margin: 0 auto;
	text-align: center;
}

.newsletter-inner h2 {
	color: #ffffff;
	margin-bottom: 0.45rem;
}

.newsletter-inner p {
	color: #d1d5db;
	margin-bottom: 1rem;
}

.newsletter-form {
	display: flex;
	gap: 0.6rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.newsletter-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.newsletter-form input {
	width: min(420px, 90vw);
	padding: 0.62rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 8px;
	background: rgba(17, 24, 39, 0.42);
	color: #ffffff;
	font: inherit;
}

.newsletter-form input:focus {
	outline: 2px solid rgba(207, 224, 129, 0.95);
	outline-offset: 1px;
	border-color: rgba(207, 224, 129, 0.95);
}

.newsletter-form button {
	padding: 0.62rem 1rem;
	border: none;
	border-radius: 8px;
	background: #cfe081;
	color: #111827;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.newsletter-form button:hover {
	filter: brightness(0.94);
	transform: translateY(-1px);
}

.newsletter-form button:active {
	transform: translateY(0);
}

/* Hero logo and glitch treatment */
#hero > *,
#contact-us > * {
	width: min(1100px, 92%);
	margin-left: auto;
	margin-right: auto;
}

#hero p,
#contact-us h2,
#contact-us p {
	color: #ffffff;
}

#hero p {
	text-align: center;
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
	font-weight: 500;
	line-height: 1.45;
}

.hero-content {
	display: grid;
	justify-items: center;
	position: relative;
}

.hero-wide-lines {
	position: absolute;
	left: 50%;
	top: -14px;
	transform: translateX(-50%);
	width: 100vw;
	height: clamp(90px, 20vw, 220px);
	pointer-events: none;
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(206, 224, 129, 0.36) 0,
		rgba(206, 224, 129, 0.36) 1px,
		transparent 1px,
		transparent 2px
	);
	opacity: 0.46;
	z-index: 0;
}

.hero-logo-shell {
	position: relative;
	width: min(40vw, 560px);
	margin-top: -14px;
	overflow: hidden;
	isolation: isolate;
	animation: heroLogoNoise 3.2s steps(2, end) infinite;
	z-index: 1;
}

.hero-logo {
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	z-index: 1;
	filter: contrast(1.08) saturate(1.05);
}

.hero-logo-shell::before,
.hero-logo-shell::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../assets/images/logoCL.png") center / 100% 100% no-repeat;
	opacity: 0;
	pointer-events: none;
	z-index: 2;
}

.hero-logo-shell::before {
	mix-blend-mode: screen;
	filter: drop-shadow(-2px 0 rgba(255, 55, 55, 0.75));
	animation: heroLogoSplitR 2.4s steps(2, end) infinite;
}

.hero-logo-shell::after {
	mix-blend-mode: screen;
	filter: drop-shadow(2px 0 rgba(75, 220, 255, 0.8));
	animation: heroLogoSplitB 2.1s steps(2, end) infinite;
}

@keyframes heroLogoNoise {
	0%,
	88%,
	100% {
		transform: translate(0, 0);
	}
	89% {
		transform: translate(-1px, 1px);
	}
	91% {
		transform: translate(2px, -1px);
	}
	93% {
		transform: translate(-2px, 0);
	}
	95% {
		transform: translate(1px, 1px);
	}
}

@keyframes heroLogoSplitR {
	0%,
	84%,
	100% {
		opacity: 0;
		transform: translate(0, 0);
	}
	86% {
		opacity: 0.45;
		transform: translate(-2px, -1px);
	}
	89% {
		opacity: 0.25;
		transform: translate(1px, 1px);
	}
	92% {
		opacity: 0.5;
		transform: translate(-1px, 0);
	}
}

@keyframes heroLogoSplitB {
	0%,
	80%,
	100% {
		opacity: 0;
		transform: translate(0, 0);
	}
	83% {
		opacity: 0.38;
		transform: translate(2px, 0);
	}
	87% {
		opacity: 0.2;
		transform: translate(-1px, -1px);
	}
	90% {
		opacity: 0.42;
		transform: translate(1px, 1px);
	}
}

@keyframes heroBackgroundGlitchFlash {
	0%,
	72%,
	100% {
		opacity: 0;
		transform: translateX(0);
	}
	74% {
		opacity: 0.5;
		transform: translateX(-14px);
	}
	77% {
		opacity: 0.18;
		transform: translateX(10px);
	}
	81% {
		opacity: 0.62;
		transform: translateX(-9px);
	}
}

@keyframes heroBackgroundGlitchShift {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(4px);
	}
}

/* Typography and footer */
.hero-prefix {
	display: block;
	width: fit-content;
	margin: 0 auto 0.35rem;
	transform: scaleX(1.3);
	transform-origin: center;
}

.hero-emphasis {
	display: block;
	margin-top: 0;
	font-size: clamp(2.2rem, 10vw, 6.2rem);
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 0.98;
	text-transform: uppercase;
}

.hero-flicker {
	display: inline-flex;
	align-items: baseline;
	gap: 0.2em;
}

.hero-flicker-word {
	display: inline-flex;
	gap: 0.02em;
}

.hero-flicker-amp {
	display: inline-block;
	margin: 0 0.03em;
	opacity: 0.9;
}

.flicker-char {
	display: inline-block;
	animation-name: bulbFlicker;
	animation-duration: var(--flicker-duration, 1.2s);
	animation-delay: var(--flicker-delay, 0s);
	animation-timing-function: linear;
	animation-iteration-count: 2;
	animation-fill-mode: forwards;
	will-change: opacity, filter, text-shadow;
}

@keyframes bulbFlicker {
	0%,
	17%,
	19%,
	52%,
	54%,
	70%,
	72%,
	100% {
		opacity: 1;
		filter: brightness(1);
		text-shadow: 0 0 0.12em rgba(255, 255, 255, 0.26), 0 0 0.45em rgba(255, 255, 255, 0.2);
	}
	18%,
	53%,
	71% {
		opacity: 0.22;
		filter: brightness(0.75);
		text-shadow: none;
	}
	37%,
	38% {
		opacity: 0.45;
		filter: brightness(0.8);
		text-shadow: none;
	}
}

#hero > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 900px) {
	.container {
		width: min(1100px, 94%);
	}

	.navbar-inner {
		padding: 0.75rem 0;
		padding-right: 2.2rem;
	}

	.studio-banner-inner {
		width: 88%;
	}

	main {
		padding: 1rem 0 2.2rem;
	}

	.cards-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.85rem;
	}

	section {
		padding: 1.25rem;
	}

	.feature-card .card-title {
		padding-left: 2.55rem;
	}

	.feature-card .card-icon {
		width: 2rem;
		height: 2rem;
	}

	.navbar.scrolled.menu-open .nav-links,
	.navbar.compact.menu-open .nav-links {
		min-width: min(78vw, 320px);
		right: 0;
	}

	.navbar.scrolled.menu-open .nav-links a,
	.navbar.compact.menu-open .nav-links a {
		padding: 0.55rem 0.7rem;
	}

	#hero {
		padding: 2rem 0;
	}

	#contact-us {
		padding: 1.5rem 0;
	}

	.navbar.compact.menu-open .nav-links {
		width: min(260px, 92vw);
	}

	.footer-inner {
		font-size: 0.82rem;
		line-height: 1.45;
	}
}

@media (max-width: 640px) {
	.studio-banner {
		padding-top: 0.65rem;
	}

	.studio-banner-inner {
		font-size: clamp(0.95rem, 5.8vw, 2rem);
	}

	main {
		padding: 1rem 0 2rem;
	}

	.cards-grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	section {
		padding: 1.1rem;
		border-radius: 12px;
		margin: 0.75rem 0;
	}

	.feature-card .card-title {
		padding-left: 2.2rem;
		font-size: 1.18rem;
	}

	.feature-card .card-icon {
		width: 1.8rem;
		height: 1.8rem;
	}

	.feature-card .card-icon svg {
		width: 1.15rem;
		height: 1.15rem;
	}

	#hero,
	#contact-us,
	#floating-cards {
		padding: 1.35rem 0;
	}

	.floating-track {
		animation-duration: 18s;
	}

	.hero-logo-shell {
		width: min(72vw, 360px);
	}

	.contact-form button {
		width: 100%;
		justify-self: stretch;
	}

	#hero > *,
	#contact-us > * {
		width: min(1100px, 94%);
	}

	.navbar.scrolled.menu-open .nav-links,
	.navbar.compact.menu-open .nav-links {
		left: 0;
		right: 0;
		min-width: 0;
		width: 100%;
		border-radius: 8px;
	}

	.navbar.scrolled.menu-open .nav-links a,
	.navbar.compact.menu-open .nav-links a {
		font-size: 1rem;
	}

	.footer-inner {
		text-align: center;
		font-size: 0.92rem;
		line-height: 1.45;
	}
}

@media (hover: none) {
	section:hover,
	.feature-card .card-title:hover .card-title-text {
		animation: none;
		box-shadow: none;
	}
}

h2 {
	margin: 0 0 0.8rem;
	transform-origin: center center;
}

h2:hover {
	animation: headingFocus 1.5s ease-in-out forwards;
}

@keyframes headingFocus {
	0% {
		filter: blur(0px);
	}
	50% {
		filter: blur(8px);
		color: #89a238;
	}
	100% {
		filter: blur(0px);
	}
}

p {
	margin: 0;
	color: var(--muted);
}

.footer {
	border-top: 1px solid #374151;
	background: var(--surface);
}

.footer-inner {
	padding: 1.2rem 0;
	color: var(--muted);
	text-align: center;
	font-size: 0.9rem;
}

.social-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-bottom: 0.8rem;
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.15rem;
	height: 2.15rem;
	border-radius: 999px;
	border: 1px solid #4b5563;
	background: rgba(31, 41, 55, 0.85);
	color: #e5e7eb;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-link svg {
	width: 1.15rem;
	height: 1.15rem;
	display: block;
	fill: currentColor;
}

.social-link .icon-instagram {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

.social-link .icon-youtube .yt-badge {
	fill: #ffffff;
}

.social-link .icon-youtube .yt-play {
	fill: #0f172a;
}

.social-link:hover {
	background: #cfe081;
	color: #111827;
	transform: translateY(-1px);
}

.social-link:focus-visible {
	outline: 2px solid #cfe081;
	outline-offset: 2px;
}

.footer-copy {
	margin: 0;
	color: var(--muted);
}

/* Responsive rules */
@media (max-width: 1024px) {
	.container {
		width: min(980px, 94%);
	}

	section {
		padding: 1.6rem;
	}

	.cards-grid {
		gap: 0.9rem;
	}

	.nav-links a {
		font-size: 0.88rem;
		padding: 0.28rem 0.52rem;
	}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	#hero::before,
	#hero::after {
		animation: none;
		opacity: 0;
	}

	.hero-logo-shell,
	.hero-logo-shell::before,
	.hero-logo-shell::after {
		animation: none;
	}

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

	section.nav-click-fade {
		animation: none;
	}
}