.rubric-service-page .national-hub-kpi { grid-template-columns: repeat(var(--hub-kpi-columns,4),minmax(0,1fr)); }
.rubric-service-page .national-hub-kpi .road-kpi__item { min-height: 112px; }
.rubric-service-page .national-hub-kpi strong { font-size: 25px; }
.national-hub-summary { display: grid; gap: 36px; min-width: 0; }
.national-hub-section-head { margin-bottom: 26px; }
.national-hub-section-head h3, .national-hub-situations h3 { margin: 0; color: #122338; font-size: 21px; line-height: 1.45; font-weight: 500; }
.national-hub-section-head p { max-width: 1000px; margin: 10px 0 0; color: #586d84; font-size: 15px; line-height: 1.75; }
.national-hub-geography { display: grid; grid-template-columns: 260px minmax(0,1fr); align-items: center; gap: 28px 44px; margin: 0; }
.national-hub-donut { position: relative; display: grid; place-items: center; width: 240px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#3157ff 0 var(--hub-city-end),#138573 var(--hub-city-end) var(--hub-settlement-end),#c48b27 var(--hub-settlement-end) var(--hub-village-end),#8b99ad var(--hub-village-end) 100%); }
.national-hub-donut::before { position: absolute; inset: 19%; border-radius: 50%; background: #fff; content: ""; }
.national-hub-donut > div { position: relative; width: 61%; text-align: center; color: #122338; }
.national-hub-donut strong { display: block; font-size: 29px; line-height: 1.3; font-weight: 550; overflow-wrap: anywhere; }
.national-hub-donut span { display: block; margin-top: 8px; color: #586d84; font-size: 13px; line-height: 1.5; }
.national-hub-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px 32px; margin: 0; }
.national-hub-legend dt { position: relative; padding-left: 22px; color: #586d84; font-size: 14px; line-height: 1.65; }
.national-hub-legend dd { margin: 8px 0 0; color: #122338; font-size: 27px; line-height: 1.3; font-weight: 500; }
.national-hub-legend dd span { display: block; margin-top: 7px; color: #687c92; font-size: 13px; line-height: 1.6; font-weight: 400; }
.national-hub-swatch { position: absolute; top: 7px; left: 0; width: 12px; height: 12px; border-radius: 2px; }
.national-hub-color--cities { background: #3157ff; }
.national-hub-color--settlements { background: #138573; }
.national-hub-color--villages { background: #c48b27; }
.national-hub-color--other { background: #8b99ad; }
.national-hub-geography figcaption { grid-column: 1 / -1; color: #687c92; font-size: 13px; line-height: 1.7; }
.national-hub-regions { padding-top: 30px; border-top: 1px solid #e1e9f3; }
.national-hub-region-chart { max-width: 960px; margin: 0; }
.national-hub-region-chart dl { display: grid; gap: 23px; margin: 0; }
.national-hub-region-chart dl > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 24px; }
.national-hub-region-chart dt { color: #34475d; font-size: 15px; line-height: 1.6; }
.national-hub-region-chart dt a { color: inherit; text-decoration: none; }
.national-hub-region-chart dt a:hover { color: #3157ff; text-decoration: underline; }
.national-hub-region-chart dd { margin: 0; color: #122338; font-size: 22px; line-height: 1.3; font-weight: 500; }
.national-hub-track { grid-column: 1 / -1; height: 12px; border-radius: 3px; background: #eef2f8; overflow: hidden; }
.national-hub-track span { display: block; height: 100%; background: #3157ff; }
.national-hub-region-chart figcaption { margin-top: 20px; color: #687c92; font-size: 13px; line-height: 1.7; }
.national-hub-method { padding: 20px 0; border-top: 1px solid #e1e9f3; border-bottom: 1px solid #e1e9f3; }
.national-hub-method > summary { width: fit-content; max-width: 100%; color: #34475d; font-size: 15px; line-height: 1.6; cursor: pointer; }
.national-hub-method > div { padding-top: 16px; }
.national-hub-method p { color: #586d84; font-size: 14px; line-height: 1.8; }
.national-hub-table-wrap { margin-top: 24px; overflow-x: auto; }
.national-hub-table-wrap table { width: 100%; border-collapse: collapse; color: #34475d; font-size: 14px; }
.national-hub-table-wrap th, .national-hub-table-wrap td { padding: 13px 12px; border-bottom: 1px solid #e1e9f3; text-align: left; font-weight: 400; }
.national-hub-table-wrap thead th { font-weight: 600; }
.national-hub-table-wrap td { text-align: right; font-variant-numeric: tabular-nums; }
.national-hub-situations > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 22px; }
.national-hub-situations a { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 88px; padding: 20px; border: 1px solid #e1e9f3; border-radius: 8px; background: #fff; color: #122338; font-size: 15px; line-height: 1.6; text-decoration: none; overflow-wrap: anywhere; }
.national-hub-situations a:hover { border-color: #b5c5f7; background: #f7f9ff; }
.national-hub-situations svg { width: 20px; height: 20px; flex: 0 0 20px; color: #3157ff; }
@media (max-width: 900px) {
    .rubric-service-page .national-hub-kpi { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .national-hub-geography { grid-template-columns: 220px minmax(0,1fr); gap: 24px; }
    .national-hub-donut { width: 210px; }
    .national-hub-donut strong { font-size: 26px; }
}
@media (max-width: 720px) {
    .national-hub-geography { grid-template-columns: minmax(0,1fr); }
    .national-hub-donut { width: 220px; margin: 0 auto; }
    .national-hub-situations > div { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 540px) {
    .rubric-service-page .national-hub-kpi { grid-template-columns: none; }
    .rubric-service-page .national-hub-kpi strong { font-size: 21px; }
    .national-hub-legend { gap: 24px 16px; }
    .national-hub-legend dd { font-size: 23px; }
    .national-hub-section-head h3, .national-hub-situations h3 { font-size: 20px; }
}