*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

body{
background: radial-gradient(circle at 20% 20%, #2a0066, #0a001a 60%);
color:white;
overflow-x:hidden;
min-height:100vh;
}

canvas{
position:fixed;
top:0;
left:0;
z-index:-1;
}

header{
text-align:center;
padding:80px 20px;
}

h1{
font-size:3rem;
background:linear-gradient(90deg,#c084ff,#8b5cf6,#6d28d9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* Moving Motto */
.motto-container{
overflow:hidden;
white-space:nowrap;
margin-top:20px;
}

.motto{
display:inline-block;
padding-left:100%;
animation:scrollText 18s linear infinite;
font-size:1.2rem;
color:#d8b4fe;
}

@keyframes scrollText{
0%{transform:translateX(0);}
100%{transform:translateX(-100%);}
}

.card{
background:rgba(255,255,255,0.05);
backdrop-filter:blur(20px);
border:1px solid rgba(192,132,255,0.3);
border-radius:20px;
margin:80px auto;
padding:40px;
width:85%;
max-width:1000px;
box-shadow:0 0 40px rgba(168,85,247,0.2);
transform:translateY(80px);
opacity:0;
transition:all 0.8s ease;
}

.card.active{
transform:translateY(0);
opacity:1;
}

.card h2{
margin-bottom:20px;
color:#c084ff;
}

.card h3{
margin-top:30px;
margin-bottom:10px;
color:#a855f7;
}

.card h4{
margin-top:20px;
color:#d8b4fe;
}

.card ul li{
margin:8px 0;
}