:root{
  --bg:#0b1221; --panel:#0f1a33; --text:#eae7dc; --muted:#9fb0d9;
  --accent:#ff5ea0; --line:rgba(255,255,255,.08); --maxw:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  color:var(--text); background:linear-gradient(#0b1221,#060a15) fixed;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw); margin:auto; padding:12px 16px}
header{
  position:sticky; top:0; z-index:10; backdrop-filter:blur(8px);
  background:rgba(6,10,21,.7); border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; margin-right:8px}
.brand img{width:40px; height:40px; object-fit:contain; border-radius:6px}
.brand span{font-weight:800; letter-spacing:.4px}

.menu-toggle{display:none; border:1px solid var(--line); border-radius:10px; padding:8px 10px}
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin-left:auto}
.tab{padding:8px 12px; border-radius:999px; color:var(--muted); border:1px solid transparent}
.tab.active, .tab:hover{color:var(--text); border-color:var(--line); background:rgba(255,255,255,.06)}

main{max-width:var(--maxw); margin:20px auto; padding:0 16px}
h1{margin:12px 0 6px 0; font-size:28px}
.badge{display:inline-block; font-size:11px; padding:2px 8px; border:1px solid var(--line); border-radius:999px; color:#b9c6ef}
.grid{
  display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  margin-top:14px
}
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:14px
}
.card h3{margin:0 0 8px 0; font-size:18px}
.card p{margin:0; color:#cfd6ef; line-height:1.35}

footer{color:#7e89a8; text-align:center; padding:28px 0}

/* --- Responsive tweaks --- */
@media (max-width: 840px){
  .menu-toggle{display:block}
  .tabs{display:none; width:100%}
  .tabs.open{display:flex}
}