:root{
	--bg-0: #0d0f14;
	--bg-1: #11151c; 
	--bg-2: #171c24; 
	--text: #e8edf2;
	--muted: #a8b3c7;
	--neon-blue: #1F51FF;
	--neon-cyan: #0FF0FC;
	--neon-pink: #ff2bd1;
	--glass: rgba(17, 21, 28, 0.6);
	--radius-xl: 24px;
	--shadow-neon: 0 0 0.5rem rgba(31,81,255,.6), 0 0 1.25rem rgba(15,240,252,.35);
	--shadow-soft: 0 8px 24px rgba(0,0,0,.35);
	--maxw: 1100px;
	}

	html, body { height: 100%; }
	body{
	margin:0; color:var(--text);
	font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	background: radial-gradient(1200px 1200px at 10% -10%, rgba(31,81,255,.12), transparent 60%),
		radial-gradient(1400px 900px at 110% 10%, rgba(15,240,252,.10), transparent 60%),
		linear-gradient(180deg, #0b0d11 0%, var(--bg-0) 30%, #0b0d11 100%);
	background-attachment: fixed;
	}

	.orbs{ position: fixed; inset:0; pointer-events:none; z-index:-1; filter: blur(60px); opacity:.55; }
	.orb{ position:absolute; width:280px; height:280px; border-radius:50%; mix-blend-mode:screen; }
	.orb.b{ background: radial-gradient(circle at 30% 30%, var(--neon-blue), transparent 60%); left:8%; top:12%; animation: float 14s ease-in-out infinite; }
	.orb.c{ background: radial-gradient(circle at 60% 40%, var(--neon-cyan), transparent 60%); right:12%; top:22%; animation: float 18s ease-in-out infinite reverse; }
	.orb.d{ background: radial-gradient(circle at 40% 50%, var(--neon-pink), transparent 60%); left:20%; bottom:8%; animation: float 22s ease-in-out infinite; }
	@keyframes float { 0%{transform:translateY(0) translateX(0)} 50%{transform:translateY(-24px) translateX(12px)} 100%{transform:translateY(0) translateX(0)} }

header{
	position: sticky; top:0; z-index:50;
	backdrop-filter: saturate(140%) blur(10px);
	background: linear-gradient(180deg, rgba(13,15,20,0.85), rgba(13,15,20,0.55));
	border-bottom: 1px solid rgba(143, 176, 255, .12);
	}

    .nav{ max-width: var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; }
    .brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.4px; }
   
.logo{
	width:40px;
	height:40px;
	border-radius:50%;
	background: conic-gradient(from 210deg, var(--neon-blue), var(--neon-cyan), var(--neon-pink), var(--neon-blue));
	box-shadow: 0 0 12px rgba(0,255,255,0.7);
	position: relative;
	display: inline-block;
	}

.logo-overlay{
	width:28px;
	height:28px;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	border-radius:50%;
	object-fit:contain;
	}

	}
	.brand span{ font-family:"Space Grotesk", system-ui; font-weight:700; font-size:1.05rem; }

	.links{ display:flex; flex-wrap:wrap; gap:10px; }
	.links a{
	position: relative; text-decoration:none; color:var(--text); padding:10px 14px; border-radius:999px;
	background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
	border: 1px solid rgba(143,176,255,.14);
	font-weight:600; font-size:.96rem;
	}



.hero{
	display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center;
	background: linear-gradient(180deg, rgba(31,81,255,.08), rgba(15,240,252,.06));
	border:1px solid rgba(143,176,255,.18);
	border-radius: var(--radius-xl); padding:28px; box-shadow: var(--shadow-soft);
	}
  
	@media (max-width: 900px){ .hero{ grid-template-columns:1fr; } }

.hero h1{
	margin:0 0 12px; font-size: clamp(2rem, 5vw, 3.1rem); line-height:1.04; font-family:"Space Grotesk";
	background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan));
	webkit-background-clip: text; background-clip: text; color: transparent;
	text-shadow: 0 0 20px rgba(31,81,255,.35);
	}
    
	.hero p{ color: var(--muted); font-size: 1.05rem; }

.glow-card{
	position:relative; overflow:hidden; border-radius: 20px; padding:18px; background: var(--glass);
	border:1px solid rgba(143,176,255,.18); box-shadow: var(--shadow-soft);
	}
	.glow-card::before{ content:""; position:absolute; inset:-1px; border-radius: inherit;
	background: conic-gradient(from 220deg, rgba(31,81,255,.18), rgba(15,240,252,.14), rgba(255,43,209,.12), rgba(31,81,255,.18));
	filter: blur(12px); opacity:.8; z-index:-1; }

	.page{ display:none; animation: fade .45s ease both; }
	.page:target{ display:block; }
	.page#home{ display:block; }
	@keyframes fade{ from{opacity:0; transform: translateY(8px)} to{opacity:1; transform:none} }

	.section-title{ font-family:"Space Grotesk"; font-weight:700; font-size:1.8rem; margin: 14px 0 8px; }
	.lede{ color: var(--muted); margin:0 0 16px; }

	.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; }
	.col-6{ grid-column: span 6; }
	.col-4{ grid-column: span 4; }
	.col-12{ grid-column: span 12; }
	@media (max-width: 900px){ .col-6, .col-4 { grid-column: span 12; } }

.card{
	background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
	border:1px solid rgba(143,176,255,.14); border-radius:16px; padding:18px; position:relative; overflow:hidden;
	}
	.card h3{ margin:6px 0 6px; font-size:1.15rem; }
	.tag{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:.8rem; font-weight:700;
	background: linear-gradient(90deg, rgba(31,81,255,.18), rgba(15,240,252,.18)); color: #d8f9ff; border:1px solid rgba(143,176,255,.22);
	text-transform: uppercase; letter-spacing:.8px; }

	.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
	.btn{
	display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#001018; font-weight:800;
	background: linear-gradient(90deg, var(--neon-cyan));
	padding:12px 16px; border-radius:14px;
	box-shadow: var(--shadow-neon);
	}
	
	.btn.transparent{ color: var(--text); background: transparent; border:1px solid rgba(143,176,255,.3); box-shadow:none; }

	.footer{ margin-top:38px; color:var(--muted); font-size:.92rem; opacity:.9; text-align:center; }

	.sep{ height:1px; background: linear-gradient(90deg, transparent, rgba(143,176,255,.35), transparent); margin:18px 0; }

	.mt-8{ margin-top: 8px; }
	.mt-16{ margin-top: 16px; }
	.mt-24{ margin-top: 24px; }
	.mb-0{ margin-bottom: 0; }
	.dim{ color: var(--muted); }

footer {
    background: var(--glass); 
    backdrop-filter: blur(10px); 
    color: var(--text);
    padding: 30px;
    text-align: center;
    font-size: 14px;
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-xl);
}
footer hr {
    margin: 30px 0;
    border: 1px solid white;
	}