/* Base Reset */
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	color: #f2f2f4;
	background-color: #0a0a0d;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:root {
	--surface: #0a0a0d;
	--text: #f2f2f4;
	--muted: #c6c6cf;
	--accent: #ffffff;
	--glass: rgba(255,255,255,0.06);
	--glass-border: rgba(255,255,255,0.12);
	--vh: 1vh;
}

/* Layout */
.site { position: relative; height: calc(var(--vh, 1vh) * 100); overflow: hidden; }
/* Poster cover */
.site__poster {
	position: fixed; inset: 0; z-index: -1;
	background: url('./assets/images/poster.webp') center/cover no-repeat;
	animation: posterFade 1s ease forwards;
	animation-delay: 3.5s;
}
@keyframes posterFade { to { opacity: 0; visibility: hidden; } }

.site__video {
	position: fixed;
	top: 50%; left: 50%;
	min-width: 100vw; min-height: calc(var(--vh, 1vh) * 100);
	width: auto; height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
	filter: saturate(1.05) contrast(1.02) brightness(0.9);
	z-index: -3;
}
.site__overlay {
	position: fixed; inset: 0;
	background: linear-gradient(180deg, rgba(6,6,10,0.35) 0%, rgba(6,6,10,0.6) 100%);
	z-index: -2;
}
.site__vignette {
	position: fixed; inset: -10vh -10vw;
	pointer-events: none;
	background: radial-gradient(1200px 800px at 50% 50%, rgba(0,0,0,0.0), rgba(0,0,0,0.42));
	z-index: -1;
}
.site__content {
	position: relative; z-index: 1;
	height: calc(var(--vh, 1vh) * 100);
	display: grid; place-items: center;
	padding: 0 4vw;
}

/* Subtle film grain */
.site::after {
	content: "";
	position: fixed; inset: -50% -50%; pointer-events: none; z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0.03 0.05 0.07 0.09'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.12; mix-blend-mode: overlay;
	animation: grain 12s steps(12) infinite;
}
@keyframes grain {
	0% { transform: translate(0,0) }
	10% { transform: translate(-1%, 1%) }
	20% { transform: translate(-2%, -1%) }
	30% { transform: translate(1%, 2%) }
	40% { transform: translate(1%, -2%) }
	50% { transform: translate(-1%, 1%) }
	60% { transform: translate(-2%, 1%) }
	70% { transform: translate(2%, 1%) }
	80% { transform: translate(-1%, -1%) }
	90% { transform: translate(1%, 2%) }
	100% { transform: translate(0,0) }
}

/* Brand */
.brand { text-align: center; margin-bottom: 0; }
.brand__monogram { display: none; }
.brand__name {
	font-weight: 800;
	font-size: clamp(2.4rem, 9vw, 8rem);
	margin: 0.2rem 0 0.4rem;
	letter-spacing: 0;
	line-height: 0.98;
	max-width: 92vw;
	margin-inline: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.brand__tag { margin: 0.15rem 0; opacity: 0.96; font-weight: 700; font-size: clamp(1.1rem, 2.8vw, 1.6rem); color: var(--text); }
.brand__meta { margin: 0.2rem 0 0; color: var(--muted); font-size: 1rem; font-weight: 500; }

/* Floating chat (WhatsApp) */
.chat-float {
	position: fixed;
	bottom: calc(env(safe-area-inset-bottom, 0) + 18px);
	right: calc(env(safe-area-inset-right, 0) + 18px);
	width: 60px; height: 60px;
	border-radius: 999px;
	background: #25D366;
	color: #ffffff;
	display: grid; place-items: center;
	box-shadow: 0 12px 36px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.16);
	text-decoration: none;
	z-index: 10;
	will-change: transform;
	backface-visibility: hidden;
	transition: transform 150ms ease, box-shadow 200ms ease;
}
.chat-float:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.16); }
.chat-float:active { transform: translateY(0); }
.chat-float img { width: 28px; height: 28px; display: block; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }

/* CTA */
.cta { text-align: center; margin-top: 1.2rem; }
.cta__title { margin: 0 0 1.1rem; font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: var(--muted); font-weight: 500; }
.cta__actions { display: inline-flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; align-items: center; }

.btn {
	appearance: none; border: 0; outline: 0; cursor: pointer;
	padding: 0.8rem 1.1rem; border-radius: 999px;
	font-weight: 700; letter-spacing: 0.02em; font-size: 0.95rem;
	text-decoration: none; color: #0a0a0d;
	background: #ffffff;
	box-shadow: 0 10px 30px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.08);
	transition: transform 150ms ease, box-shadow 220ms ease, background-color 200ms ease, opacity 200ms ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 38px rgba(0,0,0,0.32); }
.btn:active { transform: translateY(0); box-shadow: 0 8px 24px rgba(0,0,0,0.26); }

.btn--primary { background: var(--accent); color: #0b0b10; }
.btn--link { background: transparent; color: var(--text); box-shadow: none; border: 1px solid rgba(255,255,255,0.18); }
.btn--link:hover { background: rgba(255,255,255,0.06); }

/* Footer (optional future use) */
.footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 1rem; text-align: center; opacity: 0.8; font-size: 0.9rem; }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	.site__video { animation: none; filter: brightness(0.95) contrast(1.02); }
	.site::after { animation: none; opacity: 0.08; }
	.btn { transition: none; }
}

/* Small screens */
@media (max-width: 480px) {
	.brand__monogram svg { width: 44px; height: 44px; }
	.cta__actions { gap: 0.6rem; }
	.btn { padding: 0.74rem 1rem; font-weight: 700; }
	.brand__name { font-size: 8.8vw; }
	.chat-float { width: 56px; height: 56px; }
	.chat-float img { width: 26px; height: 26px; }
}