:root{
	--bg:#0d0d17;
	--fg:#e7e4ff;
	--accent:#ff2cf8;
	--accent2:#36f8ff;
	--accent3:#8eff75;
	--radius:4px;
	--max-width:1150px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}

body{
	background:var(--bg);
	color:var(--fg);
	font-family:'Montserrat',sans-serif;
	line-height:1.55;
	overflow-x:hidden;
	background-image:
		radial-gradient(ellipse at 20% 30%,rgba(255,44,248,.08),transparent 60%),
		radial-gradient(ellipse at 80% 70%,rgba(54,248,255,.07),transparent 70%);
	background-attachment:fixed;
	animation:bgShift 60s linear infinite;
}
@keyframes bgShift{
	0%{background-position:0 0,0 0;}
	50%{background-position:200% 120%,120% 200%;}
	100%{background-position:0 0,0 0;}
}

a{color:var(--accent);text-decoration:none;transition:color .25s ease;}
a:hover{color:var(--accent2);}

/* ------------ HEADER ------------- */
header{padding:4rem 1.5rem 1rem;text-align:center;}
header h1{font-size:clamp(2.5rem,4vw,4rem);font-family:'Fira Mono',monospace;}
.tagline{margin-top:.8rem;font-size:1.05rem;}

/* ------ UNIVERSAL RGB SHIFT ------ */
.channel-shift{position:relative;color:transparent !important;}
.channel-shift::before,
.channel-shift::after{content:attr(data-text);position:absolute;inset:0;m
ix-blend-mode:screen;}
.channel-shift::before{color:var(--accent);animation:shift 12s linear infinite;}
.channel-shift::after{color:var(--accent2);animation:shift 12s linear infinite reverse;}
@keyframes shift{
	0%{transform:translate(0,0);}25%{transform:translate(2px,-2px);}
	50%{transform:translate(-2px,2px);}75%{transform:translate(2px,2px);}
	100%{transform:translate(0,0);}
}

/* -------------- LAYOUT ------------ */
.container{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem;}

/* -------- HERO NAV BUTTONS -------- */
.hero-nav{display:grid;gap:1.2rem;margin:1.5rem 0;}
.hero-btn{
	display:inline-block;padding:1.1rem 2.2rem;width:100%;max-width:320px;
	margin:0 auto;border:2px solid var(--accent);border-radius:var(--radius);
	background:transparent;font-size:0 !important;line-height:0 !important;
	color:transparent !important;font-weight:700;
	transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.hero-btn::before,.hero-btn::after{font-size:1.15rem;line-height:1.15;}
.hero-btn:hover{background:var(--accent);border-color:var(--accent2);color:#000;
	transform:translateY(-4px) scale(1.03);}
@media(min-width:500px){.hero-nav{grid-template-columns:repeat(2,minmax(0,1fr));}}
.hero-btn:nth-child(2){border-color:var(--accent2);}
.hero-btn:nth-child(2):hover{background:var(--accent2);border-color:var(--accent3);}
.hero-btn:nth-child(3){border-color:var(--accent3);}
.hero-btn:nth-child(3):hover{background:var(--accent3);border-color:var(--accent);}
.hero-btn:nth-child(4){border-color:var(--accent2);}
.hero-btn:nth-child(4):hover{background:var(--accent2);border-color:var(--accent);}

/* -------- SCANLINE TEXTURE -------- */
body::before{
	content:'';position:fixed;inset:0;pointer-events:none;
	background:repeating-linear-gradient(180deg,rgba(255,255,255,.025)0 2px,transparent 2px 4px);
	mix-blend-mode:overlay;animation:scan 18s linear infinite;
}
@keyframes scan{0%{transform:translateY(0);}100%{transform:translateY(-100%);}}

/* -------------- FOOTER ------------- */
footer{margin:4rem 0 2rem;text-align:center;font-size:.9rem;}

/* ----------- APP GRID (tools) ------ */
.app-grid{display:grid;gap:2rem;margin:3rem 0 4rem;}
@media(min-width:700px){.app-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.app-card{
	display:block;border:2px solid var(--accent);border-radius:var(--radius);
	padding:1.6rem;background:rgba(255,255,255,.03);backdrop-filter:blur(3px);
	transition:border-color .25s ease,transform .25s ease;text-align:center;
}
.app-card:hover{transform:translateY(-6px) scale(1.02);}
.app-card:nth-child(2){border-color:var(--accent2);}
.app-card:nth-child(3){border-color:var(--accent3);}
.app-card:nth-child(4){border-color:var(--accent2);}
.app-banner,.app-demo{width:100%;max-width:500px;height:auto;border-radius:var(--radius);margin:0 auto 1.1rem;display:block;}
.app-card h2{margin:.4rem 0 .75rem;font-size:1.35rem;line-height:1.2;color:transparent;}
.app-card p{font-size:.95rem;line-height:1.4;margin-bottom:1.1rem;}