.btn{
  font-family:var(--font-mono); font-size:14px; padding:14px 24px; border-radius:6px;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:all .2s ease; border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--signal); color:var(--void); font-weight:600; }
.btn-primary:hover{ background:#79EED6; transform:translateY(-2px); }
.btn-ghost{ border-color:var(--border); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--signal); color:var(--signal); }

.eyebrow{
  font-family:var(--font-mono); font-size:13px; color:var(--signal);
  margin-bottom:16px; letter-spacing:0.04em;
}

.pillar{
  border:1px solid var(--border); background:var(--panel); border-radius:10px; padding:28px;
  transition:border-color .25s ease, transform .25s ease;
}
.pillar:hover{ border-color:var(--signal); transform:translateY(-4px); }
.pillar h3{ font-size:18px; margin-bottom:12px; }
.pillar p{ color:var(--ink-dim); font-size:14.5px; line-height:1.6; }

.stack-group h3{
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-dim);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px;
}
.tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13px; padding:8px 14px;
  border:1px solid var(--border); border-radius:6px; color:var(--ink); background:var(--panel);
  transition:all .2s ease;
}
.tag:hover{ border-color:var(--signal); color:var(--signal); }

.tag-icon{
  width:14px; height:14px; flex-shrink:0;
  background-color:currentColor;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}

.project-card{
  position:relative; border:1px solid var(--border); background:var(--panel); border-radius:10px;
  padding:26px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:14px;
  transition:border-color .25s ease, transform .25s ease;
}
.project-card:hover{ border-color:var(--signal); transform:translateY(-4px); }
.project-card:hover .card-corner{ opacity:1; }

.card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.card-status{ display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; color:var(--ink-dim); white-space:nowrap; }
.card-status .dot{ width:6px; height:6px; border-radius:50%; background:var(--signal); }
.project-card h3{ font-family:var(--font-mono); font-size:17px; font-weight:600; }
.project-card p{ color:var(--ink-dim); font-size:14px; line-height:1.6; flex-grow:1; }
.card-meta{
  display:flex; gap:16px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-dim);
  border-top:1px solid var(--border); padding-top:14px;
}
.card-meta strong{ color:var(--ink); font-weight:500; }

.card-corner{ position:absolute; width:14px; height:14px; opacity:0; transition:opacity .2s ease; }
.card-corner--tl{ top:-1px; left:-1px; border-top:2px solid var(--signal); border-left:2px solid var(--signal); border-radius:4px 0 0 0; }
.card-corner--br{ bottom:-1px; right:-1px; border-bottom:2px solid var(--signal); border-right:2px solid var(--signal); border-radius:0 0 4px 0; }

.project-card--ghost{
  align-items:center; justify-content:center; text-align:center;
  border-style:dashed; color:var(--ink-dim); gap:8px;
}
.project-card--ghost:hover{ color:var(--alert); border-color:var(--alert); }
.project-card--ghost span{ font-family:var(--font-mono); font-size:13px; }