/* ---------- hero ---------- */
header{border-bottom:1px solid var(--line)}
.hero{padding:110px 0 80px;display:grid;grid-template-columns:1fr;gap:28px}
.kicker{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
}
h1{
  font-size:clamp(2.1rem,8.5vw,5rem);font-weight:700;line-height:1.06;
  letter-spacing:-.03em;text-transform:uppercase;overflow-wrap:break-word;
}
h1 em{font-style:normal;color:var(--accent)}

/* hero: lines 1–2 fade up; line 3 is typed out on load with a trailing "_" cursor */
.term-h1 .line{
  display:block;
  opacity:0;transform:translateY(14px);
  animation:heroLine .55s cubic-bezier(.22,.61,.36,1) forwards;
}
.term-h1 .line:nth-child(1){animation-delay:.06s}
.term-h1 .line:nth-child(2){animation-delay:.24s}

/* line 3 is typed by JS: no fade, hidden until typing starts (noscript reveals if JS off) */
.term-h1 .type-line{opacity:1;transform:none;animation:none;visibility:hidden}
/* keep the trailing word + cursor together so the "_" never orphans on a wrap */
.term-h1 .type-line .nb{white-space:nowrap}

/* the underscore cursor rides the typing edge — solid while typing… */
.term-h1 .type-line .cur{
  display:inline-block;
  width:.5em;height:.08em;margin-left:.1em;vertical-align:.04em;
  background:var(--accent);
}
/* …and blinks while waiting and once the line is finished */
.term-h1 .type-line.caret-blink .cur{animation:heroCaret 1.06s steps(1,end) infinite}

@keyframes heroLine{to{opacity:1;transform:none}}
@keyframes heroCaret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .term-h1 .line{opacity:1;transform:none;animation:none}
  .term-h1 .type-line{visibility:visible}
  .term-h1 .type-line .cur,
  .term-h1 .type-line.caret-blink .cur{animation:none}
}
.hero p.sub{max-width:640px;color:var(--ink-2);font-size:1.05rem}
.hero-meta{
  display:flex;gap:28px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.8rem;color:var(--ink-3);
}
.hero-meta b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
@media(max-width:720px){.hero{padding:72px 0 56px;gap:22px}.hero p.sub{font-size:1rem}}
/* tighten the heading a touch on phones so the typed line fits on one row down to ~360px */
@media(max-width:480px){h1{letter-spacing:-.045em}}