
:root{
 --primary:#0d6efd;
 --secondary:#081b33;
 --accent:#ffc107;
 --light:#ffffff;
 --bg:#f5f7fb;
 --shadow:0 15px 40px rgba(0,0,0,.08);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 font-family:'Poppins',sans-serif;
 background:var(--bg);
 color:#333;
 line-height:1.7;
 overflow-x:hidden;
}

.top-bar{
 background:var(--accent);
 color:#111;
 font-weight:700;
}

.navbar{
 background:rgba(8,27,51,.95)!important;
 backdrop-filter:blur(10px);
}

.navbar-brand{
 font-weight:800;
 letter-spacing:1px;
}

.nav-link{
 color:#fff!important;
 margin-left:12px;
}

.nav-link:hover{
 color:var(--accent)!important;
}

.hero{
 min-height:100vh;
 display:flex;
 align-items:center;
 background:linear-gradient(135deg,#081b33,#0d6efd);
 color:#fff;
 padding:120px 0 80px;
 position:relative;
}

.hero::before{
 content:"";
 position:absolute;
 width:500px;
 height:500px;
 border-radius:50%;
 background:rgba(255,255,255,.05);
 right:-150px;
 top:-150px;
}

.hero h1{
 font-weight:800;
}

.hero p{
 color:#eef3ff;
}

.hero-image{
 max-width:90%;
 animation:float 5s ease-in-out infinite;
 filter:drop-shadow(0 20px 40px rgba(0,0,0,.3));
}

@keyframes float{
 0%{transform:translateY(0)}
 50%{transform:translateY(-15px)}
 100%{transform:translateY(0)}
}

.btn-warning{
 border:none;
 font-weight:700;
}

.btn-warning:hover{
 transform:translateY(-3px);
 transition:.3s;
}

.feature-card{
 background:#fff;
 border-radius:18px;
 padding:35px 25px;
 text-align:center;
 box-shadow:var(--shadow);
 transition:.3s;
 height:100%;
}

.feature-card:hover{
 transform:translateY(-10px);
}

.feature-card h4{
 margin:18px 0 12px;
 color:var(--secondary);
}

footer{
 background:#081b33;
}

footer p{
 color:#ddd;
}

.pulse{
 animation:pulse 2s infinite;
}

@keyframes pulse{
 0%{transform:scale(1)}
 50%{transform:scale(1.04)}
 100%{transform:scale(1)}
}

@media(max-width:991px){
 .hero{
   text-align:center;
   padding-top:150px;
 }
 .hero-image{
   margin-top:50px;
 }
}

@media(max-width:768px){
 .hero h1{
   font-size:2.2rem;
 }
 .btn-lg{
   width:100%;
 }
}
