#metrics { position: relative; isolation: isolate; overflow: hidden; padding: 88px 40px 128px; background: #f8fafc; }
#metrics::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('../images/home-metrics-city-v0927.webp') center bottom / cover no-repeat; opacity: .7; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 90%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 90%, transparent); }
#metrics .metrics-grid { max-width: 1200px; gap: 32px; }
#metrics .metric-card { padding: 20px 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
#metrics .metric-card:hover { transform: none; box-shadow: none; }
#metrics .metric-line { display: flex; justify-content: center; align-items: baseline; min-height: 76px; white-space: nowrap; color: var(--electric); }
#metrics .metric-value, #metrics .metric-prefix { font-size: 60px; font-weight: 700; line-height: 1.2; letter-spacing: 0; margin: 0; color: #008aff; font-family: "DIN Alternate",system-ui,sans-serif; font-variant-numeric: tabular-nums; }
#metrics .metric-unit { font-size: 30px; font-weight: 600; color: #008aff; }
#metrics .metric-label { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--ink-3); }
@media(max-width: 768px) {
    #metrics { padding: 56px 20px 104px; }
    #metrics::before { background-size: auto 280px; opacity: .5; }
    #metrics .metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 16px; }
    #metrics .metric-line { min-height: 54px; }
    #metrics .metric-value, #metrics .metric-prefix { font-size: 42px; }
    #metrics .metric-unit { font-size: 22px; }
    #metrics .metric-label { font-size: 15px; margin-top: 10px; }
}