:root{--bg:#000;--neon:#00ff99;--muted:#9fb3b0}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:#cfe7e0}
a{color:var(--neon);}
.container{max-width:980px;margin:18px auto;padding:10px}
/* Sticky single topbar */
.topbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.6);
}
.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  gap: 12px;
}
.topbar-logo{height:48px; width:auto;}
.brand-text { color:var(--neon); font-weight:800; margin-left:8px; font-size:18px; }
.topbar-nav { display:flex; gap:10px; align-items:center; }
/* button styles */
.btn { text-decoration:none; padding:10px 14px; border-radius:10px; font-weight:700; display:inline-block; }
.btn-primary { background:var(--neon); color:#00110a; border:0; box-shadow:0 6px 10px rgba(0,0,0,0.5); }
.btn-ghost { background:transparent; color:var(--neon); border:2px solid rgba(0,230,118,0.06); }
/* hero & cards */
.hero{text-align:center;padding:80px 10px 40px}
h1{color:var(--neon);margin:8px 0;font-size:34px}
.lead{color:var(--muted);max-width:820px;margin:8px auto;font-size:16px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
.card{background:rgba(255,255,255,0.02);padding:18px;border-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,0.6)}
.small{font-size:14px;color:var(--muted)}
.footer{padding:18px;text-align:center;color:#7f8b8a;margin-top:24px;border-top:1px solid rgba(255,255,255,0.02)}

/* ensure page content not hidden behind fixed bar */
body { padding-top:74px; }
/* responsive */
@media(max-width:700px){.grid{grid-template-columns:1fr}h1{font-size:26px}.brand-text{display:none}.topbar-logo{height:48px; width:auto;} body{padding-top:64px}}


/* enforce no yellow behind buttons and ensure circular favicon used in tabs */
.topbar-inner .btn { box-shadow:none !important; background: #00ff99 !important; color:#00110a !important; border:0 !important; }
.topbar-inner .btn-ghost { background:transparent !important; color:#00ff99 !important; border:0 !important; box-shadow:none !important; }

/* small top-left favicon image in header if used */
.topbar-fixed .brand-link img { border-radius:6px; }

/* slider tweaks */
.hero-slider-wrap { margin-top:12px; }

/* tighten hero heading + lead spacing */
.hero h1 { margin-bottom:8px !important; line-height:1.1; }
.lead { margin-top:6px !important; font-size:15px; max-width:900px; margin-left:auto; margin-right:auto; }

.hero{padding-top:24px !important;}