/* Reset + базовые стили документа */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* font-size для html задаётся в tokens.css (вместе с адаптивными breakpoint'ами),
   чтобы не было конфликта специфичности — base.css загружается позже и иначе
   перебивал бы media query'и. */

html {
    /* Плавная прокрутка по якорным ссылкам (например, #cashback из «Главного»). */
    scroll-behavior: smooth;
    /* Фон на html, не только на body — иначе View Transitions / blur-фейды
       показывают белую html-подложку между снимками (default UA color). */
    background: var(--color-bg);
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Снимаем интерактивность со всех phone-related media: bezel + screen
   снапшоты/видео, готовые visual'ы (Main-screen.png), media-row тайлы,
   баннеры и анимационные placeholder'ы внутри кейс-секций. Иначе:
     • Yandex Browser показывает «Сохранить картинку?» при наведении
     • iOS Safari открывает context callout по long-press
     • drag сохраняет картинку как файл в Chrome/Firefox/Safari

   Click event'ы при этом не блокируются — pointer-events: none делает
   так, что курсор «проходит сквозь» media к родительскому <a>, и
   ссылки (например, заголовок карточки) продолжают работать. */
.hero__photo-media,
.device img,
.device video,
.project-card video,
.project-card__visual,
.case-hero__visual,
.project-card__media img,
.project-card__media video,
.case-section__animation video,
.case-section__banner img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p, figure {
    margin: 0;
}

.page {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding-x);
}