*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

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

.glass-nav{
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
}

.logo{
font-size:28px;
color:#a855f7 !important;
}

.hero-section{
background:linear-gradient(to right,#0f172a,#111827,#1e1b4b);
}

.hero-text h1{
font-size:65px;
font-weight:800;
line-height:1.2;
}

.hero-text span{
color:#a855f7;
}

.hero-text p{
margin-top:20px;
font-size:20px;
color:#d1d5db;
}

.hero-btn{
background:#a855f7;
color:white;
padding:15px 30px;
border-radius:40px;
font-weight:bold;
}

.outline-btn{
border:2px solid #a855f7;
color:white;
padding:15px 30px;
border-radius:40px;
}

.hero-card img{
width:100%;
animation:float 4s infinite ease-in-out;
}

@keyframes float{
0%{transform:translateY(0px);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0px);}
}

.section-title{
font-size:50px;
font-weight:800;
margin-bottom:20px;
}

.feature-card{
background:#111827;
padding:40px;
border-radius:20px;
text-align:center;
transition:0.4s;
height:100%;
}

.feature-card:hover{
transform:translateY(-10px);
background:#1e1b4b;
}
.feature-card i{
font-size:50px;
margin-bottom:20px;
color:#a855f7;
}

.template-card{
position:relative;
overflow:hidden;
border-radius:20px;
}

.template-card img{
width:100%;
height:300px;
object-fit:cover;
transition:0.5s;
}

.template-card:hover img{
transform:scale(1.1);
}

.template-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0.6);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:0.5s;
}

.template-card:hover .template-overlay{
opacity:1;
}

.footer{
background:#020617;
}

@media(max-width:768px){
.hero-text h1{
font-size:42px;
}

.section-title{
font-size:35px;
}
}