/***** Base *****/
:root {
  --container: 1320px;
  /* Colors (Design Guide) */
  --primary: #1D93D7;
  --primary-light: #43B0F1;
  --ink: #000000;
  --muted: #808080;
  --paper: #E8EEF1;
  --accent: #22B9B6;
  --white: #ffffff;

  /* Typography */
  --font-family: "Factor A", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fs-sm: 14px;
  --fs-base: 18px;
  --fs-h4: 18px;
  --fs-h3: 27px;
  --fs-h2: 36px;
  --fs-h1: 54px;
  --lh-base: 1.6;
  --lh-heading: 1.15;

  /* Radius & Shadows */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

/* Fallback @font-face (in addition to theme.json) */
@font-face {
  font-family: 'Factor A';
  src: url('../fonts/factora/FactorALight-Regular.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Factor A';
  src: url('../fonts/factora/FactorA-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Factor A';
  src: url('../fonts/factora/FactorAMedium-Regular.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Factor A';
  src: url('../fonts/factora/FactorA-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

img {
  height: auto;
  max-width: 100%;
}

/* Typography */
body {
  font-family: var(--font-family);
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: var(--lh-base);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-family); }
h1 { font-size: var(--fs-h1); line-height: 1.05; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
h4 { font-size: var(--fs-h4); line-height: 1.2; }

h1, h2, h3 { margin-bottom: 16px; }
p { margin: 10px 0; }

.text-muted { color: var(--muted); }
.bg-paper { background: var(--paper); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  transition: all .2s ease;
}
.btn-primary {
  background: var(--primary);
  color: var(--white);
}
.btn-primary:hover { background: var(--primary-light); }

.btn-outline-primary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn-outline-primary:hover {
  color: var(--white);
  background: var(--primary);
}

/* Cards */
.card {
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius: var(--radius-md);
  background: var(--white);
  padding: 24px;
}

/* Badges / KPI */
.badge { display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; background:var(--paper); color:var(--ink); }
.kpi { font-size:32px; font-weight:500; }
.kpi small { display:block; font-size:14px; color:var(--muted); }

/* Clients logos grid */
.logos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:center; }
.logos img { max-height:36px; width:auto; opacity:.8; filter:grayscale(1); }
.logos img:hover { opacity:1; filter:none; }

/* Spacing helpers */
.section {
  padding: 80px 0;
}

/* Section titles */
.section h3 {
  margin-bottom: 16px;
}