/* base.css — reset, typography, container, reveal-on-scroll, accessibility.
   Зависит от tokens.css.
*/
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
h1,h2,h3,h4,h5,h6,p,figure,blockquote{ margin:0; padding:0; }
html{ background:var(--bg-0); scroll-behavior:smooth; }
body{
  font-family:"Inter", Arial, "Helvetica Neue", Helvetica, sans-serif;
  color:var(--ink);

  /* ─── SKY-FIX-ROOT — корневой фикс «фон обрывается ниже контента» ───
     Тот же gradient, что в .sky-layer, дублируется НА БОДИ. body растёт
     с контентом (min-height:100dvh — минимум во viewport, и расширяется
     с длинным контентом), gradient растянут на всё тело — НИКОГДА не
     обрывается раньше контента, при любой длине документа, на mobile и
     desktop. Без background-attachment:fixed — у этого есть iOS Safari
     quirks в старых версиях; просто statically painted background.
     ───────────────────────────────────────────────────────────────────
     Защита layered:
       1. body gradient (failsafe) — растёт с документом, всегда покрывает.
       2. .sky-layer position:fixed — поверх body даёт декор (grid +
          horse + stars). Если когда-нибудь сломается из-за rectangular
          containing-block (предок с transform/filter/backdrop-filter)
          или iOS Safari quirk — пользователь увидит body gradient,
          бесшовно (тот же набор цветов). */
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(36,119,189,.28) 0%, rgba(36,119,189,0) 55%),
    radial-gradient(80%  60% at 50% -10%, rgba(28,129,215,.18) 0%, rgba(28,129,215,0) 60%),
    linear-gradient(180deg, #08152a 0%, #0b1a30 40%, #060f1c 100%);
  background-color:var(--bg-0);  /* fallback под gradient на старых браузерах */

  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.01em;
}
::selection{ background:rgba(36,119,189,.55); color:#fff; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
img{ max-width:100%; display:block; }

/* container */
.wrap{ width:100%; max-width:1440px; margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x); }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* a11y */
:focus-visible{ outline:2px solid var(--blue-2); outline-offset:3px; border-radius:6px; }