/* Index-specific styles (hero + constellation) */

/* HERO */
.hero-god {
	min-height: calc(var(--vh, 1vh) * 100);
	position: relative;
	padding: clamp(60px, 8vw, 120px);
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* background canvas */
#neural-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* cursor glow */
.cursor-energy { position: fixed; width: 300px; height: 300px; background: radial-gradient(circle, rgba(96,165,250,0.35), transparent 70%); filter: blur(120px); transform: translate(-50%, -50%); pointer-events: none; z-index: 2; will-change: transform; }

.hero-god::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at left center, rgba(15,23,42,0.85), transparent 55%); z-index: 2; pointer-events: none; }

.hero-layout { position: relative; z-index: 3; max-width: 1200px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; padding-right: 80px; }

.hero-core { opacity: 1; transform: none; }
.hero-core h1 { font-size: clamp(3rem, 7vw, 5.2rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 28px; }
.hero-core h1 span { background: linear-gradient(90deg, #22d3ee, #a78bfa, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-core p { font-size: 1.15rem; line-height: 1.8; color: var(--muted); margin-bottom: 48px; max-width: 520px; }
.hero-buttons { display: flex; gap: 18px; }

/* CONSTELLATION */
.hero-constellation { position: relative; height: 420px; display: flex; align-items: center; justify-content: center; }
.hero-constellation::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(96,165,250,0.12), transparent 60%), radial-gradient(circle at 70% 60%, rgba(168,85,247,0.12), transparent 60%); filter: blur(60px); }
.app-node { position: absolute; width: 72px; height: 72px; border-radius: 18px; background: rgba(255,255,255,0.06); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; animation: float 8s ease-in-out infinite; box-shadow: 0 20px 60px rgba(0,0,0,0.35); transition: transform 0.3s ease; z-index: 4; }
.app-node img { width: 42px; height: 42px; }
.app-node:hover { transform: scale(1.15); }
.a1 { top: 40px; left: 120px; animation-delay: 0s; }
.a2 { top: 170px; left: 40px; animation-delay: 1.5s; }
.a3 { top: 260px; left: 210px; animation-delay: 3s; }
.a4 { top: 120px; left: 300px; animation-delay: 4.5s; }
@keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-18px); } 100% { transform: translateY(0); } }

@media (max-width: 900px) {
	.hero-layout { grid-template-columns: 1fr; padding-right: 0; }
	.hero-constellation { display: none; }
	.hero-core { text-align: center; }
	.hero-buttons { justify-content: center; }
	.hero-core p { font-size: 1.05rem; margin-left: auto; margin-right: auto;text-align: center; }
}

@media (max-width: 768px) {
	.hero-god { padding: 80px 20px; align-items: center; }
	.hero-layout { grid-template-columns: 1fr; padding-right: 0; justify-items: center; text-align: center; }
	.hero-core h1 { font-size: clamp(2.6rem, 9vw, 3.4rem); font-weight: 900; line-height: 1.1; margin-bottom: 22px; }
	.hero-core p { font-size: 1.05rem; margin-left: auto; margin-right: auto;text-align: center; }
	.hero-core { text-align: center; }
	.hero-buttons { justify-content: center; }
}