/* База: сброс, типографика, сетка, кнопки. Общие для лендинга, страниц кейсов и сцен. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--page);color:var(--text);font:400 var(--t-body)/1.6 var(--font);
  font-feature-settings:'ss02','cv11';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:clip}
img,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:#F2F2EF;color:#161616}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:4px}

/* типографика: один гротеск, иерархия весом и размером */
.t-hero{font-size:var(--t-hero);line-height:.94;letter-spacing:var(--track-display);font-weight:500;text-wrap:balance}
.t-h2{font-size:var(--t-h2);line-height:1;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.t-h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em;font-weight:500}
.t-lead{font-size:var(--t-lead);line-height:1.5;color:var(--text-2);text-wrap:pretty}
.t-small{font-size:var(--t-small);line-height:1.55}
.t-micro{font-size:var(--t-micro);line-height:1.4;color:var(--text-3)}
.t-num{font-size:var(--t-num);line-height:.95;letter-spacing:var(--track-num);font-weight:400;font-variant-numeric:tabular-nums}
.t-mono{font-family:var(--mono);font-size:.875em}
.acc{color:inherit}
.ok{color:var(--green)}
.bad{color:var(--red)}
.muted{color:var(--text-2)}
p{text-wrap:pretty}

/* сетка */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.stack>*+*{margin-top:var(--stack,var(--s4))}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* кнопки: светлая главная, контурная второстепенная */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);
  padding:0 22px;border-radius:var(--r-pill);font-weight:500;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;
  transition:background-color var(--d-1) var(--ease-out),color var(--d-1),border-color var(--d-1),transform var(--d-1) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn--light,.btn--primary{background:var(--text);color:var(--page)}
.btn--light:hover,.btn--primary:hover{background:#fff}
.btn--line,.btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--hair-2)}
.btn--line:hover,.btn--ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.btn--dark{background:#000;color:#fff}
.btn--lg{--h:56px;padding:0 28px;font-size:1.0625rem}
.btn--sm{--h:38px;padding:0 16px;font-size:.9375rem}

/* карточка в сценах: светлое окно интерфейса */
.card{background:var(--paper);color:var(--ink);border-radius:var(--r);box-shadow:var(--sh-2)}

/* слово, которое проявляется из блюра (kinetic.js выставляет .is-in) */
.kw{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.18em);
  transition:opacity var(--d-3) var(--ease-out),filter var(--d-3) var(--ease-out),transform var(--d-3) var(--ease-out);
  transition-delay:calc(var(--i,0) * 60ms)}
.is-in .kw,.kw.is-in{opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion:reduce){.kw{opacity:1;filter:none;transform:none}}

/* появление блока при скролле (main.js ставит .is-in) */
.reveal{opacity:0;transform:translateY(20px);transition:opacity var(--d-4) var(--ease-out),transform var(--d-4) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.no-js .reveal,.no-js .kw{opacity:1;filter:none;transform:none}