/* Vinteo observatory: one particle scene and five readable metric panels. */
.v-landing .v-stats-section { position: relative; z-index: 1; isolation: isolate; overflow: hidden; box-sizing: border-box; width: 100%; padding: clamp(76px, 7vw, 110px) 24px 72px; color: #eff8f2; background: #000; scroll-margin-top: 96px; }
.v-stats-atmosphere { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; mask-image: linear-gradient(transparent, #000 20%, #000 75%, transparent); }
.v-stats-atmosphere > svg { width: 100%; height: 100%; opacity: .28; }
.v-stats-sparkles { animation: v-stats-twinkle 8s ease-in-out infinite alternate; }
.v-stats-sparkles-1 { animation-delay: -3s; }
.v-stats-sparkles-2 { animation-delay: -6s; }
.v-stats-content { position: relative; max-width: 1240px; margin: 0 auto; }
.v-stats-heading { text-align: center; margin: 0 auto 40px; }
.v-stats-eyebrow { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 18px; font: 600 .6875rem/1.5 'Satoshi', sans-serif; color: #a6b8ad; letter-spacing: .15em; text-transform: uppercase; }
.v-stats-signal { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #9bf2bb; box-shadow: 0 0 8px #06be5280; }
.v-landing .v-stats-heading h2 { margin: 0; color: #f1f9f4; font-family: 'Clash Display', 'Satoshi', system-ui, sans-serif; font-size: clamp(2.125rem, 4vw, 3.375rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.13; text-wrap: balance; }
.v-stats-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; }
.v-stats-metric { --stats-x: 50%; --stats-y: 0%; position: relative; isolation: isolate; grid-column: span 3; min-width: 0; min-height: 166px; padding: 25px 26px 24px; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; border: 1px solid #d5e9df1b; border-radius: 22px; background: linear-gradient(135deg, #0b100dd9, #040605f5 70%); box-shadow: inset 0 1px 0 #d8ffe809, 0 12px 40px #0004; transition: border-color .35s, transform .35s, box-shadow .35s; }
.v-stats-metric::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(240px circle at var(--stats-x) var(--stats-y), #49dd8524, transparent 78%); opacity: 0; transition: opacity .4s; }
.v-stats-metric::after { content: ''; position: absolute; pointer-events: none; inset: 0 16% auto; height: 1px; background: linear-gradient(90deg, transparent, #9ffbc858, transparent); opacity: .35; }
.v-stats-metric dd { order: 1; position: relative; z-index: 1; margin: 0; font: 600 clamp(1.875rem, 2.8vw, 2.625rem)/1.1 'Clash Display', 'Satoshi', sans-serif; letter-spacing: -.035em; word-spacing: .035em; color: #edf7f0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-stats-metric dt { order: 2; position: relative; z-index: 1; max-width: 100%; margin-top: 9px; color: #a4b2a9; font-size: .78125rem; font-weight: 400; line-height: 1.5; text-wrap: pretty; }
.v-stats-icon { order: 0; position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; margin-bottom: 19px; color: #a1efbc; }
.v-stats-icon::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; background: radial-gradient(circle, #06be521b, transparent 75%); }
.v-stats-icon svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.v-stats-icon-lines { fill: none; stroke: currentColor; stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.v-stats-icon-stardust { fill: none; stroke: #edfff4; stroke-width: .7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .1 3.7; opacity: .4; }
.v-stats-icon-nodes { filter: drop-shadow(0 0 1.8px #b9fbd799); }
.v-stats-icon-sparks { animation: v-stats-icon-shimmer 5.5s ease-in-out infinite alternate; filter: drop-shadow(0 0 2px #bcffd866); }
.v-stats-metric:nth-child(2n) .v-stats-icon-sparks { animation-delay: -2s; }
.v-stats-metric:nth-child(3n) .v-stats-icon-sparks { animation-delay: -4s; }
.v-stats-metric--featured { grid-column: span 6; grid-row: span 3; min-height: 558px; padding: 38px 40px; border-color: #b4edca30; border-radius: 28px; background: radial-gradient(ellipse at 65% 80%, #06140c70, transparent 56%), linear-gradient(145deg, #090d0b, #020303 55%); }
.v-stats-metric--featured::after { inset-inline: 14%; background: linear-gradient(90deg, transparent, #9bfcc5ad, transparent); opacity: 1; }
.v-stats-metric--featured::before { background: radial-gradient(400px circle at var(--stats-x) var(--stats-y), #41e67e1a, transparent 80%); }
.v-stats-metric--featured .v-stats-icon { width: 34px; height: 34px; margin-bottom: 19px; }
.v-stats-metric--featured dd { font-family: 'Clash Display', 'Satoshi', sans-serif; font-size: clamp(4rem, 7.4vw, 6.5rem); font-weight: 600; letter-spacing: -.045em; word-spacing: .015em; line-height: 1; color: #b6f5cb; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) { .v-stats-metric--featured dd { background: linear-gradient(110deg, #f1fff6 5%, #b3f5cc 55%, #42dc7c); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } }
.v-stats-metric--featured dt { margin-top: 12px; color: #c1d4c7; font-size: .9375rem; }
.v-stats-universe { position: absolute; inset: 32% -6% -8%; z-index: 0; pointer-events: none; mask-image: linear-gradient(transparent, #000 14%); }
.v-stats-universe canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.v-stats-universe-fallback { position: absolute; width: 46%; aspect-ratio: 1; left: 37%; top: 33%; border-radius: 50%; border: 1px solid #71edab40; background: radial-gradient(circle at 30% 20%, #76edaa29, #081e1270 38%, #000 70%); box-shadow: -10px -5px 45px #24de6814; }
.v-stats-universe[data-renderer="ready"] .v-stats-universe-fallback { display: none; }
.v-stats-metric--community { grid-column: span 6; justify-content: center; padding: 28px 34px; min-height: 154px; background: radial-gradient(ellipse at 100% 0, #11241945, transparent 70%), #070a08; }
.v-stats-metric--community dd { font-size: clamp(2.5rem, 4.2vw, 3.75rem); }
.v-stats-metric--community dt { font-size: .875rem; }
.v-stats-metric--community .v-stats-icon { position: absolute; right: 36px; top: 50%; width: 52px; height: 52px; margin: 0; transform: translateY(-50%); }
.v-stats-metric--community .v-stats-icon::before { inset: -23px; border: 1px solid #9ae5b71a; box-shadow: 0 0 0 16px #82e3a906, 0 0 0 35px #82e3a904; }
.v-stats-update { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; margin: 28px 0 0; text-align: center; color: #819287; font-size: .6875rem; line-height: 1.65; }
.v-stats-update time { font-variant-numeric: tabular-nums; }
.v-stats-fallback { margin: 46px 0; text-align: center; color: #a6b8ad; font-size: 1rem; line-height: 1.6; }
@media (hover: hover) { .v-stats-metric:hover { border-color: #8deab453; box-shadow: inset 0 1px 0 #d8ffe814, 0 18px 45px #0006; transform: translateY(-3px); } .v-stats-metric:hover::before { opacity: 1; } .v-stats-metric:hover .v-stats-icon { color: #d9ffe7; } }
@keyframes v-stats-twinkle { from { opacity: .35; } to { opacity: .9; } }
@keyframes v-stats-icon-shimmer { from { opacity: .45; } to { opacity: 1; } }
@media (max-width: 1000px) {
 .v-stats-metric { padding: 23px 19px; }
 .v-stats-metric--featured { padding: 34px 28px; }
 .v-stats-metric--community { padding: 26px; }
 .v-stats-metric dd { font-size: clamp(1.625rem, 3.2vw, 2rem); }
 .v-stats-metric--featured dd { font-size: clamp(3.5rem, 7.2vw, 5rem); }
 .v-stats-metric--community dd { font-size: 3.25rem; }
}
@media (max-width: 760px) {
 .v-landing .v-stats-section { padding: 68px 20px 52px; scroll-margin-top: 164px; }
 .v-stats-content { max-width: 620px; }
 .v-stats-heading { margin-bottom: 30px; }
 .v-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 .v-stats-metric { grid-column: span 1; padding: 23px 22px; min-height: 176px; border-radius: 19px; }
 .v-stats-metric dd { font-size: clamp(1.875rem, 5.7vw, 2.625rem); }
 .v-stats-metric--featured { grid-column: 1 / -1; grid-row: auto; min-height: 480px; padding: 30px 32px; border-radius: 24px; }
 .v-stats-metric--featured dd { font-size: clamp(4.5rem, 13vw, 6rem); }
 .v-stats-metric--featured dt { font-size: .875rem; }
 .v-stats-metric--community { grid-column: 1 / -1; min-height: 136px; padding: 25px 30px; }
 .v-stats-metric--community dd { font-size: 3rem; }
 .v-stats-metric--community .v-stats-icon { width: 46px; height: 46px; right: 32px; }
 .v-stats-universe { inset: 28% -8% -10%; }
}
@media (max-width: 480px) {
 .v-landing .v-stats-section { padding-inline: 16px; }
 .v-stats-eyebrow { font-size: .5625rem; letter-spacing: .12em; margin-bottom: 16px; }
 .v-landing .v-stats-heading h2 { font-size: 2rem; }
 .v-stats-grid { gap: 10px; }
 .v-stats-metric { padding: 21px 17px; min-height: 166px; }
 .v-stats-metric dd { font-size: clamp(1.625rem, 7.15vw, 2rem); letter-spacing: -.04em; }
 .v-stats-metric dt { font-size: .6875rem; line-height: 1.5; }
 .v-stats-icon { width: 29px; height: 29px; margin-bottom: 16px; }
 .v-stats-metric--featured { min-height: 430px; padding: 28px; }
 .v-stats-metric--featured dd { font-size: clamp(3.75rem, 17.5vw, 5rem); letter-spacing: -.045em; }
 .v-stats-metric--featured dt { font-size: .8125rem; }
 .v-stats-metric--community { min-height: 132px; padding: 23px 27px; }
 .v-stats-metric--community dd { font-size: 2.875rem; }
 .v-stats-metric--community dt { font-size: .78125rem; }
 .v-stats-metric--community .v-stats-icon { width: 42px; height: 42px; right: 30px; }
 .v-stats-update { margin-top: 24px; font-size: .625rem; }
 .v-stats-update > span:first-child { flex-basis: 100%; }
 .v-stats-update > span[aria-hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
 .v-stats-sparkles, .v-stats-icon-sparks { animation: none; }
 .v-stats-metric, .v-stats-metric::before { transition: none; }
 .v-stats-metric:hover { transform: none; }
}
@media (forced-colors: active) {
 .v-stats-atmosphere, .v-stats-universe, .v-stats-icon, .v-stats-signal, .v-stats-metric::before, .v-stats-metric::after { display: none; }
 .v-landing .v-stats-section, .v-stats-metric { background: Canvas; color: CanvasText; border-color: CanvasText; }
 .v-stats-metric dd, .v-stats-metric--featured dd, .v-stats-metric dt, .v-landing .v-stats-heading h2 { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}