/* Визначає глобальні користувацькі властивості CSS (змінні) для забезпечення консистентного стилю по всьому додатку */
:root {
    /* Основна палітра: Визначає основну кольорову схему для брендингу та ключових елементів інтерфейсу */
    /* --clr-primary-700: Глибокий синій колір для заголовків, кнопок та важливих елементів */
    --clr-primary-700: #003366; /* Deep Blue */
    /* --clr-primary-500: Світліший синій відтінок для станів наведення та другорядних кнопок */
    --clr-primary-500: #004488;
    /* --clr-primary-300: Ще світліший синій для фонів або менш помітних елементів */
    --clr-primary-300: #336699;
    /* --clr-primary-100: Дуже світлий синій для ненав’язливих фонів або ефектів наведення */
    --clr-primary-100: #e6f0f7;

    /* Вторинна палітра: Визначає відтінки сірого для тексту, меж та фонів */
    /* --clr-secondary-900: Майже чорний для заголовків або тексту з високим контрастом */
    --clr-secondary-900: #111111; /* Dark Grey/Black */
    /* --clr-secondary-700: Темно-сірий для основного тексту сторінки */
    --clr-secondary-700: #333333;
    /* --clr-secondary-500: Середньо-сірий для приглушеного тексту або другорядної інформації */
    --clr-secondary-500: #555555;
    /* --clr-secondary-300: Світло-сірий для ненав’язливого тексту чи меж */
    --clr-secondary-300: #777777;
    /* --clr-secondary-100: Дуже світло-сірий для фонів або станів наведення */
    --clr-secondary-100: #f1f1f1;

    /* Акцентна палітра: Визначає оранжево-золотисті кольори для кнопок заклику до дії та виділення */
    /* --clr-accent-500: Яскраво-оранжевий для основних CTA-кнопок та інтерактивних елементів */
    --clr-accent-500: #f5a623; /* Orange/Gold */
    /* --clr-accent-300: Світліший оранжевий для градієнтів або станів наведення */
    --clr-accent-300: #ffcc66;
    /* --clr-accent-100: Блідо-оранжевий для ненав’язливих фонів або виділень */
    --clr-accent-100: #fff8e1;

    /* Загальні кольори: Визначає чистий білий та чорний для універсального використання */
    /* --clr-common-white: Чистий білий для фонів, тексту чи кнопок */
    --clr-common-white: #ffffff;
    /* --clr-common-black: Чистий чорний для тексту або меж за потреби */
    --clr-common-black: #000000;
    /* --clr-background: Встановлює білий колір як стандартний фон сторінки */
    --clr-background: var(--clr-common-white);
    /* --clr-background-alt: Ледве помітний біло-синюватий відтінок для альтернативних фонів секцій */
    --clr-background-alt: #f8faff; /* Slightly off-white/blueish */
    /* --clr-text-main: Темно-сірий колір для основного тексту сторінки */
    --clr-text-main: var(--clr-secondary-700);
    /* --clr-text-headings: Майже чорний для заголовків, щоб забезпечити контраст */
    --clr-text-headings: var(--clr-secondary-900);
    /* --clr-text-muted: Середньо-сірий для другорядного тексту, наприклад, підзаголовків */
    --clr-text-muted: var(--clr-secondary-500);
    /* --clr-border: Світло-сірий для меж елементів, таких як картки чи кнопки */
    --clr-border: #dce3e9;

    /* Градієнти: Визначає градієнтні фони для кнопок, фонів секцій та іконок */
    /* --gradient-primary: Градієнт від глибокого синього до світлішого синього для основних елементів */
    --gradient-primary: linear-gradient(135deg, var(--clr-primary-700) 0%, var(--clr-primary-500) 100%);
    /* --gradient-accent: Градієнт від яскраво-оранжевого до світлішого для CTA-кнопок */
    --gradient-accent: linear-gradient(45deg, var(--clr-accent-500) 0%, var(--clr-accent-300) 100%);
    /* --gradient-cta-bg: Градієнт для фону секції заклику до дії (CTA) */
    --gradient-cta-bg: linear-gradient(135deg, var(--clr-primary-700) 0%, #0055aa 100%);
    /* --gradient-icon: Градієнт для іконок, щоб додати візуальної привабливості */
    --gradient-icon: linear-gradient(60deg, var(--clr-primary-500), var(--clr-accent-500));
    /* --gradient-subtle-bg: Ненав’язливий градієнт для фонів секцій, від білого до світло-синього */
    --gradient-subtle-bg: linear-gradient(180deg, var(--clr-common-white) 0%, var(--clr-background-alt) 100%);

    /* Шрифти: Визначає основні та другорядні шрифти для сторінки */
    /* --font-primary: Основний шрифт Inter для тексту, підходить для читабельності */
    --font-primary: 'Inter', sans-serif;
    /* --font-secondary: Шрифт Montserrat для заголовків і кнопок, додає виразності */
    --font-secondary: 'Montserrat', sans-serif;
    /* --fs-base: Базовий розмір шрифту (16px) для всієї сторінки */
    --fs-base: 16px; /* Base font size */

    /* Розміри шрифтів: Визначає шкалу розмірів шрифтів для адаптивного дизайну */
    /* --fs-xs: Найменший розмір (12px) для дрібного тексту, наприклад, приміток */
    --fs-xs: 0.75rem; /* 12px */
    /* --fs-sm: Маленький розмір (14px) для другорядного тексту чи кнопок */
    --fs-sm: 0.875rem; /* 14px */
    /* --fs-md: Середній розмір (16px) для основного тексту */
    --fs-md: 1rem; /* 16px */
    /* --fs-lg: Великий розмір (18px) для підзаголовків або акцентного тексту */
    --fs-lg: 1.125rem; /* 18px */
    /* --fs-xl: Ще більший (20px) для заголовків або важливих елементів */
    --fs-xl: 1.25rem; /* 20px */
    /* --fs-2xl: Розмір 24px для великих заголовків або карток */
    --fs-2xl: 1.5rem; /* 24px */
    /* --fs-3xl: Розмір 30px для більших заголовків */
    --fs-3xl: 1.875rem; /* 30px */
    /* --fs-4xl: Розмір 36px для дуже великих заголовків */
    --fs-4xl: 2.25rem; /* 36px */
    /* --fs-5xl: Розмір 48px для головних заголовків секцій */
    --fs-5xl: 3rem; /* 48px */
    /* --fs-6xl: Розмір 60px для геройських секцій */
    --fs-6xl: 3.75rem; /* 60px */
    /* --fs-7xl: Найбільший розмір 72px для дуже великих заголовків */
    --fs-7xl: 4.5rem; /* 72px */

    /* Міжрядковий інтервал: Визначає висоту рядка для тексту */
    /* --leading-none: Без додаткового інтервалу (1) для щільного тексту */
    --leading-none: 1;
    /* --leading-tight: Тісний інтервал (1.25) для заголовків */
    --leading-tight: 1.25;
    /* --leading-snug: Зручний інтервал (1.375) для акцентного тексту */
    --leading-snug: 1.375;
    /* --leading-normal: Нормальний інтервал (1.5) для основного тексту */
    --leading-normal: 1.5;
    /* --leading-relaxed: Розслаблений інтервал (1.625) для легкості читання */
    --leading-relaxed: 1.625;
    /* --leading-loose: Широкий інтервал (2) для особливих випадків */
    --leading-loose: 2;

    /* Відступи: Визначає базову одиницю відступів та шкалу */
    /* --spacing-unit: Базова одиниця відступів (8px) для консистентності */
    --spacing-unit: 8px;
    /* --spacing-xs: Дуже маленький відступ (4px) для дрібних елементів */
    --spacing-xs: calc(0.5 * var(--spacing-unit)); /* 4px */
    /* --spacing-sm: Маленький відступ (8px) для кнопок чи тексту */
    --spacing-sm: calc(1 * var(--spacing-unit)); /* 8px */
    /* --spacing-md: Середній відступ (16px) для карток чи секцій */
    --spacing-md: calc(2 * var(--spacing-unit)); /* 16px */
    /* --spacing-lg: Великий відступ (24px) для більших елементів */
    --spacing-lg: calc(3 * var(--spacing-unit)); /* 24px */
    /* --spacing-xl: Дуже великий відступ (32px) для секцій */
    --spacing-xl: calc(4 * var(--spacing-unit)); /* 32px */
    /* --spacing-2xl: Ще більший відступ (48px) для великих секцій */
    --spacing-2xl: calc(6 * var(--spacing-unit)); /* 48px */
    /* --spacing-3xl: Великий відступ (64px) для футера чи геройських секцій */
    --spacing-3xl: calc(8 * var(--spacing-unit)); /* 64px */
    /* --spacing-4xl: Дуже великий відступ (96px) для основних секцій */
    --spacing-4xl: calc(12 * var(--spacing-unit)); /* 96px */
    /* --spacing-5xl: Найбільший відступ (128px) для особливих випадків */
    --spacing-5xl: calc(16 * var(--spacing-unit)); /* 128px */

    /* Інші параметри: Визначає радіуси, тіні, переходи та розміри контейнерів */
    /* --border-radius-sm: Маленький радіус (4px) для кнопок або дрібних елементів */
    --border-radius-sm: 4px;
    /* --border-radius-md: Середній радіус (8px) для карток чи більших кнопок */
    --border-radius-md: 8px;
    /* --border-radius-lg: Великий радіус (16px) для секцій або великих карток */
    --border-radius-lg: 16px;
    /* --border-radius-xl: Дуже великий радіус (24px) для декоративних елементів */
    --border-radius-xl: 24px;
    /* --border-radius-full: Повний радіус (9999px) для круглих елементів, наприклад, іконок */
    --border-radius-full: 9999px;

    /* --shadow-sm: Маленька тінь для ненав’язливих елементів, таких як кнопки */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* --shadow-md: Середня тінь для карток або елементів із глибиною */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* --shadow-lg: Велика тінь для елементів, що вирізняються, наприклад, при наведенні */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* --shadow-xl: Дуже велика тінь для сильного акценту при наведенні */
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* --shadow-inner: Внутрішня тінь для поглиблення елементів, наприклад, іконок */
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    /* --shadow-outline: Тінь для фокусу елементів, наприклад, при натисканні Tab */
    --shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5); /* Example focus shadow */

    /* --transition-duration-fast: Швидкий перехід (150ms) для малих анімацій */
    --transition-duration-fast: 150ms;
    /* --transition-duration-normal: Стандартний перехід (300ms) для більшості анімацій */
    --transition-duration-normal: 300ms;
    /* --transition-duration-slow: Повільний перехід (500ms) для більших анімацій */
    --transition-duration-slow: 500ms;
    /* --transition-timing-function: Крива анімації для плавних переходів (ease-in-out) */
    --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Ease-in-out */

    /* --container-max-width: Максимальна ширина контейнера (1280px) для великих екранів */
    --container-max-width: 1280px; /* Increased for more complex layout */
    /* --container-padding: Відступи контейнера (24px) зліва та справа */
    --container-padding: var(--spacing-lg); /* 24px */

    /* --header-height: Висота шапки (70px) у звичайному стані */
    --header-height: 70px;
    /* --header-height-scrolled: Висота шапки (60px) при прокручуванні */
    --header-height-scrolled: 60px;
}

/* Секція 2: Скидання та базові стилі */

/* Скидає стандартні стилі для всіх елементів, щоб забезпечити консистентність */
*, *::before, *::after {
    /* Встановлює box-sizing на border-box, щоб розміри включали padding та border */
    box-sizing: border-box;
    /* Скидає всі відступи (margin) до 0 */
    margin: 0;
    /* Скидає всі внутрішні відступи (padding) до 0 */
    padding: 0;
    /* Встановлює ширину межі на 0 за замовчуванням */
    border-width: 0; /* Tailwind-like reset */
    /* Встановлює стиль межі на суцільну лінію */
    border-style: solid;
    /* Встановлює стандартний колір межі для всіх елементів */
    border-color: var(--clr-border); /* Default border color */
}