.surface-counter { background: #030b16; color: #fff; padding: 66px 0 40px; border-bottom: 3px solid #005dcc; }
.surface-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 42px; }
.surface-heading > div { min-width: 0; flex: 1; }
.surface-counter .eyebrow { color: #6cafff; }
.surface-heading h2 { font-size: clamp(28px, 3.5vw, 44px); overflow-wrap: anywhere; }
.surface-heading p { color: #cee3ff; max-width: 300px; font-size: 13px; margin: 0; }
.surface-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 3vw, 54px); max-width: 1080px; margin: 0 auto 30px; }
.surface-metric { text-align: center; min-width: 0; }
.surface-circle { aspect-ratio: 1; width: 100%; max-width: 300px; margin-inline: auto; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(4px, 1vw, 13px); position: relative; isolation: isolate; padding: 14px; }
.surface-circle::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #005dcc; z-index: -2; }
.surface-circle::after { content: ''; position: absolute; inset: clamp(3px, .5vw, 6px); border-radius: inherit; background: #06162a; z-index: -1; }
.surface-base::after { background: #005dcc; }
.surface-total::before { background: #6cafff; }
.surface-annual::before { background: conic-gradient(from -90deg, #6cafff 0 var(--surface-progress,0%), #234b7a var(--surface-progress,0%) 100%); }
.surface-circle-label { color: #cee3ff; font-size: clamp(8px, 1vw, 12px); font-weight: 600; letter-spacing: .8px; white-space: nowrap; }
.surface-base-number, .surface-number > strong { font-family: Manrope, Arial, sans-serif; font-size: clamp(17px, 4.1vw, 52px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -1.2px; line-height: 1.15; white-space: nowrap; }
.surface-number { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.surface-decimals { color: #6cafff; font-family: Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; font-size: clamp(10px, 1.8vw, 22px); line-height: 1.2; }
.surface-circle-unit { color: white; font-family: 'DM Sans', Arial, sans-serif; font-size: clamp(9px, 1.1vw, 13px); font-weight: 500; }
.surface-circle-note { color: #b6d7ff; font-size: clamp(8px, 1vw, 11px); line-height: 1.3; white-space: nowrap; }
.surface-metric h3 { font-size: clamp(13px, 1.6vw, 20px); letter-spacing: -.3px; margin: 22px 0 10px; overflow-wrap: anywhere; }
.surface-metric p { color: #b6d7ff; font-size: clamp(10px, 1.1vw, 13px); line-height: 1.6; margin: 0; }
.surface-controls { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 22px; border-top: 1px solid #234b7a; margin: 18px 0; }
.surface-state { font-size: 11px; color: #b6d7ff; display: flex; align-items: center; gap: 8px; }
.surface-state::before { content: ''; width: 6px; height: 6px; background: #6cafff; border-radius: 50%; flex-shrink: 0; }
.surface-running .surface-state::before { animation: surface-beacon 3s ease-in-out infinite; }
.surface-toggle { min-height: 44px; background: transparent; border: 1px solid #6cafff; color: white; padding: 8px 15px; font-size: 11px; white-space: nowrap; }
.surface-toggle:hover { background: #005dcc; }
.surface-disclaimer { color: #b6d7ff; font-size: 11px; line-height: 1.8; max-width: 1000px; margin: 0; }
.surface-disclaimer strong { color: white; }
@keyframes surface-beacon { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@media (max-width: 900px) {
  .surface-heading { display: block; margin-bottom: 30px; }
  .surface-heading p { margin-top: 18px; max-width: 540px; }
}
@media (max-width: 480px) {
  .surface-counter { padding: 40px 0 28px; }
  .surface-heading h2 { font-size: 28px; letter-spacing: -.8px; }
  .surface-metrics { gap: 6px; }
  .surface-circle { padding: 5px; gap: 3px; }
  .surface-circle-label { font-size: 7px; letter-spacing: 0; }
  .surface-base-number, .surface-number > strong { font-size: clamp(16px, 4.5vw, 22px); letter-spacing: -.5px; }
  .surface-circle-unit { font-size: 8px; }
  .surface-circle-note { font-size: 7px; }
  .surface-decimals { font-size: 10px; }
  .surface-metric h3 { font-size: 12px; margin-top: 15px; line-height: 1.35; }
  .surface-metric p { font-size: 10px; }
  .surface-metric p br { display: none; }
  .surface-controls { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .surface-running .surface-state::before { animation: none; }
}