@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");

:root {
	--bg: #0a0a0a;
	--white-40: rgb(255 255 255 / 0.4);
	--white-50: rgb(255 255 255 / 0.5);
	--green: #4ade80;
	--green-border: rgb(34 197 94 / 0.6);
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(2rem, 5vw, 3rem);
	padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3rem);
	background: var(--bg);
	color: #fff;
	font-family: "Space Grotesk", sans-serif;
	line-height: 1.5;
	text-align: center;
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(2rem, 5vw, 2.5rem);
	max-width: 48rem;
}

header div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.25rem);
}

.logo {
	width: clamp(6rem, 18.5vw, 8.67rem);
	height: auto;
}

h1 {
	margin: 0;
	font-size: clamp(2rem, 7vw, 4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

header p {
	margin: 0;
	max-width: 34rem;
	color: var(--white-50);
	font-size: clamp(0.95rem, 2.5vw, 1.125rem);
	text-wrap: pretty;
}

.reel {
	position: relative;
	width: min(100%, 64rem);
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.1);
	overflow: hidden;
	background: #000;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.reel .thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s;
}

.reel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.25);
	transition: background-color 0.3s;
}

.reel:hover .thumb {
	transform: scale(1.05);
}

.reel:hover::before {
	background: rgb(0 0 0 / 0.35);
}

.play {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(3.5rem, 8vw, 4.5rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.9);
	transition: scale 0.3s;
}

.reel:hover .play {
	scale: 1.1;
}

.play svg {
	width: 38%;
	height: 38%;
	translate: 8% 0;
	color: var(--bg);
}

.reel iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	border: 1px solid var(--green-border);
	color: var(--green);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		background-color 0.2s,
		border-color 0.2s;
}

.whatsapp:hover {
	border-color: var(--green);
	background: rgb(34 197 94 / 0.1);
}

.whatsapp svg {
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
}