/* Self-hosted brand fonts */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Raleway-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Raleway";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Raleway-Italic-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("fonts/Roboto-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations");
}

/* Button system */
.btn-base {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  gap: 4px; border-radius: 8px;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 14px; line-height: 28px; font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap; border: none; cursor: pointer; text-decoration: none;
}
.btn-md { padding: 4px 12px; }
.btn-lg { padding: 8px 16px; }
.btn-dark { background:#212529; color:#fff; }
.btn-dark:hover { background:#343a40; }
.btn-light { background:#fff; color:#212529; }
.btn-light:hover { background:#f1f3f5; }
.btn-soft { background:rgba(33,37,41,0.10); color:#212529; }
.btn-soft:hover { background:rgba(33,37,41,0.15); }
.btn-plain { background:transparent; color:#212529; }
.btn-plain:hover { background:rgba(33,37,41,0.10); }
.btn-plain-light { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.30); }
.btn-plain-light:hover { background:rgba(255,255,255,0.15); }

.bg-card { background: rgba(33,37,41,0.025); }
.bg-card-2 { background: rgba(33,37,41,0.05); }
.bg-card-3 { background: rgba(33,37,41,0.10); }
.border-mist-5  { border-color: rgba(33,37,41,0.05); }
.border-mist-10 { border-color: rgba(33,37,41,0.10); }
.border-mist-20 { border-color: rgba(33,37,41,0.20); }

/* Hero gradient rule under headline */
.hero-rule {
  width: 422px; max-width: 100%; height: 4px;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgb(227,253,250) 17%, rgb(0,61,214) 100%);
}

/* Full-bleed blue CTA panel */
.blue-cta {
  background:
    linear-gradient(rgba(0,73,255,0) 0%, rgb(0,73,255) 44%),
    rgb(0,73,255);
}

html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

pre::-webkit-scrollbar { height: 6px; }
pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.20); border-radius: 3px; }