/* ===== Tarin animated banner (network city + binary rain) ===== */
.tarin-banner {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 120%, #0d1c3a 0%, #05070B 65%, #05070B 100%);
}
.tarin-banner .tb-bg,
.tarin-banner .tb-rain { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tarin-banner .tb-rain { z-index: 1; }
.tarin-banner .tb-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 220px 50px rgba(0, 0, 0, .92);
  background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, transparent 20%, transparent 58%, rgba(0, 0, 0, .6) 100%);
}

/* ---- top wrap: canvas spans header + hero together ---- */
.tarin-top-wrap { position: relative; }
.tarin-top-wrap > .tarin-banner { position: absolute; inset: 0; z-index: 0; }
.tarin-top-wrap .site-header { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.tarin-top-wrap::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: min(30vh, 260px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, #05070B 92%);
}

.hero.hero--on-banner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 56vh;
  padding-block: var(--space-8) var(--space-9);
}
.hero.hero--on-banner .hero__content { max-width: 640px; }
.hero.hero--on-banner .eyebrow { background: rgba(255, 255, 255, .12); color: #BFDBFF; }
.hero.hero--on-banner .hero__title { color: #fff; }
.hero.hero--on-banner .hero__lead { color: rgba(255, 255, 255, .82); }
.hero.hero--on-banner .btn-ghost { border-color: rgba(255, 255, 255, .35); color: #fff; }
.hero.hero--on-banner .btn-ghost:hover { border-color: #fff; }

/* ---- sparse static network motif for the rest of the page ---- */
.motion-bg__network { position: absolute; inset: 0; width: 100%; height: 100%; }