/* Small site-specific layer on top of Apollo. The layout and components come from the Apollo theme. */
.homepage-hero {
  position: relative;
  overflow: hidden;
  margin: 2rem 0 3rem;
  padding: clamp(2.25rem, 7vw, 5rem);
  border: 1px solid rgba(77, 190, 166, .35);
  border-radius: 18px;
  text-align: left;
  color: #e8faf3;
  background: radial-gradient(circle at 84% 14%, rgba(19, 125, 111, .42), transparent 19rem), radial-gradient(circle at 10% 100%, rgba(39, 79, 125, .34), transparent 24rem), #071b1a;
  box-shadow: 0 24px 70px rgba(3, 32, 29, .22);
}
.homepage-hero::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(116, 221, 198, .14);
  border-radius: 12px;
  background-image: linear-gradient(rgba(116, 221, 198, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 221, 198, .075) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(120deg, black, transparent 82%);
  pointer-events: none;
}
.homepage-kicker { position: relative; margin: 0 0 2rem; color: #74d8bf; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; font-weight: 800; letter-spacing: .15em; }
.homepage-kicker span { margin-left: .65rem; padding: .22rem .42rem; border: 1px solid rgba(116, 221, 198, .4); border-radius: 4px; font-size: .58rem; }
.homepage-hero h1 { position: relative; max-width: 720px; margin: 0 0 1.4rem; color: #f2fff9; font-size: clamp(2.8rem, 8vw, 5.8rem); font-weight: 760; line-height: 1.02; letter-spacing: -.07em; }
.homepage-hero h1 em { display: block; color: #63d3b9; font-style: normal; }
.homepage-lede { position: relative; max-width: 610px; margin: 0; color: rgba(232, 250, 243, .7); font-size: 1.05rem; line-height: 1.9; }
.homepage-actions { position: relative; display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-top: 2rem; }
.homepage-actions a:first-child { padding: .72rem 1rem; border: 1px solid #71dec4; border-radius: 5px; color: #06211e; background: #71dec4; font-weight: 800; }
.homepage-actions a:first-child:hover { color: #06211e; background: #a1f0dc; text-decoration: none; }
.homepage-actions a:last-child { color: rgba(232, 250, 243, .78); font-weight: 700; }
.homepage-actions a:last-child:hover { color: #fff; }
.homepage-stats { position: relative; display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 3.8rem; color: rgba(232, 250, 243, .45); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; letter-spacing: .12em; }
.homepage-stats span { display: flex; flex-direction: column; gap: .15rem; }
.homepage-stats strong { color: #f2fff9; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 500; letter-spacing: -.04em; }
.body img { max-width: 100%; height: auto; border-radius: 8px; }
.body a { text-underline-offset: 3px; }
.meta .post-tag { white-space: nowrap; }
@media (max-width: 600px) {
  .homepage-hero { margin-top: 1rem; padding: 2rem 1.25rem 2.2rem; }
  .homepage-hero::before { inset: 8px; }
  .homepage-kicker { font-size: .58rem; }
  .homepage-hero h1 { font-size: clamp(2.65rem, 14vw, 4.2rem); }
  .homepage-lede { font-size: .95rem; }
  .homepage-stats { gap: 1.4rem; margin-top: 2.8rem; }
}