/* =========================================================================
   Blocknet home — "There are many reasons to use Blocknet."
   Self-contained on purpose: this page does not load project-hub.css, so the
   fact sheet is rebuilt here instead of importing shared project styles.
   ========================================================================= */

/* The reasons sheet sits between the live metrics and the product map, and
   the product section's top border closes it off with the divider line. */
.blocknet-home-page .blocknet-home-hero {
  grid-template-areas:
    "copy mark"
    "live live"
    "reasons reasons"
    "products products";
}

.blocknet-reasons {
  --reason-color: #4bdcff;
  --reason-rgb: 75, 220, 255;
  grid-area: reasons;
  position: relative;
  margin: 20px 0 4px;
  padding: 20px 0 14px;
  border-top: 1px solid rgba(var(--reason-rgb), 0.16);
}

.blocknet-reasons__head {
  margin-bottom: 14px;
  text-align: center;
}

.blocknet-reasons__head h2 {
  margin: 0;
  color: #f2fbff;
  font-family: "Bahnschrift SemiCondensed", "Aptos Display", "Segoe UI Variable Display", "Trebuchet MS", sans-serif;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.blocknet-reasons__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.blocknet-reason {
  --card-color: var(--reason-color);
  --card-rgb: var(--reason-rgb);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 16px 5px 5px;
  overflow: hidden;
  border: 1px solid rgba(var(--card-rgb), 0.26);
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--card-rgb), 0.16), transparent 62%),
    linear-gradient(150deg, rgba(var(--card-rgb), 0.085), rgba(3, 10, 15, 0.94) 76%);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

/* two accent hues cycling so the row does not look monotone */
.blocknet-reason:nth-child(3n + 2) { --card-color: #55f5ac; --card-rgb: 85, 245, 172; }
.blocknet-reason:nth-child(3n + 3) { --card-color: #ffc857; --card-rgb: 255, 200, 87; }

.blocknet-reason:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--card-rgb), 0.72);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24), 0 0 18px rgba(var(--card-rgb), 0.2);
}

/* Automatic highlight — same rhythm as the Vector, Coinworld and PIVX grids. */
.blocknet-reason.is-auto-active {
  transform: translateY(-2px);
  border-color: rgba(var(--card-rgb), 0.72);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26), 0 0 26px rgba(var(--card-rgb), 0.3);
}

.blocknet-reason svg {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 6px;
  border: 1px solid rgba(var(--card-rgb), 0.34);
  border-radius: 50%;
  color: var(--card-color);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.18), transparent 40%),
    linear-gradient(145deg, rgba(var(--card-rgb), 0.24), rgba(var(--card-rgb), 0.07));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), 0 0 12px rgba(var(--card-rgb), 0.28);
  transition: transform 0.22s ease, background 0.22s ease;
}

.blocknet-reason:hover svg {
  transform: scale(1.06);
  background: rgba(var(--card-rgb), 0.24);
}

.blocknet-reason.is-auto-active svg {
  transform: scale(1.06);
  background: rgba(var(--card-rgb), 0.24);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16), 0 0 18px rgba(var(--card-rgb), 0.4);
}

.blocknet-reason strong {
  color: #eff8fc;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .blocknet-reasons { margin-top: 16px; padding-top: 16px; }
  .blocknet-reasons__grid { gap: 6px; }
  .blocknet-reason { padding: 4px 13px 4px 4px; gap: 8px; }
  .blocknet-reason svg { width: 26px; height: 26px; flex: 0 0 26px; padding: 5px; }
  .blocknet-reason strong { font-size: 0.76rem; }
}

/* ------------------------------------------------------------------
   Topology diagram on the home page.

   The flows used to cover the whole padding box (606px) while the drawing
   grid is 570px, so every line was scaled 1.063 and pushed 18px up: the
   arrows started inside the product cards and ended inside the boxes.
   The SVG now sits exactly on the content box (inset = padding), and the
   grid rows were rebalanced so the infrastructure cards (126px tall) fit
   into their row instead of eating the bottom padding.

   Rows: 170 (products) 74 | 132 (protocol) 58 | 136 (infrastructure) = 570
   Arrow anchors: 0-170 products, 244 protocol top, 376 protocol bottom,
   434 infrastructure top.
   ------------------------------------------------------------------ */

@media (min-width: 901px) {
  .blocknet-home-connect .blocknet-topology {
    grid-template-rows: 170px 74px 132px 58px 136px;
  }

  .blocknet-home-connect .blocknet-topology__flows {
    inset: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blocknet-reason:hover,
  .blocknet-reason:hover svg,
  .blocknet-reason.is-auto-active,
  .blocknet-reason.is-auto-active svg { transform: none; }
}