/* Бастион — base layer: resets, defaults, link colours, container, type utilities. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);text-wrap:balance}
h1{font:var(--type-h1);letter-spacing:var(--tracking-display)}
h2{font:var(--type-h2);letter-spacing:var(--tracking-display)}
h3{font:var(--type-h3);letter-spacing:var(--tracking-heading)}
h4{font:var(--type-h4)}
h5{font:var(--type-h5)}
p{margin:0}
blockquote,figure{margin:0}
img,svg,video{max-width:100%;display:block}
/* атрибуты width/height на <img> — презентационные подсказки; без этого
   height="616" перебивает aspect-ratio из макета */
img{height:auto}
picture{display:contents}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-color)}
a:hover{color:var(--text-link-hover)}
a:active{color:var(--action-primary-active)}
:focus-visible{outline:2px solid var(--action-primary);outline-offset:2px}
::selection{background:var(--orange-100);color:var(--ink-900)}
hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--space-9) 0}
[data-on-dark] a{color:var(--white)}
[data-on-dark] a:hover{color:var(--orange-300)}

/* Layout helpers */
.bst-container{width:100%;max-width:var(--container-max);margin:0 auto;padding-inline:var(--pad-page-x)}
.bst-section{padding-block:var(--pad-section-y)}
.bst-panel{background:var(--surface-card);border-radius:var(--radius-section)}
.bst-stack{display:flex;flex-direction:column;gap:var(--gap-stack)}
.bst-row{display:flex;align-items:center;gap:var(--gap-card)}

/* Type utilities — mirror the composite tokens */
.bst-display{font:var(--type-display);letter-spacing:var(--tracking-display);color:var(--text-heading)}
.bst-h1{font:var(--type-h1);letter-spacing:var(--tracking-display);color:var(--text-heading)}
.bst-h2{font:var(--type-h2);letter-spacing:var(--tracking-display);color:var(--text-heading)}
.bst-h3{font:var(--type-h3);letter-spacing:var(--tracking-heading);color:var(--text-heading)}
.bst-h4{font:var(--type-h4);color:var(--text-heading)}
.bst-h5{font:var(--type-h5);color:var(--text-heading)}
.bst-body-lg{font:var(--type-body-lg);color:var(--text-body)}
.bst-body{font:var(--type-body);color:var(--text-body)}
.bst-body-sm{font:var(--type-body-sm);color:var(--text-body)}
.bst-label{font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-heading)}
.bst-caption{font:var(--type-caption);color:var(--text-muted)}
.bst-eyebrow{font:var(--type-eyebrow);color:var(--text-accent)}
.bst-num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

@media (max-width:720px){
  :root{--size-display-1:var(--size-display-1-m);--size-display-2:var(--size-display-2-m);--size-h1:var(--size-h1-m);--size-h2:var(--size-h2-m);--size-h3:var(--size-h3-m);--size-h4:var(--size-h4-m);--pad-section-y:var(--pad-section-y-m);--pad-page-x:var(--pad-page-x-m);--pad-panel:24px}
}

/* Keyframes used by components (spinner, toast, modal) */
@keyframes bst-spin{to{transform:rotate(360deg)}}
@keyframes bst-fade-in{from{opacity:0}to{opacity:1}}
@keyframes bst-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes bst-toast-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ─────────── Скролл-анимации: anti-FOUC + переходы ───────────
   Класс .anim-on ставит anim.js — только если JS работает и не включён
   prefers-reduced-motion. Без него контент виден сразу. */
:root{--ease-power2-out:cubic-bezier(.215,.61,.355,1)}

.anim-on [data-anim="fade-up"],
.anim-on [data-anim="fade"]{opacity:0}
.anim-on [data-anim="stagger"]>*,
.anim-on [data-anim="stagger-scroll"]>*{opacity:0}

.anim-on [data-anim="fade-up"]{transform:translateY(24px)}
.anim-on [data-anim="stagger"]>*{transform:translateY(28px)}
.anim-on [data-anim="stagger-scroll"]>*{transform:translateY(26px)}

.anim-on [data-anim="fade-up"].is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease-power2-out) var(--anim-delay,0s),
             transform .7s var(--ease-power2-out) var(--anim-delay,0s)}
.anim-on [data-anim="fade"].is-in{
  opacity:1;transition:opacity .9s var(--ease-power2-out) var(--anim-delay,0s)}
.anim-on [data-anim="stagger"]>.is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease-power2-out) var(--anim-delay,0s),
             transform .7s var(--ease-power2-out) var(--anim-delay,0s)}
.anim-on [data-anim="stagger-scroll"]>.is-in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease-power2-out) var(--anim-delay,0s),
             transform .6s var(--ease-power2-out) var(--anim-delay,0s)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim-on [data-anim]{opacity:1!important;transform:none!important}
}

/* Скроллбары на тёмной странице */
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px}

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