*{
	box-sizing:border-box;
}

html{
	min-height:100%;
	background:#050607;
}

body{
	margin:0;
	min-height:100vh;
	color:#e8e5dc;
	font-family:'Inter', system-ui, sans-serif;
	background:
		radial-gradient(circle at 12% 42%, rgba(184,92,20,.18), transparent 15rem),
		radial-gradient(circle at 88% 46%, rgba(184,92,20,.16), transparent 16rem),
		radial-gradient(circle at center 34%, rgba(255,255,255,.08), transparent 32rem),
		linear-gradient(180deg, #070a0c 0%, #0a0c0e 48%, #040506 100%);
	overflow-x:hidden;
}

body::before{
	content:"";
	position:fixed;
	inset:0;
	background:
		linear-gradient(115deg, transparent 0%, rgba(255,255,255,.035) 50%, transparent 100%),
		repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 110px),
		repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 110px);
	opacity:.28;
	pointer-events:none;
}

body::after{
	content:"";
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	height:34vh;
	background:
		linear-gradient(145deg, transparent 0 36%, rgba(0,0,0,.9) 36% 100%),
		linear-gradient(215deg, transparent 0 36%, rgba(0,0,0,.9) 36% 100%);
	clip-path:polygon(0 35%, 13% 0, 25% 45%, 38% 18%, 50% 58%, 64% 20%, 77% 45%, 88% 5%, 100% 38%, 100% 100%, 0 100%);
	opacity:.9;
	pointer-events:none;
}

.page{
	position:relative;
	z-index:1;
	min-height:100vh;
	display:flex;
	justify-content:center;
	padding:4.5rem 1.5rem 3rem;
}

.hero{
	position:relative;
	width:min(100%, 760px);
	text-align:center;
	padding:2rem 0 0;
}

.sigil{
	position:absolute;
	left:50%;
	top:0;
	width:min(92vw, 740px);
	height:min(92vw, 740px);
	transform:translateX(-50%);
	border:1px solid rgba(183,132,62,.13);
	border-radius:50%;
	opacity:.7;
	pointer-events:none;
}

.sigil::before,
.sigil::after{
	content:"";
	position:absolute;
	inset:7%;
	border:1px solid rgba(255,255,255,.08);
	border-radius:50%;
}

.sigil::after{
	inset:14%;
	border-color:rgba(183,132,62,.1);
}

.logo{
	position:relative;
	width:180px;
	height:auto;
	margin:0 auto 2rem;
	display:block;
	filter:
		drop-shadow(0 0 22px rgba(255,255,255,.18))
		drop-shadow(0 12px 28px rgba(0,0,0,.65));
}

h1,
h2{
	margin:0;
	font-family:'Barlow Condensed', sans-serif;
	text-transform:uppercase;
}

h1{
	font-size:clamp(3.2rem, 8vw, 5.7rem);
	font-weight:500;
	line-height:.9;
	letter-spacing:.24em;
	color:#f2f0e9;
	text-shadow:0 0 18px rgba(255,255,255,.16), 0 6px 30px rgba(0,0,0,.8);
}

.ornament,
.footer-line{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:1rem;
	margin:1.8rem auto 1.4rem;
}

.ornament span,
.footer-line span{
	width:13rem;
	height:1px;
	background:linear-gradient(90deg, transparent, rgba(207,145,57,.95), transparent);
}

.ornament i,
.footer-line i{
	width:.75rem;
	height:.75rem;
	border:2px solid #c98c37;
	transform:rotate(45deg);
}

.ornament.small{
	margin:1.6rem auto 2rem;
}

.ornament.small span{
	width:16rem;
}

.slogan{
	margin:0 0 2.8rem;
	color:#c98c37;
	font-family:'Barlow Condensed', sans-serif;
	font-size:1.45rem;
	font-weight:500;
	letter-spacing:.42em;
	text-transform:uppercase;
}

.thin-line{
	width:24rem;
	max-width:80%;
	height:1px;
	margin:0 auto 3.4rem;
	background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}

h2{
	font-size:clamp(5rem, 13vw, 9rem);
	font-weight:600;
	line-height:.82;
	letter-spacing:.18em;
	color:#f0eee8;
	text-shadow:
		0 1px 0 #fff,
		0 0 28px rgba(255,255,255,.16),
		0 12px 36px rgba(0,0,0,.75);
}

.intro{
	margin:0 auto 2.8rem;
	color:#d3cec5;
	font-size:1.35rem;
	font-weight:300;
	letter-spacing:.08em;
	line-height:1.55;
	text-shadow:0 3px 12px rgba(0,0,0,.8);
}

.signup{
	display:flex;
	align-items:center;
	gap:1rem;
	width:min(100%, 600px);
	margin:0 auto;
	padding:.9rem;
	border:1px solid rgba(201,140,55,.34);
	border-radius:.35rem;
	background:rgba(5,7,9,.78);
	box-shadow:
		0 24px 70px rgba(0,0,0,.65),
		inset 0 1px 0 rgba(255,255,255,.06);
	backdrop-filter:blur(10px);
}

.mail-icon{
	width:3.3rem;
	height:3.3rem;
	display:grid;
	place-items:center;
	color:#d69a43;
	font-size:1.45rem;
}

.signup input{
	flex:1;
	min-width:0;
	height:3.8rem;
	border:0;
	outline:0;
	background:transparent;
	color:#f1eee8;
	font-size:1.05rem;
	letter-spacing:.03em;
}

.signup input::placeholder{
	color:#8a8379;
}

.signup button{
	height:3.8rem;
	padding:0 2.7rem;
	border:1px solid rgba(255,221,156,.25);
	border-radius:.25rem;
	color:#070707;
	background:
		linear-gradient(180deg, rgba(255,214,132,.4), transparent 48%),
		linear-gradient(180deg, #bd8a43, #9a672d);
	font-family:'Barlow Condensed', sans-serif;
	font-size:1.25rem;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
	cursor:pointer;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.28),
		0 8px 24px rgba(0,0,0,.42);
}

.signup button:hover{
	filter:brightness(1.08);
}

.message{
	margin:1.2rem 0 0;
	color:#d69a43;
	font-size:.95rem;
}

.privacy{
	margin:1.8rem 0 6rem;
	color:#888278;
	font-size:1rem;
}

footer{
	color:#777169;
	font-size:.95rem;
}

.footer-line{
	margin-bottom:1.8rem;
}

.footer-line span{
	width:12rem;
	background:linear-gradient(90deg, transparent, rgba(201,140,55,.45), transparent);
}

.footer-line i{
	width:.6rem;
	height:.6rem;
	border-color:rgba(201,140,55,.7);
}

.socials{
	display:flex;
	justify-content:center;
	gap:1.1rem;
	margin-bottom:2.6rem;
}

.socials a{
	width:3.4rem;
	height:3.4rem;
	display:grid;
	place-items:center;
	border:1px solid rgba(201,140,55,.35);
	clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
	color:#c98c37;
	font-family:'Barlow Condensed', sans-serif;
	font-size:.9rem;
	text-decoration:none;
	text-transform:uppercase;
	background:rgba(0,0,0,.25);
}

.socials a:hover{
	background:rgba(201,140,55,.14);
	color:#f0c17a;
}

@media (max-width:680px){
	.page{
		padding-top:3rem;
	}

	.logo{
		width:135px;
	}

	h1{
		letter-spacing:.16em;
	}

	h2{
		letter-spacing:.1em;
	}

	.slogan{
		font-size:1.1rem;
		letter-spacing:.27em;
	}

	.signup{
		flex-wrap:wrap;
	}

	.mail-icon{
		display:none;
	}

	.signup input{
		flex-basis:100%;
		padding:0 1rem;
		background:rgba(0,0,0,.28);
		border-radius:.25rem;
	}

	.signup button{
		width:100%;
	}

	.ornament span,
	.ornament.small span{
		width:8rem;
	}

	.intro{
		font-size:1.1rem;
	}

	.privacy{
		margin-bottom:4rem;
	}
}