:root{
  --bg:#0b0f14; --panel:#101722; --stroke:#1c2835;
  --txt:#e6edf3; --sub:#9fb0c3; --muted:#8da1b2;
  --blue:#5aa0ff; --teal:#7fdbca; --accent:#ffae00;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg,#0b0f14,#0c121a);
  color:var(--txt); font:15px/1.6 system-ui,Segoe UI,Roboto,Arial;
}

.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.pad{padding:40px 0}
.muted{color:var(--sub)} .small{font-size:13px}

.site-header{
  position:sticky; top:0; z-index:100; background:var(--panel);
  border-bottom:1px solid var(--stroke); padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:600}
.logo{border-radius:10px}

.nav a{color:var(--blue); text-decoration:none; margin-left:14px}
.nav a:hover{color:var(--teal)}
.nav a.active{color:#fff; border-bottom:2px solid var(--blue); padding-bottom:4px}

.site-footer{
  margin-top:60px; padding:16px 20px; border-top:1px solid var(--stroke);
  color:var(--muted); text-align:center; background:#0c131d;
}

.hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:80px 0 50px;
}
.hero-logo{
  width:120px; height:120px; margin-bottom:16px; border-radius:20px;
  animation:pulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px var(--accent));
}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 6px var(--accent));}
50%{filter:drop-shadow(0 0 22px var(--accent));}}

.lead{max-width:680px; color:var(--sub)}

.cta-row{display:flex; gap:12px; margin-top:22px; justify-content:center; flex-wrap:wrap}

.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  background:#122033; color:var(--txt); text-decoration:none; border:1px solid var(--stroke);
  transition:transform .08s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(90,160,255,.25)}
.btn-primary{background:linear-gradient(180deg,#2060ff,#1847c9); color:#fff; border:none}

.features{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px; margin:40px 0 80px;
}
.card{
  background:#0f1926; border:1px solid var(--stroke); border-radius:16px;
  padding:22px; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.card h3{margin:0 0 6px; color:var(--blue)}