@keyframes pulse { 50% { transform: scale(1.08); } }
.hero { flex: 1 1 auto; align-items: center; justify-content: center; max-width: 1100px; min-height: 0; padding: 1rem 6vw; text-align: center; }
.hero { display: flex; flex-direction: column; }
.heroTitle { max-width: 100%; margin: 0 0 clamp(1rem, 3.5dvh, 2.2rem); font-size: clamp(1.4rem, 3.4vw, 2.9rem); line-height: 1.3; text-wrap: balance; }
.heroTitle .line { display: block; }
.network { flex: 0 1 auto; width: auto; max-width: min(440px, 86vw); height: min(40dvh, 320px); margin: 0 auto; overflow: visible; aspect-ratio: 4 / 3; }
.network line { stroke: var(--colorInk); stroke-width: 4; stroke-linecap: round; }
.network circle { fill: var(--colorInk); }
.networkCore { transform-box: view-box; transform-origin: 200px 150px; animation: pulse var(--loop) ease-in-out infinite; }
html.isHome, html.isHome body { overflow: hidden; }
html.isHome { height: 100dvh; }
html.isHome body { height: 100%; min-height: 0; }
.siteFooter { flex: none; padding: 1.1rem 6vw calc(1.1rem + var(--safeBottom)); font-size: .85rem; text-align: center; }
.siteFooter p { margin: 0; opacity: .75; }
@media (max-width: 640px) {
  .hero { padding: .75rem 7vw; }
  .heroTitle { font-size: clamp(1.35rem, 6.4vw, 1.9rem); }
  .heroTitle .line { display: inline; }
  .network { height: min(34dvh, 260px); }
  .siteFooter { padding-top: .9rem; font-size: .8rem; }
}
@media (max-height: 520px) {
  html.isHome { height: auto; min-height: 100dvh; overflow: auto; }
  html.isHome body { height: auto; overflow: visible; }
  .hero { padding: 1.5rem 6vw; }
  .network { height: 200px; }
}