/* ============================================================
   ASTROLABS — base
   Reset, шрифты (@font-face локально), базовая типографика,
   focus-visible, выделение, скроллбар, grain-оверлей,
   глобальный killswitch на prefers-reduced-motion.
   ============================================================ */

/* --- Локальные шрифты. Файлы — вариативные (один файл покрывает
   несколько начертаний), поэтому на один src ссылаются несколько
   @font-face с разным font-weight. Латиница + кириллица отдельными
   unicode-range, чтобы браузер не грузил лишнее. --- */

@font-face{
  font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/onest-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Unbounded'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/unbounded-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Unbounded'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/unbounded-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/jetbrainsmono-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* --- Reset --- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Шапка липкая (position:sticky), поэтому переход по якорю вида
     /services/#pricing уводит начало секции под неё. Отступ прокрутки
     примерно равен высоте свёрнутой шапки. */
  scroll-padding-top:5.5rem;
}

body{
  min-height:100svh;
  background:var(--void);
  color:var(--text);
  font-family:var(--font-text);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  letter-spacing:var(--ls-wide);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img, picture, svg, video, canvas{ display:block; max-width:100%; height:auto; }
input, button, textarea, select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul, ol{ list-style:none; }

/* --- Типографика --- */
h1, h2, h3, h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  text-wrap:balance; /* заголовок не заканчивается словом-сиротой */
}
/* Межстрочие и трекинг — лестницей по кеглю (см. комментарий в tokens.css).
   Единый --lh-tight:0.95 на всех уровнях был рассчитан на дисплейный
   кегль героя; для h3/h4 в 22–36px он сцеплял строки. */
h2{ line-height:var(--lh-head); }
h3{ line-height:var(--lh-snug); letter-spacing:var(--ls-snug); }
h4{ line-height:var(--lh-sub);  letter-spacing:var(--ls-micro); }
/* --fs-hero (до 144px) предназначен герою главной, а не любому h1:
   у .hero h1 и .page-hero h1 свои размеры, поэтому 144px доставались
   только «голым» h1 служебных страниц — заголовок политики набирался
   кеглем в 144px и рвался по слогам. Базовый h1 = шкала внутренних
   страниц; герой главной перебивает её своим правилом. */
h1{ font-size:clamp(2.25rem, 1.2rem + 3.6vw, 4rem); }
h2{ font-size:var(--fs-3xl); }
h3{ font-size:var(--fs-2xl); }
/* --fs-xl (28–36px) делал голый h4 КРУПНЕЕ, чем h3 внутри карточки
   (.card h3 = --fs-lg, 22–26px) — инверсия иерархии в разметке, где
   h4 вложен в карточку с h3. Плюс h3 (--fs-2xl, 30–44px) и h4 на
   нижнем конце шкалы отличались на 2px и переставали читаться как
   разные уровни. --fs-lg даёт ровную четырёхступенчатую лестницу. */
h4{ font-size:var(--fs-lg); }

p{ color:var(--text); }
/* Длина строки лида ограничена мерой: под широкой шапкой секции
   (.section-head--wide, 820px) лид набирался в ~85 знаков. */
p.lead{
  font-size:var(--fs-md); color:var(--muted); line-height:var(--lh-loose);
  max-width:var(--measure-lead);
}

.mono{
  font-family:var(--font-mono);
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  font-size:var(--fs-xs);
}

/* --- Выделение текста --- */
::selection{ background:rgba(var(--accent-rgb), .28); color:var(--text); }

/* --- Скроллбар (webkit + firefox) --- */
html{ scrollbar-color:var(--line) var(--void); scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{
  background:var(--line); border-radius:var(--r-full);
  border:2px solid var(--void);
}
::-webkit-scrollbar-thumb:hover{ background:var(--muted); }

/* --- Focus-visible: фокус обязан быть виден везде --- */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:4px;
}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
}

/* --- Gradient mesh: «туманность» без единого байта JS.
   Работает и как фолбэк, когда 3D не инициализирован. --- */
.mesh{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 45% at 18% 22%, rgba(var(--deep-rgb),.28), transparent 62%),
    radial-gradient(50% 40% at 82% 30%, rgba(var(--violet-rgb),.22), transparent 65%),
    radial-gradient(70% 50% at 50% 88%, rgba(var(--accent-rgb),.10), transparent 70%),
    radial-gradient(40% 30% at 70% 70%, rgba(var(--ember-rgb),.07), transparent 60%);
}

/* --- Grain: тайл 200×200 через SVG-noise в data-URI.
   НЕ фильтр на весь вьюпорт — убивает paint на мобиле. --- */
.grain{
  position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:no-preference){
  .grain{ animation:grainShift .5s steps(1) infinite; }
}
@keyframes grainShift{
  0%{transform:translate(0,0)}      12.5%{transform:translate(-3%,-4%)}
  25%{transform:translate(-6%,2%)}  37.5%{transform:translate(4%,-5%)}
  50%{transform:translate(-2%,6%)}  62.5%{transform:translate(5%,3%)}
  75%{transform:translate(-5%,-2%)} 87.5%{transform:translate(3%,5%)}
}

/* --- Утилита для скрытия визуально, но не для скринридеров --- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --- Skip-link для клавиатурной навигации --- */
.skip-link{
  position:fixed; top:-100px; left:var(--sp-4); z-index:var(--z-modal);
  background:var(--elevated); color:var(--text);
  padding:var(--sp-3) var(--sp-5); border-radius:var(--r-sm);
  border:1px solid var(--line);
  transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{ top:var(--sp-4); }

/* --- Глобальный killswitch: prefers-reduced-motion гасит ВСЕ анимации --- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
}