.proj-hero { padding: clamp(80px, 12vh, 140px) 0 var(--s-6); }
.proj-hero h1 { font-size: clamp(60px, 10vw, 160px); line-height: 0.94; letter-spacing: -0.035em; }
.proj-hero h1 em { color: var(--violet); font-style: italic; font-variation-settings: "opsz" 144; }
.proj-hero .lead { max-width: 60ch; font-size: 18px; color: var(--lumen-2); margin-top: var(--s-4); }

.proj-stat-row {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.proj-stat {
  padding: 22px;
  border-radius: var(--r-3);
}
.proj-stat .num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 380;
  font-size: 56px;
  line-height: 1;
  color: var(--lumen);
  letter-spacing: -0.03em;
}
.proj-stat .num em { color: var(--violet); font-style: italic; }
.proj-stat .label {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono-up);
  text-transform: uppercase;
  color: var(--fg-muted);
}
@media (max-width: 760px) { .proj-stat-row { grid-template-columns: 1fr 1fr; } }

/* Index list */
.proj-list {
  margin-top: var(--s-7);
  border-top: var(--border);
}
.proj-row {
  display: grid;
  grid-template-columns: 80px 1.4fr 2fr 200px 28px;
  gap: var(--s-4);
  padding: 22px 14px;
  border-bottom: var(--border);
  align-items: center;
  text-decoration: none;
  border-left: 0; border-right: 0;
  color: var(--lumen);
  transition: background var(--dur-quick) var(--ease-out);
  position: relative;
}
.proj-row:hover {
  background: rgba(255,255,255,0.025);
  color: var(--lumen);
}
.proj-row:hover .arr { transform: translate(4px, -4px); color: var(--violet); }
.proj-row .idx {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-mono-up);
  color: var(--violet);
}
.proj-row .title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 380;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--lumen);
}
.proj-row .title em { color: var(--violet); font-style: italic; }
.proj-row .desc {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lumen-3);
  text-wrap: pretty;
}
.proj-row .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono-up);
  text-transform: uppercase;
  color: var(--fg-muted);
  display: grid; gap: 4px;
}
.proj-row .meta .yr { color: var(--lumen); }
.proj-row .arr {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--lumen-3);
  transition: transform var(--dur-base) var(--ease-spring), color var(--dur-quick) var(--ease-out);
  text-align: right;
}
@media (max-width: 1100px) {
  .proj-row { grid-template-columns: 50px 1fr 28px; }
  .proj-row .desc, .proj-row .meta { display: none; }
}

/* Tech */
.tech-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--s-4);
}

/* Cert badges */
.certs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.cert {
  padding: var(--s-4);
  border-radius: var(--r-3);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 160px;
}
.cert .badge {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(139,92,255,0.30) 0%, rgba(139,92,255,0.05) 100%);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  color: var(--lumen);
  font-size: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.cert .name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--lumen);
  line-height: 1.3;
}
.cert .iss {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono-up);
  text-transform: uppercase;
  color: var(--fg-muted);
}
@media (max-width: 1100px) { .certs { grid-template-columns: 1fr 1fr; } }

/* Education */
.edu {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-3);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: center;
}
.edu h5 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 380;
  font-size: 32px;
  line-height: 1;
  color: var(--lumen);
  letter-spacing: -0.02em;
}
.edu .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono-up);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 8px;
}
.edu .yr {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--violet);
  letter-spacing: var(--tr-mono-up);
  text-transform: uppercase;
}