
:root{
  --nexava-cyan:#00f0ff;
  --nexava-blue:#0066ff;
  --nexava-dark-1:#1b2735;
  --nexava-dark-2:#090a0f;
}
body{
  background: radial-gradient(ellipse at bottom, var(--nexava-dark-1) 0%, var(--nexava-dark-2) 100%) !important;
}
.grid-bg{
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}
.stars{
  position: fixed;
  top:0; left:0; width:100%; height:100%;
  pointer-events:none;
  z-index:-3;
  overflow:hidden;
}
.star{
  position:absolute;
  width:2px; height:2px;
  background:white;
  border-radius:50%;
  animation:twinkle 3s infinite;
  opacity:0;
}
@keyframes twinkle{
  0%,100%{opacity:0; transform:scale(.5);}
  50%{opacity:1; transform:scale(1);}
}
.main-header{
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(30, 41, 59, 0.5) 100%) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(0,240,255,.15) !important;
  box-shadow: 0 8px 32px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.main-nav a{
  position:relative;
  transition: color .3s, opacity .3s;
}
.main-nav a:hover,
.main-nav a.active{
  color: var(--nexava-cyan) !important;
}
.main-nav a.active::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:100%;
  height:2px;
  background:var(--nexava-cyan);
  box-shadow:0 0 10px var(--nexava-cyan);
}
.nexava-dev-banner{
  max-width:1400px;
  margin:16px auto 0;
  padding:12px 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(30, 41, 59, 0.5) 100%);
  border:1px solid rgba(0,240,255,.15);
  border-radius:14px;
  color:#cbd5e1;
  box-shadow:0 8px 32px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
}
.nexava-dev-banner strong{color:var(--nexava-cyan)}
