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

body{
 background:linear-gradient(135deg,#020617,#0f172a);
 color:white;
}

.navbar{
 position:sticky;
 top:0;
 z-index:100;
 background:rgba(2,6,23,.8);
 backdrop-filter:blur(12px);
 padding:18px 60px;
 display:flex;
 justify-content:space-between;
 align-items:center;
}

.logo{
 font-size:22px;
 font-weight:700;
}

.nav-links a{
 color:white;
 text-decoration:none;
 margin-left:25px;
 font-weight:500;
 padding:8px 16px;
 border-radius:30px;
 transition:.3s;
}

.nav-links a:hover{
 background:#1e293b;
}

.hero{
 padding:120px 20px;
 text-align:center;
 background:linear-gradient(135deg,#4f46e5,#06b6d4);
}

.hero h1{
 font-size:48px;
 margin-bottom:15px;
}

.hero p{
 max-width:600px;
 margin:auto;
 opacity:.9;
}

button{
 margin-top:20px;
 padding:14px 28px;
 border:none;
 border-radius:30px;
 background:linear-gradient(135deg,#22c55e,#4f46e5);
 color:white;
 font-weight:600;
 cursor:pointer;
 box-shadow:0 10px 30px rgba(0,0,0,.5);
 transition:.3s;
}

button:hover{
 transform:translateY(-4px) scale(1.05);
}

.section{
 max-width:1200px;
 margin:auto;
 padding:80px 20px;
}

.section h2{
 margin-bottom:30px;
}

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

.card{
 background:rgba(255,255,255,.05);
 backdrop-filter:blur(10px);
 padding:30px;
 border-radius:20px;
 box-shadow:0 20px 40px rgba(0,0,0,.4);
 transition:.3s;
}

.card:hover{
 transform:translateY(-8px);
}

.ai-box{
 display:flex;
 gap:10px;
}

.ai-box input{
 flex:1;
 padding:14px;
 border:none;
 border-radius:12px;
}

.progress-box{
 background:#020617;
 padding:30px;
 border-radius:20px;
}

.bar{
 background:#1e293b;
 height:14px;
 border-radius:10px;
 overflow:hidden;
}

.bar div{
 height:100%;
 width:0%;
 background:linear-gradient(135deg,#22c55e,#4f46e5);
 transition:.5s;
}

#certBox{
 margin-top:30px;
}

footer{
 text-align:center;
 padding:40px;
 background:#020617;
}