/* =========================================
   EXTRA DIRECTIONS (Ticker + grid)
   ========================================= */
#extra{background:var(--bg);padding-bottom:80px}
.ticker-outer{
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:14px 0;
  margin:40px -60px 60px;
}
.ticker-track{
  display:flex;gap:0;
  animation:scroll-ticker 30s linear infinite;
  width:max-content;
}
.ticker-item{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--text3);
  padding:0 48px;white-space:nowrap;
  display:flex;align-items:center;gap:24px;
}
.ticker-sep{display:block;width:3px;height:3px;background:var(--accent);border-radius:50%;flex-shrink:0}
@keyframes scroll-ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.extra-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  border:1px solid var(--border);
}
.extra-card{
  background:
    linear-gradient(var(--bg2),var(--bg2)) padding-box,
    linear-gradient(135deg,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.12) 38%,rgba(255,255,255,0.05) 66%,rgba(255,255,255,0) 100%) border-box;
  padding:24px 22px;
  transition:background 0.2s;
  cursor:default;
  border:1px solid transparent;
  border-radius:24px;
}
.extra-card:hover{
  background:
    linear-gradient(var(--bg3),var(--bg3)) padding-box,
    linear-gradient(135deg,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.12) 38%,rgba(255,255,255,0.05) 66%,rgba(255,255,255,0) 100%) border-box;
}
.extra-card-num{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;color:var(--text4);letter-spacing:1.5px;
  margin-bottom:12px;
}
.extra-card-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.3}
.extra-card-desc{font-size:12px;color:var(--text3);line-height:1.55}