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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    scroll-behavior: smooth;

    scrollbar-gutter: stable;

    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100vh;
    font-family: var(--font-base);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    background-color: var(--bg-page);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    cursor: default;
}

:where(a, button, [role="button"], label, summary, select, .swiper-button-prev, .swiper-button-next) {
    cursor: pointer;
}

:where(input, textarea, [contenteditable="true"], [contenteditable="true"] *) {
    cursor: text;
}

:where(.swiper-slide, .swiper-slide *) {
    cursor: grab;
}

:where(.swiper.swiper-grabbing .swiper-slide, .swiper.swiper-grabbing .swiper-slide *) {
    cursor: grabbing;
}

:where(.swiper-slide .js-panel[data-panel], .swiper-slide .js-panel[data-panel] *, .swiper-slide a, .swiper-slide button, .swiper-slide [role="button"]) {
    cursor: pointer;
}

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

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Классы .h1–.h6 = визуально как теги h1–h6 (для случаев, когда стиль заголовка нужен,
   а сам элемент в структуре заголовков — нет: <div class="h3">). */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    color: var(--color-heading);
}

h1, .h1 { font-size: 2.25rem; margin-bottom: var(--space-4); }
h2, .h2 { font-size: 1.75rem; margin-bottom: var(--space-3); }
h3, .h3 { font-size: 1.375rem; margin-bottom: var(--space-3); }
h4, .h4 { font-size: 1.125rem; margin-bottom: var(--space-2); }

p {
    margin-bottom: var(--space-3);
}

a {
    color: var(--site-color-dark);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-heading);
}

ul, ol {
    padding-left: var(--space-4);
    margin-bottom: var(--space-3);
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-4) 0;
}

small { font-size: .8125rem; }
strong, b { font-weight: var(--fw-bold); }

:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    html { font-size: 15px; }
    body { font-size: 1rem; }
}

@media (max-width: 400px) {
    h1, .h1 { font-size: 1.85rem; }
    h2, .h2 { font-size: 1.45rem; }
    h3, .h3 { font-size: 1.2rem; }
    h4, .h4 { font-size: 1.05rem; }
}