/* Homepage sticky sidebar (Behance/Dribbble style) */

/* ---------- SIDEBAR ---------- */
/* ═══ STICKY SIDEBAR (homepage) — Behance/Dribbble style ═══ */
.side{
  display:flex;flex-direction:column;gap:26px;
  position:sticky;top:134px;align-self:start;
}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-track{background:transparent}
.side::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.side::-webkit-scrollbar-thumb:hover{background:var(--line-strong)}

.widget{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
.widget-head{
  padding:14px 18px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
}
.widget-head h4{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin:0;font-weight:600;
}
.widget-head a{font-size:11px;color:var(--ink-dim);text-decoration:none;transition:color .12s}
.widget-head a:hover{color:var(--accent)}

/* Category list — compact + active state */
.cat-list{padding:6px 0}
.cat-list a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 18px;font-size:13.5px;color:var(--ink-soft);
  transition:background .12s, color .12s, border-left-color .12s;
  border-left:2px solid transparent;
  cursor:pointer;
}
.cat-list a:hover{background:var(--surface-2);color:var(--ink);border-left-color:var(--line-strong)}
.cat-list a.active{
  background:rgba(212,255,62,.08);color:var(--accent);
  border-left-color:var(--accent);font-weight:600;
}
.cat-list a.active .num{color:var(--accent)}
.cat-list .num{
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-dim);
  padding:1px 6px;border-radius:3px;background:var(--bg-2);
  min-width:20px;text-align:center;
}
.cat-list a:hover .num{color:var(--ink-soft)}
.cat-list a.parent{color:var(--ink);font-weight:500}
.cat-list a.child{padding-left:34px;font-size:13px;color:var(--ink-dim)}
.cat-list a.child:hover{color:var(--ink-soft)}
.cat-list a.child.active{color:var(--accent)}

/* "All resources" link at top */
.cat-list-all{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 18px;color:var(--ink);
  border-bottom:1px dashed var(--line);
  cursor:pointer;transition:background .12s;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
.cat-list-all:hover{background:var(--surface-2)}
.cat-list-all.active{background:rgba(212,255,62,.08);color:var(--accent)}
.cat-list-all .num{
  font-family:inherit;font-size:10px;color:var(--ink-dim);
  padding:1px 6px;border-radius:3px;background:var(--bg-2);
}

.trend{padding:14px 18px 18px;display:flex;flex-direction:column;gap:14px}
.trend-item{display:flex;gap:12px;align-items:flex-start}
.trend-item .n{
  font-family:"Fraunces",serif;font-style:italic;font-weight:300;font-size:28px;
  color:var(--accent);line-height:1;min-width:28px;
}
.trend-item h5{font-size:13.5px;margin:0 0 4px;font-weight:500;line-height:1.3;color:var(--ink)}
.trend-item .tm{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink-dim);letter-spacing:.1em}

.cta-widget{
  background:linear-gradient(135deg,var(--accent) 0%, #a8e018 100%);
  color:#0b0b0a;padding:22px;border-radius:var(--radius);
  position:relative;overflow:hidden;
}
.cta-widget::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,transparent 0 18px,rgba(0,0,0,.06) 18px 19px);
  pointer-events:none;
}
.cta-widget h4{
  font-family:"Fraunces",serif;font-weight:500;font-size:24px;line-height:1.1;letter-spacing:-0.01em;
  margin:0 0 8px;position:relative;
}
.cta-widget p{margin:0 0 14px;font-size:13px;opacity:.8;position:relative}
.cta-widget .btn{background:#0b0b0a;color:var(--ink);border-color:#0b0b0a;position:relative}
.cta-widget .btn:hover{background:#000}