:root {
	--bg1: #0b0f14;
	--bg2: #0e1623;
	--bg3: #122035;
	--brand: #3aa0ff;
	--text: #e6edf3;
	--muted: #8ca0b6;
	--radius: 14px;
  }
  
  * { box-sizing: border-box; }
  html, body {
	height: 100%;
	margin: 0;
	font-family: system-ui, -apple-system, 'Inter', sans-serif;
	background: var(--bg1);
	color: var(--text);
	overflow: hidden;
  }
  body {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
  }
  
  /* Animated gradient background */
  .gradient-bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 20% 20%, var(--bg2), transparent 40%),
				radial-gradient(circle at 80% 80%, var(--brand), transparent 40%),
				radial-gradient(circle at 50% 50%, var(--bg3), transparent 60%);
	filter: blur(120px) brightness(0.8);
	animation: gradientMove 10s ease-in-out infinite alternate;
	z-index: 0;
  }
  @keyframes gradientMove {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-5%, 3%) scale(1.05); }
	100% { transform: translate(5%, -3%) scale(1); }
  }
  
  .hero {
	position: relative;
	z-index: 2;
	padding: 2rem;
	max-width: 600px;
  }
  
  .logo {
	width: 90px;
	height: 90px;
	margin-bottom: 1.5rem;
	border-radius: var(--radius);
	// background: rgba(255,255,255,0.05);
	padding: 10px;
	animation: fadeIn 1.2s ease both;
  }
  
  .title {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 600;
	margin-bottom: .5rem;
	animation: fadeInUp 1.4s ease both;
  }
  
  .subtitle {
	font-size: 1.1rem;
	color: var(--muted);
	margin-bottom: 2rem;
	animation: fadeInUp 1.6s ease both;
  }
  
  .links {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	animation: fadeInUp 1.8s ease both;
  }
  
  .links a {
	color: var(--text);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 2px solid transparent;
	transition: color .3s, border-color .3s;
  }
  .links a:hover, .links a:focus {
	color: var(--brand);
	border-color: var(--brand);
  }
  
  footer {
	margin-top: 2rem;
	font-size: 0.9rem;
	color: var(--muted);
	animation: fadeIn 2s ease both;
  }
  
  @keyframes fadeInUp {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
  }
  
  /* Accessibility */
  :focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 4px;
  }
  @media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
	.gradient-bg { display: none; }
  }