/* TEMPLATES */

footer {
	background: rgba(31, 41, 81, 0.23);
}

#backToTop {
	background: rgba(31, 41, 81, 0.23);
}

/* NORMAL */

body {
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; 
	background:#05060a; 
	color:#e6eef8; 
	overflow-x:hidden;
}


#intro-wrap {
	position:fixed;
	inset:0;
	z-index:50;
	display:flex;
	align-items:center;
	justify-content:center;
	pointer-events: none;
}

canvas {
	display:block;
}


.site-shell {
	opacity: 0;
	transform: scale(0.96);
	transition: all 1s cubic-bezier(.25,1,.3,1);
	position: relative;
	z-index: 51;
}

.site-shell.visible{opacity:1;transform:scale(1)}


.site-shell header {
	padding: clamp(1rem, 6vw, 4rem);
	display: flex;
	align-items: center;
	gap: 2rem;
}
.logo{font-weight:700;letter-spacing:0.06em;font-size:1.25rem;display:flex;align-items:center;gap:.6rem}
.logo .dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#7efcfe,#7a5cff);box-shadow:0 0 12px rgba(126,252,254,.25),0 0 28px rgba(122,92,255,.08)}


main  {
	padding:1.5rem 6vw 6rem;
	max-width:1100px;
	margin:0 auto;
}

main a {
	color: inherit;
	text-decoration: none;
}

main h1 {
	font-size:2.25rem;
	margin:0 0 .6rem;
}
p.lead{opacity:.85;max-width:72ch;line-height:1.5}


.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(clamp(120px, 30vw, 260px),1fr));
	gap: clamp(0.5rem, 1.5vw, 1.2rem);
	margin-top: 2rem;
}

.card {
	backdrop-filter: blur(6px) saturate(140%);
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.03);
	padding: clamp(0.5rem, 2vw, 1.2rem);
	border-radius: 14px;
	box-shadow: 0 6px 30px rgba(10,10,20,0.6);
	transition: transform .35s ease,box-shadow .35s ease;
	cursor: default;
}

.card-grid a {
	cursor: pointer;
}

.card:hover {
	transform:translateY(-8px);
	box-shadow:0 12px 60px rgba(34,20,80,0.6);
}

.card h3 {
	font-size: calc(clamp(1rem, 3vw, 1.25rem) + var(--font-size-larger));
	margin: 0 0 .4rem;
}

.card p {
	font-size: calc(clamp(0.75rem, 2vw, 1rem) + var(--font-size-larger));
}


.beam{position:fixed;pointer-events:none;mix-blend-mode:screen;z-index:30}


footer{padding:2rem 6vw;color:rgba(230,238,248,0.6);font-size:.9rem}


.muted{opacity:.7}


@media (max-width:720px){
	.header {
		padding: 2rem 4vw;
		} 
	main h1 {
		font-size: 1.5rem;
		}
}