/* common.css - Нова версія (Синьо-фіолетова тема) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Montserrat:wght@600;700;800;900&display=swap');

:root {
    /* === Палітра (Темна синьо-фіолетова) === */
    --clr-primary-900: #110F1E; /* Глибокий темно-синьо-фіолетовий фон */
    --clr-primary-800: #1A162D; /* Темний фон для елементів */
    --clr-primary-700: #251F3F; /* Ще світліший фон, межі */
    --clr-primary-500: #413A6A; /* Неактивні елементи, другорядні межі */

    /* Акцент 1 (Фіолетовий) */
    --clr-accent1-500: #8A4FFF; /* Яскраво-фіолетовий */
    --clr-accent1-400: #A57FFD; /* Світліший фіолетовий */
    --clr-accent1-300: #C3A9FF; /* Ще світліший */
    --clr-accent1-glow: rgba(138, 79, 255, 0.3); /* Для тіней/світіння */

    /* Акцент 2 (Синій) */
    --clr-accent2-500: #00A8FF; /* Яскраво-синій (ціановий) */
    --clr-accent2-400: #5DD1FF; /* Світліший синій */
    --clr-accent2-100: rgba(0, 168, 255, 0.1); /* Прозорий синій */
    --clr-accent2-glow: rgba(0, 168, 255, 0.3); /* Світіння синього */

    /* Текст */
    --clr-text-light: #EAE6F5; /* Світлий текст */
    --clr-text-medium: #A89CC9; /* Другорядний текст */
    --clr-text-dark: var(--clr-primary-900); /* Темний текст для світлих кнопок */
    --clr-text-headings: #FFFFFF; /* Білі заголовки */

    /* Загальні кольори */
    --clr-common-white: #ffffff;
    --clr-common-black: #000000;

    /* === Змінні для теми === */
    --clr-background: var(--clr-primary-900);
    --clr-background-alt: var(--clr-primary-800);
    --clr-text-main: var(--clr-text-light);
    --clr-text-muted: var(--clr-text-medium);
    --clr-border: var(--clr-primary-700);
    --clr-card-bg: var(--clr-primary-800);
    --clr-card-border: var(--clr-primary-700);
    --clr-input-bg: var(--clr-primary-700);
    --clr-input-border: var(--clr-primary-500);
    --clr-input-text: var(--clr-text-light);
    --clr-input-focus-border: var(--clr-accent1-500); /* Фіолетовий фокус */

    /* Градієнти */
    --gradient-accent1: linear-gradient(45deg, var(--clr-accent1-500) 0%, var(--clr-accent1-300) 100%);
    --gradient-accent2: linear-gradient(45deg, var(--clr-accent2-500) 0%, var(--clr-accent2-400) 100%);
    --gradient-mix: linear-gradient(60deg, var(--clr-accent1-500) 0%, var(--clr-accent2-500) 100%); /* Мікс фіолетового і синього */
    --gradient-hero-bg: radial-gradient(ellipse at bottom, rgba(138, 79, 255, 0.15) 0%, transparent 60%),
                          linear-gradient(160deg, var(--clr-primary-900) 30%, var(--clr-primary-800) 100%); /* Новий градієнт для Hero */
    --gradient-card-hover: linear-gradient(45deg, var(--clr-accent1-glow), var(--clr-accent2-glow));

    /* Шрифти */
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
    --fs-base: 16px;

    /* Розміри шрифтів */
    --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; --fs-4xl: 2.25rem; --fs-5xl: 3rem; --fs-6xl: 3.75rem; --fs-7xl: 4.5rem;

    /* Міжрядковий інтервал */
    --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2;

    /* Відступи */
    --spacing-unit: 8px;
    --spacing-xs: calc(0.5 * var(--spacing-unit)); --spacing-sm: calc(1 * var(--spacing-unit)); --spacing-md: calc(2 * var(--spacing-unit));
    --spacing-lg: calc(3 * var(--spacing-unit)); --spacing-xl: calc(4 * var(--spacing-unit)); --spacing-2xl: calc(6 * var(--spacing-unit));
    --spacing-3xl: calc(8 * var(--spacing-unit)); --spacing-4xl: calc(12 * var(--spacing-unit)); --spacing-5xl: calc(16 * var(--spacing-unit));

    /* Інші параметри */
    --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 12px; --border-radius-xl: 16px; --border-radius-full: 9999px;

    /* Тіні для темної теми */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.35);
    --shadow-glow-accent1: 0 0 15px 5px var(--clr-accent1-glow); /* Фіолетове світіння */
    --shadow-glow-accent2: 0 0 15px 5px var(--clr-accent2-glow); /* Синє світіння */
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-outline: 0 0 0 3px var(--clr-accent1-glow); /* Тінь фокусу */

    /* Переходи */
    --transition-duration-fast: 150ms;
    --transition-duration-normal: 300ms;
    --transition-duration-slow: 500ms;
    --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Еластичний перехід */

    /* Контейнер */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-lg);

    /* Шапка */
    --header-height: 70px;
    --header-height-scrolled: 65px;
}

/* === Базові стилі та скидання === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-width: 0; border-style: solid; border-color: var(--clr-border); }
html { line-height: var(--leading-normal); font-size: var(--fs-base); scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-primary); color: var(--clr-text-main); background-color: var(--clr-background); overflow-x: hidden; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; background: none; border: none; color: inherit; }
button, [role="button"] { cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-secondary); font-weight: 700; color: var(--clr-text-headings); line-height: var(--leading-tight); margin-bottom: var(--spacing-md); }
h1 { font-size: var(--fs-6xl); font-weight: 900; }
h2 { font-size: var(--fs-5xl); font-weight: 800; margin-bottom: var(--spacing-lg); } /* Зробили H2 жирнішим */
h3 { font-size: var(--fs-3xl); font-weight: 700; }
h4 { font-size: var(--fs-xl); font-weight: 600; }
h5 { font-size: var(--fs-lg); font-weight: 600; }
h6 { font-size: var(--fs-md); font-weight: 600; }
p { margin-bottom: var(--spacing-md); line-height: var(--leading-relaxed); max-width: 70ch; }
p.lead { font-size: var(--fs-lg); color: var(--clr-text-muted); }
a { color: var(--clr-accent1-400); text-decoration: none; transition: color var(--transition-duration-fast) ease-in-out; } /* Посилання фіолетові */
a:hover { color: var(--clr-accent2-400); text-decoration: none; } /* Сині при наведенні */
ul, ol { list-style: none; }

/* === Макет та контейнер === */
.container { width: 100%; max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); }
section { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); position: relative; overflow: hidden; }
.section--alt-bg { background-color: var(--clr-background-alt); }

/* === Кнопки (Синьо-фіолетовий стиль) === */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm);
    padding: 14px 28px; /* Трохи більші відступи */
    font-family: var(--font-secondary); font-weight: 700; /* Жирніший шрифт */
    font-size: var(--fs-sm); border-radius: var(--border-radius-md); cursor: pointer;
    text-align: center; border: 1px solid transparent;
    transition: all var(--transition-duration-normal) var(--transition-timing-function);
    white-space: nowrap; line-height: 1.2; text-transform: uppercase; /* ВЕРХНІЙ РЕГІСТР */
    letter-spacing: 0.5px; /* Невеликий розрідження */
}
.btn i { font-size: 1.2em; }

/* Основна кнопка (змішаний градієнт) */
.btn--primary {
    background: var(--gradient-mix); color: var(--clr-common-white); border-color: transparent;
    box-shadow: 0 4px 10px rgba(138, 79, 255, 0.2), 0 4px 10px rgba(0, 168, 255, 0.2);
}
.btn--primary:hover {
    background: linear-gradient(60deg, var(--clr-accent1-400) 0%, var(--clr-accent2-400) 100%); /* Світліший градієнт */
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 15px rgba(138, 79, 255, 0.3), 0 6px 15px rgba(0, 168, 255, 0.3);
    color: var(--clr-common-white);
}
.btn--primary:active { transform: translateY(0px) scale(0.97); box-shadow: none; }
.btn--primary:disabled {
    background: var(--clr-primary-500);
    color: var(--clr-text-medium);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* Кнопка для CTA (яскраво-фіолетова) */
.cta-button {
    /* Успадковує .btn */
    background: var(--clr-accent1-500); color: var(--clr-common-white);
    box-shadow: 0 4px 10px var(--clr-accent1-glow);
}
.cta-button:hover {
    background: var(--clr-accent1-400);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 15px var(--clr-accent1-glow);
    color: var(--clr-common-white);
}
.cta-button:active { transform: translateY(0px) scale(0.97); box-shadow: none; }

/* Контурна кнопка (для темного фону) */
.btn--secondary {
    background-color: transparent; color: var(--clr-text-light); border-color: var(--clr-primary-500);
}
.btn--secondary:hover {
    background-color: var(--clr-primary-700); border-color: var(--clr-accent1-400); /* Фіолетова межа */
    color: var(--clr-common-white);
}

.btn--sm { padding: var(--spacing-xs) var(--spacing-md); font-size: var(--fs-xs); }
.btn--lg { padding: 18px 36px; font-size: var(--fs-md); }