*{
    margin:0;padding:0;box-sizing:border-box
}
body{
    font-family:Arial,sans-serif;
    background:linear-gradient(135deg,#0f766e,#22c55e,#facc15);
    color:#fff;
    overflow-x:hidden
}
header{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
    position:relative
}
h1{
    font-size:4rem;
    animation:glow 2s infinite alternate
}
p{
    font-size:1.3rem;
    margin-top:10px;
    max-width:700px
}
.btn{
    margin-top:25px;
    padding:14px 28px;
    border:none;
    border-radius:999px;
    background:#fff;
    color:#0f766e;
    font-weight:bold;
    cursor:pointer;
    transition:.3s
}
.btn:hover{
    transform:scale(1.08)
}
.moon{
    position:absolute;
    top:40px;
    right:60px;
    width:90px;
    height:90px;
    border-radius:50%;
    box-shadow:20px 0 0 #fff;
    animation:float 3s ease-in-out infinite
}
.goat{
    font-size:5rem;
    animation:bounce 2s infinite;
    margin-top:20px
}
.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;padding:50px
}
.card{
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    padding:25px;
    border-radius:22px;
    box-shadow:0 10px 25px rgba(0,0,0,.2);
    transition:.4s;
    cursor: pointer;
}
.card:hover{
    transform:translateY(-10px)
}
footer{
    text-align:center;
    padding:20px;
    background:rgba(0,0,0,.2)
}
.confetti{
    position:fixed;
    width:10px;
    height:10px;
    top:-10px;
    animation:fall linear forwards
}
@keyframes glow{
    from{text-shadow:0 0 10px #fff}
    to{text-shadow:0 0 25px #facc15,0 0 40px #fff}
}
@keyframes float{
    50%{transform:translateY(-12px)}
}
@keyframes bounce{
    50%{transform:translateY(-14px)}
}
@keyframes fall{
    to{transform:translateY(110vh) rotate(720deg);opacity:0}
}