@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./jetbrains-mono/jetbrains-mono-1.ttf') format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./jetbrains-mono/jetbrains-mono-2.ttf') format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./jetbrains-mono/jetbrains-mono-3.ttf') format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./jetbrains-mono/jetbrains-mono-4.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./montserrat/montserrat-1.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./montserrat/montserrat-2.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./montserrat/montserrat-3.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./montserrat/montserrat-4.ttf') format('truetype');
}

:root {
  --flowblox-font-primary: 'JetBrains Mono', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --flowblox-font-alt: 'Montserrat', sans-serif;
  --flowblox-font-size-base: 14px;
  --flowblox-font-size-menu: 0.93rem;
  --flowblox-font-size-brand: 18px;
  --flowblox-font-size-subtitle: 1rem;
  --flowblox-font-size-button: 0.95rem;
  --flowblox-font-size-note: 0.86rem;
  --flowblox-font-size-h2: 1.45rem;
  --flowblox-font-size-h3: 1.15rem;
  --flowblox-font-size-hero-h1-min: 1.65rem;
  --flowblox-font-size-hero-h1-fluid: 3.4vw;
  --flowblox-font-size-hero-h1-max: 2.2rem;
}

html {
  font-size: var(--flowblox-font-size-base);
}

body {
  font-family: var(--flowblox-font-primary);
  font-size: 1rem;
  line-height: 1.5;
}

p,
li {
  font-size: 1rem;
}

.brand {
  font-size: var(--flowblox-font-size-brand);
}

.nav-links a {
  font-size: var(--flowblox-font-size-menu);
}

.hero h1 {
  font-size: clamp(
    var(--flowblox-font-size-hero-h1-min),
    var(--flowblox-font-size-hero-h1-fluid),
    var(--flowblox-font-size-hero-h1-max)
  );
  line-height: 1.2;
}

.subtitle {
  font-size: var(--flowblox-font-size-subtitle);
}

.btn {
  font-size: var(--flowblox-font-size-button);
}

.section h2 {
  font-size: var(--flowblox-font-size-h2);
  line-height: 1.25;
}

.section h3,
.card h3 {
  font-size: var(--flowblox-font-size-h3);
  line-height: 1.3;
}

.notice,
.site-footer {
  font-size: var(--flowblox-font-size-note);
}

.service-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.service-icon {
  color: var(--accent);
  font-size: 1.15em;
  line-height: 1;
}