/* base.css — Наш Мундіаль — reset, змінні, типографіка */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800;900&family=Onest:wght@300;400;500;600;700&display=swap');

:root{
  --blue-900:#071a52;
  --blue-800:#0b2a8a;
  --blue-700:#123fb6;
  --blue-600:#1853d4;
  --blue-500:#2f6bf0;
  --yellow-400:#ffd400;
  --yellow-300:#ffe14d;
  --yellow-500:#f5c518;
  --ink:#0a1430;
  --paper:#f7f9ff;
  --paper-2:#eef2ff;
  --white:#ffffff;
  --muted:#5a6486;
  --line:rgba(10,20,48,.12);
  --radius:18px;
  --radius-lg:28px;
  --shadow:0 18px 50px -20px rgba(7,26,82,.45);
  --shadow-sm:0 8px 24px -14px rgba(7,26,82,.4);
  --maxw:1180px;
  --gap:clamp(16px,3vw,32px);
  --ff-head:'Unbounded',system-ui,sans-serif;
  --ff-body:'Onest',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:clamp(16px,1.05vw,17.5px);
  font-weight:400;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}

h1,h2,h3,h4{font-family:var(--ff-head);line-height:1.08;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(2.3rem,6vw,4.6rem);font-weight:900}
h2{font-size:clamp(1.7rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.2rem,2vw,1.55rem);font-weight:600}
h4{font-size:1.05rem;font-weight:600}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:700;color:var(--blue-800)}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.section{padding-block:clamp(56px,8vw,120px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--ff-head);font-weight:600;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-600);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--yellow-400);display:inline-block}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--muted);font-weight:400}
.text-center{text-align:center}
.muted{color:var(--muted)}

:focus-visible{outline:3px solid var(--blue-500);outline-offset:3px;border-radius:6px}
::selection{background:var(--yellow-400);color:var(--ink)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}