/*Font Imports*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Inter:wght@300;400;500&display=swap');

/*Variables*/
:root{
	--deep:#23434a;
	--primary:#315b63;
	--light:#5e8087;
	--mist:#7a979a;
	--accent:#d7a85e;
	--text:#f6f4ef;
	
	--space-xs:.5rem;
	--space-sm:1rem;
	--space-md:2rem;
	--space-lg:4rem;
}

/*Global Reset*/
html,body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

body{
	overflow:hidden;
}

body{
	margin:0;
	overflow:hidden;
	font-family:Inter,sans-serif;
}

/* Typography */
h1{
	font-family:'Nunito', sans-serif;
	font-size:clamp(6rem,12vw,10rem);
	font-weight:800;
	letter-spacing:-.04em;
	line-height:.92;
	color:var(--text);
	margin:0;
	opacity:0;
	transform:translateY(20px);
	animation:titleReveal 1.6s ease forwards;
	white-space:nowrap;
	text-shadow:0 2px 15px rgba(0,0,0,.15);
}

h2{
	font-family:Inter,sans-serif;
	font-size:clamp(1rem,2vw,1.45rem);
	font-weight:500;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--text);
	margin:0 0 var(--space-lg) 0;
	opacity:0;
	animation:titleReveal 1.5s ease .25s forwards;
	white-space:nowrap;
}

h3{
	font-family:'Nunito',sans-serif;
	font-size:clamp(2rem,4vw,3rem);
	font-weight:700;
	line-height:1.1;
	margin:0;
}

p{
	font-family:Inter,sans-serif;
	font-size:clamp(.95rem,1.2vw,1.1rem);
	line-height:1.8;
	font-weight:300;
	max-width:580px;
	margin:0 auto var(--space-md);
	color:var(--text);
	opacity:0;
	animation:titleReveal 1.5s ease .55s forwards;
}

.small-text{
	font-size:.95rem;
	opacity:.7;
	letter-spacing:.05em;
}


/*Hero Section*/
.hero{
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:0;
	margin:0;
	position:relative;
	overflow:hidden;
	background:
		radial-gradient(
			circle at top left, var(--light), transparent 35%
		),
		radial-gradient(
			circle at bottom right, var(--mist), transparent 30%
		),
		linear-gradient(
			135deg, var(--deep),var(--primary),var(--deep)
		);
	background-size:200% 200%; 
	animation:gradientMove 18s ease infinite;
}

.hero:before{
	content:"";
	position:absolute;
	width:700px;
	height:700px;
	background:rgba(255,255,255,.04);
	filter:blur(100px);
	border-radius:50%;
	top:-200px;
	left:-150px;
}

.hero:after{
	content:"";
	position:absolute;
	width:600px;
	height:600px;
	bottom:-250px;
	right:-150px;
	border-radius:50%;
	background:rgba(122,151,154,.12);
	filter:blur(120px);
	animation:floatGlow 22s ease-in-out infinite alternate;
}

hero::selection{
	background:rgba(255,255,255,.15)
}

.content{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:min(90%,880px);
	margin:auto;
	padding:var(--space-md);
	box-sizing:border-box;
	gap:0;
}

.footer-note{
	position:absolute;
	bottom:var(--space-lg);
	left:50%;
	transform:translateX(-50%);
	font-family:Inter,sans-serif;
	font-size:.8rem;
	letter-spacing:.12em;
	color:var(--text);
	opacity:.6;
	white-space:nowrap;
}

/*Buttons*/
.button{
	display:inline-block;
	padding:var(--space-sm) var(--space-md);
	background:var(--accent);
	color:var(--deep);
	border-radius:999px;
	text-decoration:none;
	font-weight:700;
	transition:
		transform .4s ease,
		box-shadow .4s ease,
		background .4s ease;
	opacity:0;
	animation:titleReveal 1.5s ease .9s forwards;
	cursor:pointer;
}

.button:hover{
	transform:
		translateY(-4px)
		scale(1.03);
	background:#e3b874;
	box-shadow: 0 0 30px rgba(215,168,94,.35);
}

/*Animations*/
@keyframes gradientMove{
	0%{
		background-position:0% 50%;
	}
	50%{
		background-position:100% 50%;
	}
	100%{
		background-position:0% 50%;
	}
}

@keyframes floatGlow{
	from{
		transform:translate(0px,0px);
	}
	to{
		transform:translate(-40px,-20px);
	}
}

@keyframes titleReveal{
	to{
		opacity:1;
		transform:translateY(0);
	}
}

/*Mobile */
@media (max-width:768px){

h1{
	font-size:4rem;
	line-height:1;
}

h2{
white-space:normal;
font-size:.85rem;
letter-spacing:.08em;
}

p{
font-size:1rem;
padding:0 1rem;
}
	
.content{
	gap:var(--space-sm);
padding:var(--space-med);
}
	
}