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

body{
background:#0f2027;
color:white;
overflow-x:hidden;
}

/* 3D Shapes */
.shapes{
position:fixed;
width:100%;
height:100%;
z-index:-1;
overflow:hidden;
}

.shape{
position:absolute;
border-radius:50%;
filter:blur(40px);
opacity:0.6;
animation:float 12s infinite ease-in-out;
}

.shape1{
width:300px;
height:300px;
background:#00f2ff;
top:10%;
left:10%;
}

.shape2{
width:400px;
height:400px;
background:#ff00ff;
bottom:10%;
right:15%;
animation-delay:3s;
}

.shape3{
width:250px;
height:250px;
background:#00ff99;
top:50%;
left:60%;
animation-delay:6s;
}

@keyframes float{
0%{transform:translateY(0px) rotate(0deg);}
50%{transform:translateY(-50px) rotate(180deg);}
100%{transform:translateY(0px) rotate(360deg);}
}

/* Header */
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(15px);
position:fixed;
width:100%;
z-index:10;
}

.logo{
font-weight:bold;
font-size:24px;
letter-spacing:2px;
}

nav{
display:flex;
gap:20px;
}

nav a{
color:white;
text-decoration:none;
}

.auth button{
padding:6px 15px;
border:none;
border-radius:8px;
background:#00f2ff;
cursor:pointer;
}

/* Sections */
.hero{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}

.section{
padding:120px 40px;
text-align:center;
}

.grid{
display:flex;
justify-content:center;
gap:40px;
margin-top:40px;
}

.card{
background:rgba(255,255,255,0.08);
padding:40px;
border-radius:20px;
backdrop-filter:blur(10px);
transition:0.3s;
}

.card:hover{
transform:translateY(-15px) rotateY(10deg);
}

/* Modal */
.modal{
display:none;
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
justify-content:center;
align-items:center;
z-index:20;
}

.modal-content{
background:white;
color:black;
padding:40px;
border-radius:15px;
display:flex;
flex-direction:column;
gap:15px;
min-width:300px;
}

.modal-content input{
padding:10px;
border-radius:8px;
border:1px solid #ccc;
}

.modal-content button{
padding:10px;
border:none;
border-radius:8px;
background:#00f2ff;
cursor:pointer;
}

.cancel{
background:#ccc !important;
}