/* ==========================================================================
   База: reset, типографіка, контейнер, утиліти.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--s-light);
  color: var(--t-primary);
  font: var(--ty-body-m);
  letter-spacing: var(--tr-body-m);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--t-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
table { border-collapse: collapse; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--b-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* --- Типографічні класи (Figma «Type ramp») ---------------------------- */
.ty-display { font: var(--ty-display); letter-spacing: var(--tr-display); }
.ty-h1      { font: var(--ty-h1);      letter-spacing: var(--tr-h1); }
.ty-h2      { font: var(--ty-h2);      letter-spacing: var(--tr-h2); }
.ty-h3      { font: var(--ty-h3);      letter-spacing: var(--tr-h3); }
.ty-h4      { font: var(--ty-h4);      letter-spacing: var(--tr-h4); }
.ty-h5      { font: var(--ty-h5);      letter-spacing: var(--tr-h5); }
.ty-stat    { font: var(--ty-stat);    letter-spacing: var(--tr-stat); }
.ty-lead    { font: var(--ty-lead);    letter-spacing: var(--tr-lead); }
.ty-body-l  { font: var(--ty-body-l);  letter-spacing: var(--tr-body-l); }
.ty-body-m  { font: var(--ty-body-m);  letter-spacing: var(--tr-body-m); }
.ty-body-s  { font: var(--ty-body-s);  letter-spacing: var(--tr-body-s); }
.ty-caption { font: var(--ty-caption); letter-spacing: var(--tr-caption); }
.ty-label   { font: var(--ty-label);   letter-spacing: var(--tr-label); }
.ty-thead   { font: var(--ty-thead);   letter-spacing: var(--tr-thead); }
.ty-badge   { font: var(--ty-badge);   letter-spacing: var(--tr-badge); text-transform: uppercase; }

.ty-eyebrow {
  font: var(--ty-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--c-green-600);
}
.ty-eyebrow--on-dark { color: var(--t-accent); }

/* Адаптив типографіки. Макетів tablet/mobile у Figma немає — авторська адаптація. */
@media (max-width: 1023px) {
  :root {
    --ty-display: 800 56px/1.0 var(--f-display);  --tr-display: -2.016px;
    --ty-h1:      800 46px/1.04 var(--f-display); --tr-h1:      -1.38px;
    --ty-h2:      800 36px/1.1 var(--f-display);  --tr-h2:      -0.864px;
    --ty-h3:      700 27px/1.18 var(--f-display); --tr-h3:      -0.432px;
    --ty-stat:    800 40px/0.98 var(--f-display); --tr-stat:    -1.2px;
    --ty-lead:    400 18px/1.64 var(--f-body);    --tr-lead:    -0.09px;
  }
}
@media (max-width: 767px) {
  :root {
    --ty-display: 800 40px/1.04 var(--f-display); --tr-display: -1.44px;
    --ty-h1:      800 34px/1.08 var(--f-display); --tr-h1:      -1.02px;
    --ty-h2:      800 28px/1.14 var(--f-display); --tr-h2:      -0.672px;
    --ty-h3:      700 23px/1.2 var(--f-display);  --tr-h3:      -0.368px;
    --ty-h4:      700 20px/1.28 var(--f-display); --tr-h4:      -0.22px;
    --ty-stat:    800 34px/1.0 var(--f-display);  --tr-stat:    -1.02px;
    --ty-lead:    400 17px/1.6 var(--f-body);     --tr-lead:    -0.085px;
    --ty-body-l:  400 17px/1.66 var(--f-body);    --tr-body-l:  -0.068px;
  }
}

/* --- Сітка ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--grid-max) + var(--grid-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}
.container--flush { padding-inline: 0; }

/* --- Секції ------------------------------------------------------------- */
.section { position: relative; }
.section--dark { background: var(--s-dark); color: var(--t-on-dark); }
.section--dark-alt { background: var(--s-dark-alt); color: var(--t-on-dark); }
.section--light { background: var(--s-light); }
.section--light-alt { background: var(--s-light-alt); }

/* --- Утиліти ------------------------------------------------------------ */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--s-card); color: var(--t-primary);
  padding: var(--sp-12) var(--sp-20); border-radius: var(--r-sm);
  box-shadow: var(--e-03);
}
.skip-link:focus { left: var(--sp-16); top: var(--sp-16); }

.stack > * + * { margin-top: var(--stack-gap, var(--sp-16)); }

.icon { display: inline-block; width: 24px; height: 24px; flex: none; }
.icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--solid svg { fill: currentColor; stroke: none; }