:root {
  --bf-bg:#07131a;
  --bf-bg-2:#0c1d26;
  --bf-surface:#11242d;
  --bf-surface-2:#16303c;
  --bf-mist:#1f4858;
  --bf-cyan:#62d8ec;
  --bf-blue:#8bbdff;
  --bf-moss:#6ba79b;
  --bf-ice:#d9f6ff;
  --bf-text:#e7f7ff;
  --bf-text-muted:#9cc6d2;
  --bf-border:rgba(139,189,255,.18);
  --bf-shadow:0 24px 60px rgba(0,0,0,.38);
}

body {
  background:var(--bf-bg);
  color:var(--bf-text);
}

.bfvc-box {
  width: min(100%, 400px);
  padding:2rem;
  border-radius:24px;
  background:linear-gradient(180deg,var(--bf-surface),var(--bf-bg));
  color:var(--bf-text);
  border:1px solid var(--bf-border);
  text-align:center;
  box-shadow:var(--bf-shadow);
  margin:0 auto;
  box-sizing:border-box;
}

.bfvc-kicker {
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bf-text-muted);
  margin-bottom:.5rem;
}

.bfvc-value {
  font-size:clamp(1rem,2.5vw,2rem);
  font-weight:500;
  color:var(--bf-cyan);
  line-height:1;
}

.bfvc-label {
  margin-top:.5rem;
  color:var(--bf-ice);
}

.bfvc-box.bfvc-footer,
.bfvc-footer .bfvc-box {
  display:inline-block;
  width:100%;
  max-width:220px;
  padding:.65rem .85rem !important;
  border-radius:12px;
  text-align:center;
  box-sizing:border-box;
}

.bfvc-box.bfvc-footer .bfvc-kicker,
.bfvc-footer .bfvc-kicker {
  font-size:.55rem !important;
  line-height:1.1;
  letter-spacing:.14em;
  margin-bottom:.18rem !important;
}

.bfvc-box.bfvc-footer .bfvc-value,
.bfvc-footer .bfvc-value {
  font-size:1.15rem !important;
  line-height:1 !important;
}

.bfvc-box.bfvc-footer .bfvc-label,
.bfvc-footer .bfvc-label {
  font-size:.68rem !important;
  line-height:1.2;
  margin-top:.18rem !important;
}

.bfvc-box.bfvc-small {
  padding:.85rem 1rem;
  border-radius:14px;
  font-size:.9rem;
  max-width:180px;
}

.bfvc-small .bfvc-kicker {
  font-size:.6rem;
  margin-bottom:.25rem;
}

.bfvc-small .bfvc-value {
  font-size:clamp(1.1rem,2.5vw,1.6rem);
}

.bfvc-small .bfvc-label {
  margin-top:.25rem;
  font-size:.8rem;
}

@media (max-width: 768px) {
  .bfvc-box {
    max-width: 100%;
    padding: 1.4rem 1.1rem;
    border-radius: 18px;
  }

  .bfvc-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.35rem;
  }

  .bfvc-value {
    font-size: clamp(1.15rem, 6vw, 1.75rem);
  }

  .bfvc-label {
    font-size: 0.92rem;
    margin-top: 0.35rem;
  }

  .bfvc-box.bfvc-footer,
  .bfvc-footer .bfvc-box {
    max-width: 100%;
    width: 100%;
    padding: 0.55rem 0.75rem !important;
  }

  .bfvc-box.bfvc-footer .bfvc-kicker,
  .bfvc-footer .bfvc-kicker {
    font-size: 0.5rem !important;
  }

  .bfvc-box.bfvc-footer .bfvc-value,
  .bfvc-footer .bfvc-value {
    font-size: 1rem !important;
  }

  .bfvc-box.bfvc-footer .bfvc-label,
  .bfvc-footer .bfvc-label {
    font-size: 0.62rem !important;
  }

  .bfvc-box.bfvc-small {
    max-width: 100%;
    padding: 0.75rem 0.9rem;
  }
}

@media (max-width: 480px) {
  .bfvc-box {
    padding: 1rem 0.85rem;
    border-radius: 16px;
  }

  .bfvc-kicker {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  .bfvc-value {
    font-size: clamp(1rem, 7vw, 1.45rem);
  }

  .bfvc-label {
    font-size: 0.82rem;
  }

  .bfvc-box.bfvc-footer,
  .bfvc-footer .bfvc-box {
    padding: 0.45rem 0.6rem !important;
    border-radius: 10px;
  }

  .bfvc-box.bfvc-footer .bfvc-kicker,
  .bfvc-footer .bfvc-kicker {
    font-size: 0.46rem !important;
  }

  .bfvc-box.bfvc-footer .bfvc-value,
  .bfvc-footer .bfvc-value {
    font-size: 0.92rem !important;
  }

  .bfvc-box.bfvc-footer .bfvc-label,
  .bfvc-footer .bfvc-label {
    font-size: 0.58rem !important;
  }
}