:root{
 --bg:#050816;
 --glass:rgba(255,255,255,.08);
 --border:rgba(255,255,255,.15);
 --text:#eef3ff;
 --accent:#ff6fa9;
 --accent2:#7dd3fc;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 font-family:Poppins,sans-serif;
 color:var(--text);
 background:
 radial-gradient(circle at top,#1b2d5f 0,#0b1025 35%,#050816 70%);
 overflow-x:hidden;
 min-height:100vh;
}

#stars{
 position:fixed;
 inset:0;
 width:100%;
 height:100%;
 z-index:-2;
}

body::before{
 content:"";
 position:fixed;
 inset:-20%;
 background:
 radial-gradient(circle at 20% 20%,rgba(125,211,252,.18),transparent 30%),
 radial-gradient(circle at 80% 30%,rgba(255,111,169,.14),transparent 28%),
 radial-gradient(circle at 50% 80%,rgba(139,92,246,.12),transparent 30%);
 filter:blur(40px);
 animation:aurora 16s ease-in-out infinite alternate;
 z-index:-1;
}

@keyframes aurora{
 from{transform:translate(-2%,-2%) rotate(0)}
 to{transform:translate(2%,2%) rotate(8deg)}
}

#loader{
 position:fixed;
 inset:0;
 display:grid;
 place-items:center;
 background:#03050f;
 z-index:9999;
 transition:.8s;
}

.loader-inner h1{
 font-size:3rem;
 color:#fff;
}
.loader-inner p{
 color:#b8c2d8;
 text-align:center;
}

nav{
 position:fixed;
 top:20px;
 left:50%;
 transform:translateX(-50%);
 width:min(1100px,92%);
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:14px 22px;
 border:1px solid var(--border);
 border-radius:20px;
 background:var(--glass);
 backdrop-filter:blur(18px);
 z-index:20;
}

nav ul{
 display:flex;
 gap:22px;
 list-style:none;
}
nav a{
 color:white;
 text-decoration:none;
}

.logo{font-weight:700;color:var(--accent)}

.hero{
 min-height:100vh;
 display:grid;
 place-items:center;
 padding:100px 20px;
}

.glass{
 background:var(--glass);
 border:1px solid var(--border);
 backdrop-filter:blur(20px);
 border-radius:28px;
 box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.hero-content{
 width:min(900px,92%);
 padding:60px;
 text-align:center;
}

.hero-content h1{
 font-size:clamp(3rem,8vw,5.8rem);
 line-height:1;
 margin:15px 0;
}

.hero-content h4{
 color:var(--accent2);
 letter-spacing:2px;
 text-transform:uppercase;
}

.hero-content p{
 font-size:1.2rem;
 line-height:1.8;
 color:#d9e4ff;
}

.btn{
 display:inline-block;
 margin-top:28px;
 padding:14px 30px;
 border:none;
 border-radius:999px;
 background:linear-gradient(135deg,var(--accent),#9b5cff);
 color:#fff;
 font-weight:600;
 cursor:pointer;
 text-decoration:none;
 transition:.3s;
}

.btn:hover{
 transform:translateY(-3px) scale(1.03);
 box-shadow:0 10px 35px rgba(255,111,169,.35);
}

.section{
 width:min(1100px,92%);
 margin:80px auto;
 padding:50px;
}

.section h2{
 font-size:2.4rem;
 margin-bottom:24px;
}

.section p, .timeline li{
 line-height:1.9;
 color:#dbe7ff;
}

.handwriting,.signature{
 font-family:Caveat,cursive;
 font-size:2rem;
}

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

.card{
 padding:25px;
 transition:.35s;
}
.card:hover{
 transform:translateY(-8px);
}

.timeline{
 padding-left:22px;
 display:grid;
 gap:12px;
}

.meter{
 width:100%;
 height:28px;
 background:#1a2340;
 border-radius:999px;
 overflow:hidden;
 margin:20px 0;
}

.fill{
 height:100%;
 display:flex;
 align-items:center;
 justify-content:center;
 background:linear-gradient(90deg,#ff6fa9,#8b5cf6,#7dd3fc);
 font-weight:700;
}

.final{
 text-align:center;
}

.buttons{
 display:flex;
 justify-content:center;
 gap:18px;
 flex-wrap:wrap;
 margin-top:24px;
}

footer{
 padding:40px;
 text-align:center;
 color:#9fb0d8;
}

@media(max-width:768px){
 nav ul{display:none}
 .hero-content,.section{padding:28px}
 .hero-content h1{font-size:3rem}
}