/* ============================================================
   MULTIFILTERS — Design Tokens (owner's canonical package)
   Підключати ПЕРШИМ. Шрифти — локальний Fixel (.ttf у assets/fonts/).
   ============================================================ */

@font-face{font-family:'Fixel Display';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/FixelDisplay-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Fixel Display';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/FixelDisplay-Bold.ttf') format('truetype');}
@font-face{font-family:'Fixel Display';font-weight:800;font-style:normal;font-display:swap;src:url('../fonts/FixelDisplay-ExtraBold.ttf') format('truetype');}
@font-face{font-family:'Fixel Text';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/FixelText-Regular.ttf') format('truetype');}
@font-face{font-family:'Fixel Text';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/FixelText-Medium.ttf') format('truetype');}
@font-face{font-family:'Fixel Text';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/FixelText-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Fixel Text';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/FixelText-Bold.ttf') format('truetype');}

:root{
  --mf-accent:        #35A5DD;
  --mf-accent-ink:    #1c4a60;
  --mf-accent-soft:   #eaf5fb;
  --mf-accent-border: #d6e7f1;
  --mf-navy:          #0E2A38;
  --mf-navy-2:        #123A4D;
  --mf-ink:           #0E2A38;
  --mf-muted:         #485a63;
  --mf-muted-2:       #6c7b82;
  --mf-faint:         #9a958a;
  --mf-paper:         #FAF9F6;
  --mf-paper-edge:    #ECE6DC;
  --mf-canvas:        #e3e0d9;
  --mf-line:          #e2ddd2;
  --mf-success:       #2faf6a;

  --mf-r-panel: 24px;
  --mf-r-card:  18px;
  --mf-r-btn:   11px;
  --mf-r-chip:  5px;
  --mf-r-frame: 3px;

  --mf-shadow-card:  0 10px 30px -16px rgba(14,42,56,.28);
  --mf-shadow-float: 0 16px 36px -12px rgba(14,42,56,.40);
  --mf-shadow-frame: 0 24px 70px -28px rgba(14,42,56,.40);

  --mf-font-display: 'Fixel Display', system-ui, -apple-system, sans-serif;
  --mf-font-text:    'Fixel Text', system-ui, -apple-system, sans-serif;
}

body{font-family:var(--mf-font-text);color:var(--mf-ink);background:var(--mf-paper);}
h1,h2,h3,h4,.mf-display{font-family:var(--mf-font-display);letter-spacing:-.02em;}

/* fluid heading scale (§10) */
.mf-h1{font-family:var(--mf-font-display);font-weight:800;font-size:clamp(34px,5vw,74px);line-height:1.02;letter-spacing:-.025em;}
.mf-h2{font-family:var(--mf-font-display);font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1.05;letter-spacing:-.02em;}
.mf-h3{font-family:var(--mf-font-display);font-weight:800;font-size:clamp(20px,2vw,27px);line-height:1.1;}
.mf-stat{font-family:var(--mf-font-display);font-weight:800;font-size:clamp(32px,4vw,46px);line-height:1;letter-spacing:-.02em;}
.mf-eyebrow{font-family:var(--mf-font-text);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;}
.mf-body{font-size:clamp(15px,1.1vw,18px);line-height:1.55;color:var(--mf-muted);font-weight:400;}

.mf-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mf-font-display);font-weight:700;
  font-size:16px;padding:15px 26px;border-radius:var(--mf-r-btn);border:none;cursor:pointer;text-decoration:none;min-height:48px;box-sizing:border-box;}
.mf-btn--primary{background:var(--mf-accent);color:#fff;}
.mf-btn--primary:hover{background:#1c6f9a;}
.mf-btn--ghost{background:transparent;color:var(--mf-navy);border:1.5px solid #cdd6d3;}
.mf-btn--ghost:hover{border-color:var(--mf-navy);}
.mf-btn--dark{background:var(--mf-navy);color:#fff;}
.mf-btn--dark:hover{background:var(--mf-navy-2);}

.mf-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--mf-r-chip);
  border:1px solid var(--mf-accent-border);background:#fff;font-size:11.5px;font-weight:600;color:var(--mf-accent-ink);}

.mf-sec--paper{background:var(--mf-paper);}
.mf-sec--white{background:#fff;}
.mf-sec--navy {background:var(--mf-navy);color:#fff;}