:root{
  --bg:#050608;
  --panel:rgba(255,255,255,0.03);
  --muted:#9fb3c8;
  --accent:#00ffa8;
  --accent-2:#7cffb2;
  --glass: rgba(255,255,255,0.02);
  --radius:14px;
  --max-width:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg); color:#eaf6f1; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; overflow-y:scroll;
}

/* Matrix canvas background */
#matrix-wrap{position:fixed; inset:0; z-index:-3; background:#000}
canvas#matrix{width:100%; height:100%; display:block}
.bg-overlay{position:fixed; inset:0; z-index:-2; background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.72)); pointer-events:none;}

/* Top navbar */
nav.topbar{
  position:sticky; top:0; z-index:40; display:flex; justify-content:center; gap:18px;
  padding:12px 16px; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(7,10,12,0.28), rgba(7,10,12,0.18));
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
nav.topbar a{
  color:var(--muted); text-decoration:none; font-weight:700; padding:8px 12px;
  border-radius:10px; position:relative; transition:all .18s ease; letter-spacing:.02em;
}
nav.topbar a:hover{ color:#fff; transform:translateY(-2px); }
nav.topbar a.active{ color:#001212; background:var(--accent); box-shadow:0 8px 28px rgba(0,255,168,0.06); }
nav.topbar a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-6px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .22s;
}
nav.topbar a:hover::after{ transform:scaleX(1); }

/* Layout wrapper */
.wrap{ max-width:var(--max-width); margin:44px auto; padding:28px; position:relative; z-index:10; }

/* Hero / Home */
header.hero{
  min-height:64vh; display:flex; align-items:center; gap:28px; padding:28px;
  border-radius:var(--radius); background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
  box-shadow:0 8px 48px rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.hero-left{flex:1; padding:8px 12px}
.hero-right{width:220px; display:flex; align-items:center; justify-content:center}
.title{
  font-family:"JetBrains Mono", monospace; font-weight:800; color:var(--accent);
  font-size:2rem; margin-bottom:8px; text-shadow:0 0 18px rgba(0,255,168,.12);
}
.lead{ color:var(--muted); font-size:1.02rem; line-height:1.6; max-width:760px }
.cta{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap }
.btn{
  background:transparent; color:var(--accent); border:1px solid rgba(0,255,168,0.12);
  padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:800; transition:.22s;
}
.btn.primary{ background:var(--accent); color:#001212; box-shadow:0 8px 28px rgba(0,255,168,0.06) }
.avatar{
  width:140px; height:140px; border-radius:12px; object-fit:cover; border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 10px 38px rgba(0,0,0,0.6);
}

/* Section blocks */
section.block{
  margin-top:28px; padding:24px; border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.03);
  box-shadow:0 8px 40px rgba(0,0,0,0.6);
}
.section-title{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
  color:var(--accent); font-family:"JetBrains Mono",monospace; font-weight:800;
}
.section-body{ color:var(--muted); line-height:1.7; font-size:0.98rem }

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px }
.chip{
  padding:8px 12px; border-radius:999px; background:rgba(0,255,168,0.06);
  color:var(--accent); border:1px solid rgba(0,255,168,0.12);
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:0.92rem;
  transition: transform .18s, background .18s;
}
.chip:hover{ transform:translateY(-4px); background:rgba(0,255,168,0.16) }

/* Donate */
.donate-grid{ display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.don-card{
  padding:12px 16px; border-radius:12px;
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04);
  min-width:220px; max-width:320px; transition:transform .18s;
}
.don-card:hover{ transform:translateY(-6px); box-shadow:0 12px 50px rgba(0,255,168,0.04) }
.don-btn{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px;
  background:var(--accent); color:#001212; font-weight:800; text-decoration:none;
}

/* Social */
.socials{ display:flex; gap:12px; margin-top:10px}
.socials a{ color:var(--muted); text-decoration:none; padding:8px; border-radius:8px; transition:.18s }
.socials a:hover{ color:var(--accent); transform:translateY(-4px) }

/* Footer */
footer.sitefoot{ text-align:center; color:var(--muted); margin:28px 0 40px; font-size:0.95rem }

/* Responsive */
@media (max-width:920px){
  .wrap{ margin:22px 16px }
  header.hero{ flex-direction:column; align-items:flex-start; gap:12px }
  .hero-right{ align-self:flex-end; width:120px }
  .avatar{ width:110px; height:110px }
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}