:root{
  --primary: #007BFF;
  --dark: #bac2cd ;
  --light: #f9f9fb;
  --accent: #0056b3;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; margin:0; color:#fff; background:#000;}
.header{background:linear-gradient(90deg,var(--dark), #0b2540); padding:18px 24px; position:sticky; top:0; z-index:50;}
.header-inner{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.logo img{height:64px; display:block;}
.nav{display:flex; gap:18px; align-items:center;}
.nav a{color:#cfe8ff; text-decoration:none; font-weight:600; padding:8px 12px; border-radius:8px;}
.nav a:hover{background:rgba(255,255,255,0.03); color:#fff;}
.cta-btn{background:var(--primary); color:#fff; padding:10px 18px; border-radius:10px; text-decoration:none; font-weight:700; box-shadow:0 6px 18px rgba(0,123,255,0.18); transition:transform .18s ease, box-shadow .18s ease;}
.cta-btn:hover{transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,123,255,0.22);}
.hero{background-image:url('../img/hero-bg.jpg'); background-size:cover; background-position:center; padding:100px 20px; text-align:center; position:relative; min-height:420px; display:flex; align-items:center; justify-content:center;}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.55));}
.hero-inner{position:relative; max-width:1100px; z-index:2; color:#fff; padding:24px;}
h1.hero-title{font-size:34px; line-height:1.05; margin:0 0 18px; color:#fff;}
p.lead{color:#d7e9ff; font-size:16px; margin:0 0 18px;}
.btn-primary{background:var(--primary); color:#fff; padding:14px 28px; border-radius:40px; text-decoration:none; display:inline-block; font-weight:700; box-shadow:0 14px 40px rgba(0,123,255,0.18); transition:all .25s ease;}
.btn-primary:hover{filter:brightness(.98); transform:translateY(-4px);}
.btn-primary:active{transform:translateY(-1px);}
.pulse{animation: pulse 2s infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,123,255,0.35)}
  70%{box-shadow:0 0 0 18px rgba(0,123,255,0)}
  100%{box-shadow:0 0 0 0 rgba(0,123,255,0)}
}

/* Cards */
.section{padding:60px 20px;}
.container{max-width:1100px; margin:0 auto;}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px;}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(2,6,23,0.6); transition:transform .18s ease; color:#fff;}
.card img{width:100%; height:180px; object-fit:cover; display:block;}
.card-content{padding:14px;}
.card h3{margin:0 0 8px; color:#eaf6ff;}
.card p{color:#cbdff6; margin:0 0 12px; font-size:14px;}
.card a{color:var(--primary); text-decoration:none; font-weight:700;}

.footer{background:#061226; color:#bfcfe6; padding:36px 20px; text-align:center;}
.footer small{display:block; color:#94a9c9;}
@media (max-width:768px){
  h1.hero-title{font-size:26px;}
  .logo img{height:56px;}
  .hero{padding:70px 12px; min-height:360px;}
  .nav{display:none;}
}