:root {
    --font-main: "Montserrat", Arial, sans-serif;
    --font-accent: "Tektur", "Montserrat", Arial, sans-serif;
    --color-page: #f4f4f4;
    --color-text: #2b2b2b;
    --color-heading: #232323;
    --color-white: #fff;
    --color-brand: #64a24d;
    --color-brand-dark: #194945;
    --color-timeline-start: #63a14d;
    --color-error: #c0392b;
    --color-text-strong: #303030;
    --color-text-secondary: #3a3a3a;
    --color-text-body: #464646;
    --color-gray-dark: #4a4a4a;
    --color-text-muted: #505050;
    --color-caption: #646464;
    --color-text-subtle: #6e6e6e;
    --color-text-hint: #8c8c8c;
    --color-border-strong: #9fa2a5;
    --color-text-on-dark-muted: #d6d6d6;
    --color-step-dot: #eee;
    --color-surface: rgba(255, 255, 255, 0.9);
    --color-surface-glass: rgba(255, 255, 255, 0.8);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-shadow: rgba(0, 0, 0, 0.07);
    --color-divider: rgba(43, 43, 43, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(255, 255, 255, 0.7);
    --gutter: 100px;
}

html {
    scroll-behavior: smooth;
}

.page {
    min-width: 320px;
    background-color: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

.container_size_wide {
    max-width: 1322px;
}

@media (max-width: 1360px) {
    :root {
        --gutter: 40px;
    }
}

@media (max-width: 767px) {
    :root {
        --gutter: 16px;
    }
}