body {
  margin: 0;
  min-height: 100vh;
  opacity: 0;
  overflow-x: hidden;
  background: rgb(8,8,8);
  color: rgb(205,205,205);
  font-family: Arial, Helvetica, sans-serif;
  transition: opacity var(--ares-motion-deliberate, 900ms) ease, filter var(--ares-motion-deliberate, 900ms) ease;
  filter: blur(2px);
}
body.is-ready { opacity: 1; filter: blur(0); }
body.is-exiting { opacity: 0; filter: blur(1.5px); }
.network-overlay {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(7,7,7,0.89), rgba(4,4,4,0.97)),
    url('../IMG-SITE/collage-mockup-shuffled-tiles.jpg') center top / cover fixed;
}
.network-panel {
  width: min(1040px, 100%);
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid var(--ares-border, rgba(255,255,255,0.18));
  background: var(--ares-overlay, rgba(18,18,18,0.94));
  box-shadow: 0 28px 80px rgba(0,0,0,0.76);
  padding: 26px;
}
.network-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.11); }
.network-kicker { margin: 0 0 8px; color: rgb(128,128,128); font-size: 0.72rem; letter-spacing: 0.19em; line-height: 1.5; text-transform: uppercase; }
.network-title { margin: 0; color: rgb(224,224,224); font-size: 22px; font-weight: normal; letter-spacing: 0.12em; line-height: 1.25; text-transform: uppercase; }
.network-count { margin: 0; color: rgb(116,139,178); font-size: 0.78rem; letter-spacing: 0.16em; line-height: 1.5; text-align: right; text-transform: uppercase; }
.network-intro { max-width: 850px; margin: 22px 0 4px; color: rgb(174,174,174); font-size: 1rem; letter-spacing: var(--ares-copy-letter-spacing, 0.035em); line-height: var(--ares-copy-line-height, 1.78); }
.connection-groups { position: relative; margin-top: 28px; }
.connection-groups::before { content: ''; position: absolute; top: 0; bottom: 0; left: 8px; width: 1px; background: linear-gradient(180deg, transparent, rgba(84,116,170,0.55) 3%, rgba(255,255,255,0.14) 50%, rgba(84,116,170,0.45) 97%, transparent); }
.connection-group { position: relative; padding: 0 0 32px 36px; }
.connection-group:last-child { padding-bottom: 0; }
.connection-group::before { content: ''; position: absolute; left: 2px; top: 6px; width: 13px; height: 13px; box-sizing: border-box; border: 1px solid rgba(126,161,220,0.72); border-radius: 50%; background: radial-gradient(circle, rgb(102,133,185) 0 24%, rgb(18,25,38) 28% 100%); box-shadow: 0 0 16px rgba(66,105,174,0.4); }
.connection-heading { margin: 0 0 13px; color: rgb(183,197,221); font-size: 0.84rem; font-weight: normal; letter-spacing: 0.17em; line-height: 1.5; text-transform: uppercase; }
.connection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.connection-card { position: relative; min-width: 0; border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(135deg, rgba(38,55,82,0.15), rgba(15,15,15,0.82) 42%); padding: 15px 16px 16px; }
.connection-card::before { content: ''; position: absolute; left: -20px; top: 24px; width: 19px; height: 1px; background: rgba(89,119,170,0.30); }
.connection-name { margin: 0 0 7px; color: rgb(203,203,203); font-size: 0.82rem; font-weight: normal; letter-spacing: 0.13em; line-height: 1.45; text-transform: uppercase; }
.connection-meta { display: block; margin-top: 3px; color: rgb(113,136,176); font-size: 0.7rem; letter-spacing: 0.11em; }
.connection-copy { margin: 0; color: rgb(164,164,164); font-size: 1rem; letter-spacing: var(--ares-copy-letter-spacing, 0.035em); line-height: var(--ares-copy-line-height, 1.78); }
.network-actions { margin-top: 30px; padding-top: var(--ares-space-4, 16px); border-top: 1px solid var(--ares-border-soft, rgba(255,255,255,0.10)); text-align: center; }
.network-return { display: inline-block; border: 1px solid var(--ares-border, rgba(255,255,255,0.18)); background: var(--ares-surface, rgb(14,14,14)); color: var(--ares-text-secondary, rgb(174,174,174)); padding: 11px 16px; font-size: 0.72rem; letter-spacing: 0.14em; text-decoration: none; text-transform: uppercase; transition: border-color var(--ares-motion-brief, 240ms) ease, background var(--ares-motion-brief, 240ms) ease, color var(--ares-motion-brief, 240ms) ease; }
.network-return:hover, .network-return:focus, .network-return:focus-visible { border-color: rgba(126,161,220,0.58); background: rgb(19,23,30); color: rgb(222,228,238); outline: none; }
@media (max-width: 760px) {
  .network-overlay { padding: 14px; }
  .network-panel { padding: 18px; }
  .network-header { grid-template-columns: 1fr; gap: 12px; }
  .network-count { text-align: left; }
  .connection-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { body { transition-duration: 1ms; } }