body {
margin: 0;
font-family: Arial, sans-serif;
background: #000;
color: #fff;
text-align: center;
}

h1, h2 {
font-family: Impact, sans-serif;
letter-spacing: 2px;
}

section {
padding: 80px 20px;
}

.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}

.hero h1 {
font-size: 80px;
color: yellow;
animation: glitch 1s infinite;
}

.sub {
opacity: 0.7;
}

@keyframes glitch {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(2px, -2px); }
60% { transform: translate(-2px, 0); }
80% { transform: translate(2px, 2px); }
100% { transform: translate(0); }
}

.buttons {
margin-top: 20px;
}

.btn {
margin: 10px;
padding: 15px 25px;
background: yellow;
color: black;
border: none;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
}

.btn:hover {
transform: scale(1.1) rotate(-2deg);
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}

.card {
border: 2px solid yellow;
padding: 20px;
transition: 0.2s;
}

.card:hover {
transform: scale(1.05) rotate(2deg);
background: yellow;
color: black;
}

footer {
padding: 40px;
font-size: 14px;
opacity: 0.5;
}