/* База: сброс, сетка, типографика. Цвета только из tokens.css */
:root {
  --ease: cubic-bezier(.22, .7, .2, 1);
  --container: 1240px;
  --gutter: 24px;
  --pad-y: clamp(64px, 8vw, 112px);
  --header-h: 72px;
  --h1: clamp(3.25rem, 4.6vw + .5rem, 6.5rem);
  --h2: clamp(2.5rem, 3.2vw + 1rem, 4rem);
  --h3: clamp(1.75rem, 1.2vw + 1.25rem, 2.25rem);
  --line: var(--color-mist);
  --navy-line: rgba(255, 255, 255, .16);
}
@media (min-width: 768px) {
  :root { --gutter: 48px; }
}
/* Казахские слова длиннее русских: заголовки чуть мельче */
html[lang="kk"] {
  --h1: clamp(2.875rem, 4vw + .5rem, 5.75rem);
  --h2: clamp(2rem, 2.8vw + .9rem, 3.5rem);
  --h3: clamp(1.625rem, 1.2vw + 1.15rem, 2.125rem);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, .h2, .brand__name {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums;
}
h1 { font-size: var(--h1); line-height: 1.02; font-weight: 600; }
h2, .h2 { font-size: var(--h2); line-height: 1.06; }
h3 { font-size: var(--h3); line-height: 1.1; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.label {
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-slate);
}
.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-slate);
  max-width: 34em;
}
.caption {
  font-size: .75rem;
  line-height: 1.4;
  color: var(--color-slate);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 200;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 12px 16px;
  border-radius: var(--radius-button);
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--color-electric);
  outline-offset: 3px;
  border-radius: 4px;
}
.why :focus-visible, .final :focus-visible, .footer :focus-visible { outline-color: var(--color-sky); }

#custom { scroll-margin-top: 24px; }
.noscript { padding: 16px var(--gutter); background: var(--color-warning-bg); color: var(--color-warning-text); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
html.menu-open { overflow: hidden; }