:root{
  --bg:#0b0b0b;
  --card:#141414;
  --card2:#1a1a1a;
  --text:#eaeaea;
  --muted:#b3b3b3;
  --border:#2a2a2a;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
}

/* THEMES */
body[data-theme="darker"]{
  --bg:#050505;
  --card:#101010;
  --card2:#151515;
}

body[data-theme="terminal"]{
  --bg:#050805;
  --card:#08110a;
  --card2:#0c1a10;
  --text:#7CFF9B;
  --muted:#4adf7c;
  --border:#1f3b2a;
}

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 22px;
  background:#101010;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo-wrap{position:relative;width:56px;height:56px;}

.packet{
  position:absolute;
  width:6px;height:6px;
  background:#fff;
  border-radius:50%;
  top:50%;left:10px;
  animation:move 2.2s linear infinite;
  opacity:.7;
}
.packet.p2{animation-delay:.7s}
.packet.p3{animation-delay:1.4s}

@keyframes move{
  0%{transform:translateX(0)}
  100%{transform:translateX(38px);opacity:0}
}

nav a{
  color:#b3b3b3;
  text-decoration:none;
  margin-left:16px;
  font-size:14px;
}
nav a:hover{color:#fff}

.container{
  max-width:980px;
  margin:40px auto;
  padding:0 16px;
}

.card{
  background:#141414;
  border:1px solid #2a2a2a;
  border-radius:12px;
  padding:22px;
}

.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin-top:14px;
}

.tile{
  display:block;
  background:#1a1a1a;
  border:1px solid #2a2a2a;
  border-radius:12px;
  padding:18px;
  text-decoration:none;
  color:#eaeaea;
}

.tile p{color:#b3b3b3;font-size:13px;line-height:1.4}

p,li{color:#b3b3b3;line-height:1.6}

.button{
  display:inline-block;
  padding:10px 14px;
  border:1px solid #2a2a2a;
  border-radius:8px;
  color:#eaeaea;
  text-decoration:none;
  background:#1a1a1a;
}

.themebar button{
  background:#1a1a1a;
  border:1px solid #2a2a2a;
  color:#eaeaea;
  padding:6px 10px;
  border-radius:6px;
  margin-right:6px;
  cursor:pointer;
}

.social a{
  margin:0 8px;
  display:inline-block;
}
.social svg{
  width:20px;height:20px;
  fill:#b3b3b3;
}
.social svg:hover{fill:#fff}

footer{
  text-align:center;
  padding:24px;
  border-top:1px solid #2a2a2a;
  color:#777;
  font-size:12px;
}