@property --counter-fill { syntax: "<percentage>"; inherits: false; initial-value: 100%; }

/* BlueSky network counters: photographic surfaces with tailored translucent overlays. */
.network-proof { position: relative; isolation: isolate; max-width: 1180px; margin: 42px auto; padding: 8px 24px 0; }
.network-proof::before { content: ""; position: absolute; z-index: -1; inset: 42px -20px 4px; border-radius: 48px; background: radial-gradient(ellipse at 15% 50%, rgba(5,195,249,.18), transparent 49%), radial-gradient(ellipse at 88% 48%, rgba(255,85,126,.11), transparent 48%); pointer-events: none; }
.network-proof-heading { text-align: center; margin-bottom: 28px; }
.network-proof-heading .section-kicker { color: var(--coral); }
.network-proof-heading h2 { margin: 10px 0 0; color: var(--cobalt); font-size: clamp(24px, 3vw, 36px); line-height: 1.2; letter-spacing: -.035em; }
.network-proof-heading h2 span { color: var(--coral); }
.network-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.network-proof-card { position: relative; overflow: hidden; display: grid; grid-template-rows: 68px 44px 39px; row-gap: 8px; align-content: center; padding: 32px 20px; text-align: center; border: 1px solid rgba(255,255,255,.88); border-radius: 24px; background-color: #edf4fa; background-image: var(--counter-overlay), var(--counter-image); background-size: cover; background-position: center, var(--counter-position, center); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(5,14,61,.035), 0 16px 36px -16px rgba(5,14,61,.21), 0 2px 8px rgba(5,14,61,.035); transition: transform .35s ease, box-shadow .35s ease; }
.network-proof-card-members { --counter-image: url("assets/network-canadian-flag.webp"); background-size: cover, max(180%, 320px) auto; --counter-position: 49% 54%; --counter-overlay: linear-gradient(180deg, rgba(247,251,255,.59), rgba(247,251,255,.73) 48%, rgba(250,252,255,.94)); }
.network-proof-card-markets { --counter-image: url("assets/network-bc-flag-sunrise.jpg"); background-size: cover, cover; --counter-position: 63% 48%; --counter-overlay: linear-gradient(180deg, rgba(247,251,255,.59), rgba(247,251,255,.73) 48%, rgba(250,252,255,.94)); }
.network-proof-card-experience { --counter-image: url("assets/network-experience-sunset.webp"); background-size: cover, max(140%, 450px) auto; --counter-position: 100% center; --counter-overlay: linear-gradient(180deg, rgba(255,250,248,.49), rgba(255,250,248,.71) 48%, rgba(255,252,250,.95)); }
.network-proof-card::before { content: ""; position: absolute; height: 1px; inset: 0 18% auto; background: linear-gradient(90deg, transparent, rgba(5,195,249,.7), transparent); }
.network-proof-card::after { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; right: -80px; top: -90px; background: radial-gradient(circle, rgba(255,255,255,.75), transparent 68%); pointer-events: none; }
.network-proof-number { --counter-fill: 100%; display: block; font-size: clamp(42px, 5.3vw, 68px); font-weight: 800; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; color: transparent; background: linear-gradient(to top, #050e3d 0%, #263858 var(--counter-fill), #fff var(--counter-fill), #fff 100%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 1px 1px rgba(5,14,61,.06); transition: --counter-fill 1.1s ease, text-shadow 1.1s ease; }
.network-proof.is-counting .network-proof-number { --counter-fill: 0%; text-shadow: 0 2px 5px rgba(5,14,61,.32), 0 8px 20px rgba(5,14,61,.12); transition: none; }
.network-proof-card h3 { color: var(--cobalt); display: flex; align-items: center; justify-content: center; margin: 0; font-size: 16px; line-height: 1.35; letter-spacing: -.015em; }
.network-proof-card p { margin: 0; color: #59576a; font-size: 13px; line-height: 1.5; }
.network-proof-source { margin: 18px auto 0; max-width: 960px; color: #625e6c; font-size: 12px; line-height: 1.7; }
.network-proof-source summary { width: fit-content; margin: auto; padding: 6px 8px; cursor: pointer; }
.network-proof-source summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.network-proof-source p { margin: 10px 0; }
.network-proof-source a { color: var(--cobalt); }
.network-proof-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .network-proof-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, 0 22px 42px -17px rgba(5,14,61,.23), 0 3px 10px rgba(5,14,61,.04); } }
@media (max-width: 600px) {
  .network-proof { margin: 32px auto; padding: 0 16px; }
  .network-proof::before { inset: 40px 0 4px; border-radius: 24px; }
  .network-proof-heading { margin-bottom: 20px; }
  .network-proof-grid { gap: 9px; }
  .network-proof-card { border-radius: 18px; padding: 25px 7px 20px; grid-template-rows: 46px 36px 48px; row-gap: 6px; }
    .network-proof-number { font-size: clamp(32px, 9.5vw, 46px); line-height: 46px; }
  .network-proof-card h3 { font-size: 12px; }
  .network-proof-card p { font-size: 11px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) { .network-proof-card, .network-proof-number { transition: none; } }

.network-proof-invitation { margin: 24px 0 0; text-align: center; color: #59576a; font-size: 14px; line-height: 1.7; }
.network-proof-invitation a { display: inline-block; margin-left: 5px; color: var(--cobalt); font-weight: 700; text-decoration: none; }
.network-proof-invitation a span { color: var(--coral); }
.network-proof-invitation a:hover { text-decoration: underline; text-underline-offset: 4px; }
.network-proof-invitation a:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 3px; }
@media (max-width: 600px) { .network-proof-invitation { font-size: 13px; margin-top: 20px; } }

.network-proof-reach { font-size: clamp(30px, 3.4vw, 46px); line-height: 68px; letter-spacing: -.045em; }
@media (max-width: 600px) { .network-proof-reach { font-size: clamp(19px, 5vw, 28px); line-height: clamp(32px, 9.5vw, 46px); white-space: nowrap; } }