/* ─── Hero ─── */
.hero-grid {
  background-image:
    linear-gradient(rgba(14,12,9,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,12,9,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.hero-name {
  font-family: 'Zodiak-Variable', serif;
  line-height: 0.87;
  letter-spacing: -0.03em;
}

/* ─── Status dot ─── */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.5; }
}
.status-dot {
  width: 7px; height: 7px; background: #4a9a60;
  border-radius: 50%; animation: pulse-dot 2.2s ease-in-out infinite;
}

/* ─── Project cards ─── */
.proj-card { transition: transform 0.4s ease; }
.proj-card:hover { transform: translateY(-5px); }

/* ─── Tag pills ─── */
.tag {
  display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid;
  font-size: 11px; font-family: 'DM Mono', monospace; white-space: nowrap;
}

/* ─── Company timeline node ─── */
.timeline-node::before {
  content: '';
  position: absolute; top: 50%; left: -1px;
  width: 9px; height: 9px; background: #4a9a60;
  border-radius: 50%; transform: translateY(-50%);
  border: 2px solid #1C1814;
}

/* ─── Load animations ─── */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.anim-1 { animation: fadeInUp 0.7s ease 0.1s both; }
.anim-2 { animation: fadeInUp 0.7s ease 0.25s both; }
.anim-3 { animation: fadeInUp 0.7s ease 0.4s both; }
.anim-4 { animation: fadeInUp 0.7s ease 0.6s both; }

/* ─── Resume print ─── */
@media print {
  #main-nav, .no-print { display: none !important; }
  body { background: white; color: black; }
  .print-page { padding: 0 !important; margin: 0 !important; }
}