:root{
	--bg:#0f0f10;
	--panel:#0b0b0c;
	--accent:#ffd400;
	--muted:#c7c7c7;
	--radius:14px;
}

html,body{height:100%;}
body{
	margin:0; 
	font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background:var(--bg); 
	color:var(--muted); 
	display:flex; 
	align-items:center; 
	justify-content:center; 
	flex-direction:column;
}
.caution{
	width:100%;
	height:32px;
	background: repeating-linear-gradient(45deg, var(--accent) 0 14px, #000 14px 28px);
	box-shadow:0 6px 18px rgba(0,0,0,0.6);
	flex-shrink:0;
	margin-top: 80px;
	margin-bottom: 80px;
}
.container{
	max-width:720px;
	width:92%; 
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));
	border-radius:var(--radius); 
	padding:36px; 
	margin:24px 0; 
	border:2px solid rgba(255,255,255,0.03);
	text-align:center;
}

.hardhat{
	width:84px; 
	height:84px; 
	border-radius:16px; 
	display:grid; 
	place-items:center; 
	background:linear-gradient(180deg,#222,#111);
	box-shadow:0 8px 30px rgba(0,0,0,0.6), inset 0 2px 6px rgba(255,255,255,0.02);
	border:6px solid var(--accent);
	margin:0 auto 18px auto;
}

h1{ 
	margin:0; 
	font-size:32px; 
	color:white; 
	letter-spacing:0.6px }
p.lead{ 
	margin:12px 0 0 0; 
	color:var(--muted); 
	font-size:16px }
a.link{
	display:inline-block; 
	margin-top:22px; 
	padding:12px 18px; 
	border-radius:10px; 
	background:var(--accent); 
	color:#000;
	font-weight:600; 
	text-decoration:none; 
	box-shadow:0 8px 20px rgba(0,0,0,0.35);
}
.hero{
	padding:22px; 
	border-radius:10px; 
	background-image: repeating-linear-gradient(135deg, rgba(255,212,0,0.04) 0 12px, rgba(0,0,0,0.0) 12px 24px );
}