/* Base reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	color: #f6f6f6;
	background: #0b0c10;
}

/* Fullscreen background video */
.bg-video {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
	filter: brightness(0.88) contrast(1.06) saturate(1.04) sepia(0.08) hue-rotate(-8deg);
	z-index: -2;
}

/* Overlay for readability and mood */
.overlay {
	position: relative;
	min-height: 100dvh;
	background:
		linear-gradient(180deg, rgba(10,10,12,0.45) 0%, rgba(10,10,12,0.55) 40%, rgba(10,10,12,0.7) 100%),
		rgba(10,10,12,0.4);
	display: grid;
	grid-template-rows: 1fr auto;
}

/* Subtle film grain + vignette, above video, below content */
.fx {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: -1;
}
.fx-grain {
	background-image:
		radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25) 100%),
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="2" stitchTiles="stitch"/></filter><rect width="160" height="160" filter="url(%23n)" opacity="0.055"/></svg>');
	background-size: cover, 160px 160px;
	background-repeat: no-repeat, repeat;
	animation: grainShift 1.2s steps(2) infinite;
}
@keyframes grainShift {
	0% { transform: translate3d(0,0,0); }
	100% { transform: translate3d(-1%, 1%, 0); }
}

.content {
	max-width: 920px;
	margin: 0 auto;
	padding: 18vh 24px 12vh;
	text-align: center;
}

.name {
	font-size: clamp(32px, 6vw, 72px);
	letter-spacing: 0.02em;
	font-weight: 700;
	margin: 0 0 12px 0;
}

.tagline {
	font-size: clamp(14px, 2.4vw, 20px);
	opacity: 0.92;
	margin: 0 0 28px 0;
}

.contact { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
	display: inline-block;
	padding: 10px 16px;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 999px;
	color: #f6f6f6;
	text-decoration: none;
	backdrop-filter: blur(2px);
	background: rgba(20,20,24,0.28);
	transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
}
.btn:hover { transform: translateY(-1px); background: rgba(20,20,24,0.38); border-color: rgba(255,255,255,0.9); }

.footer {
	opacity: 0.8;
	padding: 18px 24px 28px;
	text-align: center;
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.bg-video { display: none; }
	.overlay { background: linear-gradient(180deg, rgba(10,10,12,0.75), rgba(10,10,12,0.9)), #0b0c10; }
}