:root{
	--bg:#0b1020;
	--bg-alt:#0e1530;
	--text:#e8f0ff;
	--muted:#a9b4d0;
	--primary:#6ef3ff;
	--primary-2:#8a7dff;
	--accent:#ff7ad1;
	--card:#121935;
	--border:#263059;
	--glow:0 0 24px rgba(110,243,255,.35),0 0 8px rgba(138,125,255,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	color:var(--text);
	background: radial-gradient(1200px 600px at 20% -10%, rgba(110,243,255,.08), transparent 60%),
	            radial-gradient(900px 500px at 110% 10%, rgba(138,125,255,.08), transparent 60%),
	            var(--bg);
	overflow-x:hidden;
}

.container{
	width:100%;
	max-width:1120px;
	margin:0 auto;
	padding:0 20px;
}

.site-header{
	position:sticky;
	top:0;
	z-index:10;
	background:linear-gradient(to bottom, rgba(11,16,32,.9), rgba(11,16,32,.7) 60%, transparent);
	backdrop-filter:saturate(120%) blur(8px);
	border-bottom:1px solid rgba(38,48,89,.5);
	transition:transform .28s ease;
	will-change:transform;
}
.site-header .container{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:64px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-name{
	font-family:"Press Start 2P","Outfit",monospace;
	font-size:18px;
	color:var(--text);
	text-decoration:none;
	text-shadow:0 0 10px rgba(138,125,255,.4);
}
.logo-spark{
	width:22px;height:22px;border-radius:4px;
	background: conic-gradient(from 0deg, var(--primary), var(--primary-2), var(--accent), var(--primary));
	box-shadow:var(--glow);
}
.nav{display:flex;gap:18px;align-items:center}
.nav a{
	color:var(--muted);
	text-decoration:none;
	font-weight:500;
}
.nav a:hover{color:var(--text)}

.btn{
	display:inline-flex;align-items:center;justify-content:center;
	border:1px solid var(--border);
	color:var(--text);
	padding:10px 14px;border-radius:10px;text-decoration:none;
	background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.btn:hover{border-color:#3b4785}
.btn-primary{
	background:
		radial-gradient(100% 100% at 0% 0%, rgba(110,243,255,.25), transparent 60%),
		radial-gradient(100% 100% at 100% 100%, rgba(138,125,255,.25), transparent 60%),
		linear-gradient(180deg, rgba(110,243,255,.18), rgba(138,125,255,.18));
	border-color:#4b66d0;
	box-shadow:var(--glow);
}
.btn-lg{padding:14px 18px;font-size:16px}
.btn-ghost{background:transparent}

.hero{
	position:relative;
	padding:80px 0 40px;
}
.crt-overlay{
	pointer-events:none;
	position:absolute;inset:0;
	background: repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px);
	mix-blend-mode:soft-light;opacity:.35;
}
.hero-grid{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:36px;
	align-items:center;
}
.title{
	font-family:"Press Start 2P","Outfit",monospace;
	font-size:40px;line-height:1.2;margin:0 0 16px;
	letter-spacing:1px;
	background:linear-gradient(90deg, #fff, #c8eaff);
	-webkit-background-clip:text;background-clip:text;color:transparent;
	text-shadow:0 0 18px rgba(110,243,255,.35);
}
.glitch{
	position:relative;
}
.glitch::before,.glitch::after{
	content:attr(data-text);
	position:absolute;left:0;top:0;
	color:rgba(138,125,255,.8);
	clip-path:inset(0 0 0 0);
	animation:glitch 2.2s infinite ease-in-out alternate;
}
.glitch::after{
	color:rgba(110,243,255,.9);
	animation-duration:2.8s;
	mix-blend-mode:screen;
}
@keyframes glitch{
	0%{transform:translate(0,0)}
	10%{transform:translate(-2px,1px)}
	20%{transform:translate(2px,-1px)}
	30%{transform:translate(-1px,2px)}
	40%{transform:translate(1px,-2px)}
	50%{transform:translate(0,1px)}
	60%{transform:translate(1px,0)}
	70%{transform:translate(-1px,-1px)}
	100%{transform:translate(0,0)}
}
.subtitle{
	margin:0 0 20px;color:var(--muted);font-size:18px;max-width:48ch
}
.hero-cta{display:flex;gap:12px;margin:20px 0 14px}
.pill-list{display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:0;list-style:none}
.pill-list li{
	border:1px dashed #33407a;border-radius:999px;padding:8px 12px;color:#c6d2ff;background:rgba(255,255,255,.03)
}
.hero-art{
	margin:0;display:block;overflow:hidden;border-radius:16px;border:1px solid var(--border);
	background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.hero-art img{display:block;width:100%;height:auto;transform:scale(.85);transform-origin:center;transition:transform .3s ease}
.hero-art:hover img{transform:scale(.92) rotate(1deg)}
.floaty{animation:float 6s ease-in-out infinite}
@keyframes float{
	0%,100%{transform:translateY(0)}
	50%{transform:translateY(-8px)}
}

.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg, rgba(18,25,53,.5), rgba(18,25,53,.2))}
.section-title{
	font-family:"Press Start 2P","Outfit",monospace;
	font-size:22px;letter-spacing:.5px;margin:0 0 28px;
	text-shadow:0 0 14px rgba(110,243,255,.25);
}
.features-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px;
}
.card{
	border:1px solid var(--border);
	background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
	box-shadow:0 10px 30px rgba(0,0,0,.2);
	border-radius:16px;
	padding:16px;
}
.feature h3{margin:8px 0 6px}
.feature p{margin:0;color:var(--muted)}
.pop{transition:transform .2s ease, box-shadow .2s ease}
.pop:hover{transform:translateY(-4px);box-shadow:var(--glow)}

.pix-icon{
	width:40px;height:40px;border-radius:8px;margin:4px 0 8px;
	image-rendering:pixelated;
	border:1px solid #40519c;
	background:
		conic-gradient(from 0deg, rgba(110,243,255,.35), rgba(138,125,255,.35), rgba(255,122,209,.35), rgba(110,243,255,.35)),
		linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
	box-shadow:inset 0 0 0 2px rgba(12,17,40,.6), var(--glow);
}
.pix-icon-blocks{mask:radial-gradient(circle at 25% 30%,#000 16px,transparent 17px), radial-gradient(circle at 65% 60%,#000 16px,transparent 17px)}
.pix-icon-heart{mask:radial-gradient(circle at 35% 35%,#000 12px,transparent 13px), radial-gradient(circle at 65% 35%,#000 12px,transparent 13px), polygon(50% 55%, 70% 35%, 88% 50%, 50% 92%, 12% 50%, 30% 35%)}
.pix-icon-spark{mask:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%)}

.gallery-grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:16px;
}
.gallery-grid .card{padding:0}
.gallery-grid img{display:block;width:100%;height:auto;border-radius:16px}

.cta{
	text-align:center;
}
.cta-text{color:var(--muted);margin:8px 0 20px}

.site-footer{
	padding:24px 0;border-top:1px solid rgba(38,48,89,.5);
	background:linear-gradient(to top, rgba(11,16,32,.8), rgba(11,16,32,.6) 60%, transparent);
	text-align:center;
}
.site-footer p{margin:0;color:#c6d2ff}

#fx-stars{
	position:fixed;inset:0;z-index:-1;display:block;width:100%;height:100%;
	background:radial-gradient(1000px 600px at 80% -10%, rgba(255,122,209,.08), transparent 60%);
}

@media (max-width: 960px){
	.hero-grid{grid-template-columns:1fr}
	.title{font-size:34px}
	.features-grid{grid-template-columns:1fr}
	.gallery-grid{grid-template-columns:1fr}
}