.trx-certs { padding-block: clamp(var(--space-7), 8vw, var(--space-9)); background: var(--bg-base-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }

/* ── Head ─────────────────────────────────────────────────────────── */
.trx-certs__head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-7); align-items: end; margin-bottom: var(--space-7); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
@media (max-width: 880px) { .trx-certs__head { grid-template-columns: 1fr; gap: var(--space-4); } }
.trx-certs__title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.8vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; margin: var(--space-3) 0 0; max-width: 22ch; }
.trx-certs__head-aside { display: flex; flex-direction: column; gap: var(--space-3); justify-self: end; max-width: 38ch; }
@media (max-width: 880px) { .trx-certs__head-aside { justify-self: start; max-width: none; } }
.trx-certs__lede { font-size: var(--fs-300); color: var(--ink-muted); margin: 0; line-height: 1.55; }
.trx-certs__count { display: inline-flex; align-items: baseline; gap: 10px; }
.trx-certs__count-num { font-family: var(--font-display); font-size: var(--fs-700); color: var(--accent); line-height: 1; letter-spacing: -0.02em; }
.trx-certs__count-label { font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }

/* ── Strip / grid ─────────────────────────────────────────────────── */
.trx-certs__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1024px) { .trx-certs__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .trx-certs__strip { grid-template-columns: 1fr; } }

/* ── Cert card ────────────────────────────────────────────────────── */
.trx-cert {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--space-4); align-items: start;
  padding: var(--space-5); background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-md);
  position: relative; overflow: hidden;
  opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), border-color var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.trx-cert.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .trx-cert { opacity: 1; transform: none; transition: border-color var(--dur-base) var(--ease-out); } }
.trx-cert:hover { border-color: var(--accent); }
.trx-cert::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-base) var(--ease-out); }
.trx-cert:hover::after { transform: scaleY(1); }

/* Seal */
.trx-cert__seal { position: relative; width: 96px; height: 96px; color: var(--brand-primary); }
.trx-cert__seal-ring { width: 100%; height: 100%; animation: trx-cert-rotate 30s linear infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .trx-cert__seal-ring { animation: none; } }
@keyframes trx-cert-rotate { to { transform: rotate(360deg); } }
.trx-cert__seal-core { position: absolute; inset: 14px; border-radius: 999px; background: var(--brand-primary); color: var(--bg-base); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.trx-cert__seal-num { font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.16em; color: var(--secondary-soft); }
.trx-cert__seal-mark { font-size: var(--fs-500); color: var(--accent); line-height: 1; }
.trx-cert:hover .trx-cert__seal { color: var(--accent); }

/* Body */
.trx-cert__body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.trx-cert__family { font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.trx-cert__code { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.7vw, 1.45rem); line-height: 1.1; margin: 4px 0 0; color: var(--ink-primary); letter-spacing: -0.015em; }
.trx-cert__issuer { margin: 0; font-size: var(--fs-200); color: var(--ink-muted); }
.trx-cert__issuer strong { color: var(--ink-primary); font-weight: 500; }
.trx-cert__scope { margin: 0; font-size: var(--fs-200); line-height: 1.55; color: var(--ink-primary); padding-top: var(--space-3); border-top: 1px dashed var(--line); }
.trx-cert__dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0; padding-top: var(--space-3); border-top: 1px dashed var(--line); }
.trx-cert__dates dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 2px; }
.trx-cert__dates dd { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--ink-primary); margin: 0; letter-spacing: 0.02em; }
.trx-cert__verify { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: var(--space-2); padding: 0; font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-primary); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: color var(--dur-fast) var(--ease-out); }
.trx-cert__verify:hover { color: var(--accent); }
.trx-cert__verify svg { transition: transform var(--dur-fast) var(--ease-out); }
.trx-cert__verify:hover svg { transform: translate(2px, -2px); }

/* Foot */
.trx-certs__foot { margin-top: var(--space-7); padding: var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.trx-certs__foot-icon { color: var(--accent); font-size: var(--fs-600); line-height: 1; }
.trx-certs__foot-note { margin: 0; color: var(--ink-muted); font-size: var(--fs-300); line-height: 1.6; max-width: 72ch; }
