*,
*:after,
*:before {
	box-sizing: border-box;
}

:root {
	--x: 0;
	--y: 0;
	--xp: 0;
	--yp: 0;
	--hue: calc(0 + (var(--xp) * 500));
	--bg: hsl(0, 0%, 10%);
	--size: 100px;
	--glow: radial-gradient(50% 50% at center,
			hsl(var(--hue) 80% 85%),
			hsl(var(--hue) 80% 70%),
			transparent) calc((var(--x) * 1px) - (var(--size) * 0.5)) calc((var(--y) * 1px) - (var(--size) * 0.5)) / var(--size) var(--size) no-repeat fixed;
}
.controls {
	position: fixed;
	top: 2rem;
	right: 2rem;
}



button {
	border-radius: 1rem;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.1ch;
	background: var(--bg);
	border: 4px solid transparent;
	box-shadow: 0 1px hsl(0 0% 100% / 0.15) inset;
	cursor: pointer;
	background:
		linear-gradient(var(--bg), var(--bg)) padding-box,
		var(--glow),
		linear-gradient(black, black) border-box;
	transition: background-size 0.24s;
	touch-action: none;
	position: relative;
	padding: 1rem 2rem;
}

button::before {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: 0 1px hsl(0 0% 100% / 0.15) inset;
	background: var(--bg);
	z-index: 2;
	border-radius: 1rem;
}
button span {
	background: var(--glow), #ffffff;
	background-clip: text;
	color: transparent;
	height: 100%;
	width: 100%;
	z-index: 2;
	position: relative;
	inset: 0;
}
:root:has(button:active) {
	--size: 300px;
}
button::after {
	content: "";
	position: absolute;
	inset: -4px;
	filter: blur(20px);
	border: 4px solid transparent;
	background: var(--glow);
	border-radius: 1rem;
}

.scroll-btn{
    margin-top: 30px;
}

.social-btn{
    display: flex;
    gap: 30px;
    margin-top: 60px;
}

.footer-btn {
    display: flex;
    gap: 15px;          /* reduced from 10px */
}

.footer-btn button {
    padding: 0.8rem 1rem;  
    font-size: 0.85rem;    
}

/* Mobile responsiveness */
@media (max-width: 768px) {
	.cards button{
		margin-top: 15px;
	}

    .controls {
        top: 1rem;
        right: 1rem;
    }

    button {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
		width: 120px;
    }

    button span {
        font-size: 0.9rem;
    }

    .scroll-btn {
        margin-top: 20px;
    }

    .social-btn {
		display: flex;
		align-items: center;
		justify-content: center;
        flex-direction: column; /* stack vertically */
        gap: 20px;
        margin-top: 40px;
    }

    .footer-btn {
        flex-direction: column; /* stack vertically */
        gap: 10px;
    }

    .footer-btn button {
        padding: 0.7rem 1rem;
        font-size: 0.8rem;
    }

		.hero-btn{
		display: none;
	}
}

@media (max-width: 480px) {
    button {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    button span {
        font-size: 0.85rem;
    }

    .scroll-btn {
        margin-top: 15px;
    }

    .social-btn {
        gap: 15px;
        margin-top: 30px;
    }

    .footer-btn button {
        padding: 0.6rem 0.9rem;
        font-size: 0.75rem;
    }
}