/* index.css - Логіка перероблена для стабільності + Мобільні покращення */

/* --- Шапка (Header) --- */
header {
    position: sticky; top: 0; left: 0; width: 100%; z-index: 1000;
    background-color: rgba(26, 22, 45, 0.8); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--clr-border); height: var(--header-height);
    transition: background-color var(--transition-duration-normal) ease, height var(--transition-duration-normal) ease, border-color var(--transition-duration-normal) ease;
}
header.is-scrolled {
    height: var(--header-height-scrolled); background-color: rgba(26, 22, 45, 0.95);
    border-color: var(--clr-primary-700); box-shadow: var(--shadow-md);
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.site-logo {
    font-family: var(--font-secondary); font-size: var(--fs-xl); font-weight: 800;
    color: var(--clr-text-headings); margin: 0; display: flex; align-items: center; gap: var(--spacing-xs);
    text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.site-logo .highlight {
    color: var(--clr-accent1-500); /* <<< Змінено на фіолетовий колір */
}
/* --- Навігація Desktop --- */
nav#main-navigation {
    /* Залишаємо як є */
}
nav#main-navigation ul.main-nav__list {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    list-style: none;
    padding: 0;
    margin: 0;
}section.hero h1 .logo-icon {
    height: 0.9em; /* Встановлюємо висоту відносно шрифту H1. Спробуйте зменшити це число (наприклад, 0.8em, 0.7em) */
    width: auto;   /* Зберігаємо пропорції */
    vertical-align: baseline; /* Налаштуйте вирівнювання (можливо, middle або text-bottom) */
    position: relative;
    top: 0.05em; /* Підкоригуйте позицію по вертикалі, якщо потрібно */
  }
nav#main-navigation ul li { margin: 0; }
nav#main-navigation a {
    font-family: var(--font-secondary); font-weight: 600; font-size: var(--fs-sm);
    color: var(--clr-text-medium); padding: var(--spacing-sm) 0;
    position: relative; transition: color var(--transition-duration-fast) ease; text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap;
}
nav#main-navigation a::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px;
    background: var(--gradient-accent1); transition: width var(--transition-duration-normal) var(--transition-timing-function);
    border-radius: var(--border-radius-full);
}
nav#main-navigation a:hover, nav#main-navigation a.is-active { color: var(--clr-common-white); }
nav#main-navigation a:hover::after, nav#main-navigation a.is-active::after { width: 100%; }

/* --- Кнопка мобільного меню (Desktop - прихована) --- */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--clr-text-light);
    font-size: var(--fs-2xl); /* Збільшено розмір іконки */
    cursor: pointer;
    padding: var(--spacing-sm);
    line-height: 1;
    margin-left: var(--spacing-md);
    z-index: 1100;
    /* Додамо стилі для кращого вигляду кнопки */
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* Стиль при наведенні/фокусі на кнопку меню */
.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus {
    color: var(--clr-common-white);
    background-color: rgba(255, 255, 255, 0.1); /* Легкий фон при наведенні */
    outline: none; /* Забираємо стандартний контур */
}


/* --- Решта стилів (Hero, Sections, Cards, etc.) --- */
section.hero {
    padding-top: calc(var(--header-height) + var(--spacing-3xl)); padding-bottom: var(--spacing-5xl); min-height: 95vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    position: relative; overflow: hidden; background: var(--gradient-hero-bg);
}
.hero-background {
    position: absolute; inset: 0; z-index: 0;
    background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
    opacity: 0.08; mix-blend-mode: overlay;
}
section.hero .container { position: relative; z-index: 1; }
section.hero h1 {
    font-size: clamp(var(--fs-4xl), 6vw, var(--fs-6xl));
    font-weight: 900; line-height: 1.15; color: var(--clr-text-headings); margin-bottom: var(--spacing-lg);
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
section.hero h1 .highlight { color: var(--clr-accent1-400); }
section.hero p.lead {
    font-size: var(--fs-lg); color: var(--clr-text-medium); margin-bottom: var(--spacing-xl);
    max-width: 700px; margin-left: auto; margin-right: auto; line-height: var(--leading-relaxed);
}
.hero-cta-group { margin-top: var(--spacing-xl); display: flex; gap: var(--spacing-lg); justify-content: center; flex-wrap: wrap;}
.hero-cta-group .btn--secondary {
    border-color: var(--clr-primary-500); color: var(--clr-text-light);
}
.hero-cta-group .btn--secondary:hover {
    background-color: var(--clr-primary-700); border-color: var(--clr-accent2-400); color: var(--clr-common-white);
}
.text-center { text-align: center; }
.section__header { text-align: center; margin-bottom: var(--spacing-3xl); max-width: 800px; margin-left: auto; margin-right: auto; }
.section__header h2 {
    font-size: clamp(var(--fs-3xl), 5vw, var(--fs-4xl));
    margin-bottom: var(--spacing-sm); line-height: 1.2; color: var(--clr-text-headings);
    position: relative; display: inline-block;
}
.section__header h2::after {
    content: ''; display: block; width: 70px; height: 4px;
    background: var(--gradient-mix);
    margin: var(--spacing-sm) auto 0; border-radius: var(--border-radius-full);
}
.section__header .highlight { color: var(--clr-accent1-400); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-xl); }
.grid--two-cols { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.grid--three-cols { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.card {
    background-color: var(--clr-card-bg); border: 1px solid var(--clr-card-border);
    border-radius: var(--border-radius-lg); padding: var(--spacing-xl);
    box-shadow: var(--shadow-md); position: relative; overflow: hidden; z-index: 1;
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.6s var(--transition-timing-function),
                transform 0.6s var(--transition-timing-function) calc(var(--animation-delay, 0s) * 0.5),
                box-shadow var(--transition-duration-normal) var(--transition-timing-function),
                border-color var(--transition-duration-normal) var(--transition-timing-function);
    display: flex; flex-direction: column; height: 100%;
}
.card.is-visible { opacity: 1; transform: translateY(0); }
.card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-xl), 0 0 25px var(--clr-accent1-glow);
    border-color: var(--clr-accent1-400); z-index: 10;
}
.card h4 { font-size: var(--fs-lg); color: var(--clr-text-headings); margin-bottom: var(--spacing-sm); font-weight: 700; }
.card p { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: var(--leading-normal); margin-bottom: 0; flex-grow: 1; }
.card-icon { font-size: 2rem; color: var(--clr-accent2-500); margin-bottom: var(--spacing-md); width: 100%; text-align: center; }
#credo h2 { font-size: var(--fs-3xl); color: var(--clr-accent1-400); margin-bottom: var(--spacing-md); }
#credo .quote {
    font-family: var(--font-secondary); font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl)); font-weight: 700;
    color: var(--clr-text-light); font-style: italic; max-width: 700px; margin: 0 auto;
    line-height: var(--leading-snug);
}
#credo .quote .highlight { color: var(--clr-accent2-400); }
.problem-list { list-style: none; padding: 0; }
.problem-card {
    text-align: center;
    padding: var(--spacing-xl);
    border: 1px solid var(--clr-card-border);
    align-items: center;
}
.problem-card__icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
    color: var(--clr-accent2-400);
    line-height: 1;
}
.problem-card h4 {
    color: var(--clr-accent1-400);
    font-size: var(--fs-lg);
    margin-bottom: var(--spacing-md);
}
.problem-card p {
    color: var(--clr-text-medium);
    font-size: var(--fs-sm);
    text-align: left;
    line-height: var(--leading-relaxed);
    flex-grow: 0;
}
.problem-card p strong {
    color: var(--clr-text-light);
    display: block;
    margin-top: var(--spacing-xs);
    font-weight: 600;
}
.problem-card p strong:first-child {
    margin-top: 0;
}
.goal-list { list-style: none; padding: 0; }
.goal-list .card {
    color: var(--clr-text-light); font-size: var(--fs-md); font-weight: 500;
    text-align: center; padding: var(--spacing-lg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-top: 4px solid var(--clr-accent1-500);
}
.goal-list .card span { font-size: 2rem; margin-bottom: var(--spacing-sm); display: block; }
.why-us-card h4 {
    position: relative; padding-left: 35px; text-align: left; color: var(--clr-text-headings); font-size: var(--fs-lg); margin-bottom: var(--spacing-xs);
}
.why-us-card h4::before {
    content: '🌟'; position: absolute; left: 0; top: 0px;
    font-size: 1.4em; line-height: 1; color: var(--clr-accent1-400);
}
.why-us-card p { text-align: left; padding-left: 35px; font-size: var(--fs-sm); }
.timeline-section { overflow: visible; }
.timeline { position: relative; max-width: 800px; margin: 0 auto; padding: var(--spacing-xl) 0; }
.timeline::after {
    content: ''; position: absolute; width: 3px; background: var(--gradient-mix);
    top: 0; bottom: 0; left: 50%; margin-left: -1.5px; z-index: 0;
    border-radius: var(--border-radius-full);
    box-shadow: 0 0 10px var(--clr-accent1-glow), 0 0 10px var(--clr-accent2-glow);
}
.timeline-item { padding: var(--spacing-sm) var(--spacing-xl); position: relative; background-color: inherit; width: 50%; z-index: 1; }
.timeline-item::after {
    content: ''; position: absolute; width: 24px; height: 24px; right: -13px;
    background-color: var(--clr-background-alt); border: 4px solid var(--clr-accent1-500);
    top: 15px; border-radius: 50%; z-index: 2;
    transition: transform var(--transition-duration-normal) ease;
}
.timeline-item--left { left: 0; text-align: right; }
.timeline-item--right { left: 50%; }
.timeline-item--right::after { left: -13px; border-color: var(--clr-accent2-500); }
.timeline-item__content {
    padding: var(--spacing-md); background-color: var(--clr-card-bg); position: relative;
    border-radius: var(--border-radius-md); box-shadow: var(--shadow-md); border: 1px solid var(--clr-card-border);
    transition: transform var(--transition-duration-normal) ease;
}
.timeline-item:hover .timeline-item__content { transform: scale(1.03); }
.timeline-item:hover::after { transform: scale(1.2); background-color: var(--clr-accent1-100); }
.timeline-item--right:hover::after { background-color: var(--clr-accent2-100); }
.timeline-item__year { display: block; font-weight: bold; color: var(--clr-accent1-400); font-size: var(--fs-lg); margin-bottom: var(--spacing-xs); }
.timeline-item--right .timeline-item__year { color: var(--clr-accent2-400); }
.timeline-item p { font-size: var(--fs-sm); color: var(--clr-text-medium); margin-bottom: 0; }
.integrations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); }
.integration-category { background-color: var(--clr-primary-800); padding: var(--spacing-lg); border-radius: var(--border-radius-md); border: 1px solid var(--clr-primary-700); text-align: center;}
.integration-category h3 { font-size: var(--fs-lg); color: var(--clr-accent1-400); margin-bottom: var(--spacing-md); display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm);}
.integration-category h3 i { color: var(--clr-accent2-400); }
.integration-category ul { list-style: none; padding: 0; margin: 0; }
.integration-category li { font-size: var(--fs-sm); color: var(--clr-text-medium); margin-bottom: var(--spacing-xs); }
.packages-table-wrapper { overflow-x: auto; background-color: var(--clr-primary-800); padding: var(--spacing-md); border-radius: var(--border-radius-lg); border: 1px solid var(--clr-primary-700); }
table { width: 100%; border-collapse: collapse; }
table th, table td { padding: var(--spacing-md) var(--spacing-lg); text-align: left; border-bottom: 1px solid var(--clr-primary-700); }
table th { font-family: var(--font-secondary); font-size: var(--fs-sm); color: var(--clr-accent1-400); text-transform: uppercase; letter-spacing: 0.5px; }
table td { font-size: var(--fs-sm); color: var(--clr-text-light); vertical-align: middle; }
table tbody tr:last-child td { border-bottom: none; }
table .price { font-weight: bold; color: var(--clr-accent2-400); font-size: var(--fs-md); }
table .btn--sm { padding: var(--spacing-xs) var(--spacing-md); font-size: var(--fs-xs); }
table .btn--primary { background: var(--gradient-accent1); box-shadow: 0 2px 5px var(--clr-accent1-glow); }
table .btn--primary:hover { background: var(--clr-accent1-400); box-shadow: 0 4px 8px var(--clr-accent1-glow); }
.certifications-list { list-style: none; padding: 0; }
.certifications-list .card { text-align: center; font-weight: 600; color: var(--clr-accent1-400); font-size: var(--fs-md); padding: var(--spacing-lg); }
#education .card { text-align: center; }
#education .card p { flex-grow: 0; }
.method-card { text-align: center; padding: var(--spacing-lg); }
.method-card h4 { color: var(--clr-accent2-400); }
#testimonials {
    background-color: var(--clr-primary-900);
    padding-top: var(--spacing-4xl);
    padding-bottom: var(--spacing-4xl);
    overflow: hidden;
}
.testimonial-carousel {
    display: flex;
    gap: var(--spacing-lg);
    overflow-x: auto;
    padding: var(--spacing-sm) 0 var(--spacing-xl);
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--container-padding);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--clr-primary-500) var(--clr-primary-700);
}
.testimonial-carousel::-webkit-scrollbar { height: 8px; }
.testimonial-carousel::-webkit-scrollbar-track { background: var(--clr-primary-700); border-radius: 4px; }
.testimonial-carousel::-webkit-scrollbar-thumb { background-color: var(--clr-primary-500); border-radius: 4px; border: 2px solid var(--clr-primary-700); }
.testimonial-carousel::-webkit-scrollbar-thumb:hover { background-color: var(--clr-accent1-400); }
.testimonial-carousel .testimonial-card {
    flex: 0 0 auto;
    width: clamp(300px, 80vw, 380px);
    scroll-snap-align: center;
    background-color: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s var(--transition-timing-function),
                transform 0.6s var(--transition-timing-function) calc(var(--animation-delay, 0s) * 0.5),
                box-shadow var(--transition-duration-normal) var(--transition-timing-function),
                border-color var(--transition-duration-normal) var(--transition-timing-function);
}
.testimonial-carousel .testimonial-card.is-visible { opacity: 1; transform: translateY(0); }
.testimonial-carousel .testimonial-card:hover {
     transform: translateY(-10px) scale(1.02);
     box-shadow: var(--shadow-xl), 0 0 25px var(--clr-accent2-glow);
     border-color: var(--clr-accent2-400);
     z-index: 10;
}
.testimonial-card__avatar {
    width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
    margin-bottom: var(--spacing-md); border: 3px solid var(--clr-accent1-500);
    flex-shrink: 0; box-shadow: var(--shadow-md);
}
.testimonial-card__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.testimonial-card__rating { color: var(--clr-accent2-400); font-size: var(--fs-sm); margin-bottom: var(--spacing-md); line-height: 1; }
.testimonial-card__rating .far.fa-star { color: var(--clr-primary-500); }
.testimonial-card__quote { margin: 0 0 var(--spacing-lg); flex-grow: 1; }
.testimonial-card__quote p { font-style: italic; font-size: var(--fs-sm); color: var(--clr-text-medium); line-height: var(--leading-relaxed); margin-bottom: 0; }
.testimonial-card__author { margin-top: auto; padding-top: var(--spacing-md); }
.testimonial-card__author cite { font-style: normal; font-weight: 600; color: var(--clr-text-light); font-size: var(--fs-sm); display: block; }
.careers-list { list-style: none; padding: 0; text-align: center; margin-bottom: var(--spacing-md); }
.careers-list li { font-size: var(--fs-lg); color: var(--clr-text-light); margin-bottom: var(--spacing-sm); font-weight: 500; }
.careers-contact { text-align: center; color: var(--clr-text-medium); font-size: var(--fs-md); }
.careers-contact a { color: var(--clr-accent1-400); font-weight: bold; }
.careers-contact a:hover { color: var(--clr-accent1-500); }
.bonus-card { text-align: center; font-weight: 600; color: var(--clr-accent2-400); font-size: var(--fs-md); padding: var(--spacing-xl); }
.bonus-note { text-align: center; font-size: var(--fs-sm); color: var(--clr-text-muted); margin-top: var(--spacing-sm); }
#contact { background: linear-gradient(to bottom, var(--clr-primary-900), var(--clr-primary-800)); padding-bottom: var(--spacing-5xl); }
#contact .section__header h2 { margin-bottom: var(--spacing-sm); }
#contact .section__header p { text-align: center; margin-bottom: var(--spacing-xl); color: var(--clr-text-muted); max-width: 600px; margin-left: auto; margin-right: auto; }
#contact h3 { font-size: var(--fs-xl); color: var(--clr-accent1-400); margin-bottom: var(--spacing-lg); }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-3xl); align-items: start; }
@media (min-width: 992px) { .contact-grid { grid-template-columns: 1fr 1.2fr; gap: var(--spacing-4xl); } }
.contact-info p { display: flex; align-items: flex-start; gap: var(--spacing-md); margin-bottom: var(--spacing-md); font-size: var(--fs-sm); color: var(--clr-text-medium); }
.contact-info i { color: var(--clr-accent1-500); width: 20px; text-align: center; font-size: 1.1em; margin-top: 2px; flex-shrink: 0; }
.contact-info a { color: var(--clr-accent2-400); word-break: break-word; }
.contact-info a:hover { color: var(--clr-accent2-500); }
.contact-form h3 { text-align: left; }
.contact-form .form-group { margin-bottom: var(--spacing-lg); position: relative; }
.contact-form .form-group label {
    display: block; margin-bottom: var(--spacing-xs); font-weight: 500;
    font-size: var(--fs-sm); color: var(--clr-text-medium);
}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
    width: 100%; padding: 14px 15px; margin-bottom: 0;
    border: 1px solid var(--clr-input-border); border-radius: var(--border-radius-md);
    background-color: var(--clr-input-bg); color: var(--clr-input-text);
    font-size: var(--fs-sm); transition: all var(--transition-duration-fast) ease; box-sizing: border-box;
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form textarea:focus {
    outline: none; border-color: var(--clr-input-focus-border);
    box-shadow: 0 0 0 3px var(--clr-accent1-glow);
}
.contact-form button[type="submit"] { width: 100%; margin-top: var(--spacing-md); }
footer { background-color: var(--clr-primary-900); color: var(--clr-text-muted); text-align: center; padding: var(--spacing-xl) var(--spacing-lg); margin-top: var(--spacing-3xl); font-size: var(--fs-sm); border-top: 1px solid var(--clr-border); }
footer p { margin-bottom: var(--spacing-md); }
.footer-socials { display: flex; justify-content: center; gap: var(--spacing-lg); }
.footer-socials a { color: var(--clr-text-medium); font-size: var(--fs-lg); transition: color var(--transition-duration-fast) ease, transform var(--transition-duration-fast) ease; }
.footer-socials a:hover { color: var(--clr-accent1-500); transform: translateY(-3px); }
.highlight { color: var(--clr-accent1-500); font-weight: bold; }
.animate-on-scroll { opacity: 0; transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animate--fade-in-up { transform: translateY(40px); }
.animate--fade-in-left { transform: translateX(-40px); }
.animate--fade-in-right { transform: translateX(40px); }
.animate--zoom-in { transform: scale(0.95); }
.animate-on-scroll.is-visible { opacity: 1; transform: translate(0, 0) scale(1); }


/* === Адаптація для мобільних (ВИПРАВЛЕНА ЛОГІКА МЕНЮ + ПОКРАЩЕННЯ) === */
@media (max-width: 850px) {
    html { font-size: 15px; }

    /* === Заголовки та Текст === */
    h1, section.hero h1 { font-size: var(--fs-4xl); }
    h2 { font-size: var(--fs-3xl); }
    section.hero p.lead { font-size: var(--fs-md); }
    p { line-height: var(--leading-relaxed); }

    /* === Відступи === */
    .container { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
    section { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
    .grid { gap: var(--spacing-lg); }
    .card { padding: var(--spacing-lg); }
    .hero-cta-group { gap: var(--spacing-md); }
    .contact-grid { gap: var(--spacing-xl); }
    #contact { padding-bottom: var(--spacing-4xl); }

    /* === Елементи === */
    .timeline::after { left: 15px; margin-left: 0; }
    .timeline-item { width: 100%; padding-left: 45px; padding-right: 0; text-align: left;}
    .timeline-item--left, .timeline-item--right { left: 0; }
    .timeline-item::after { left: 2px; }
    .timeline-item--right::after { left: 2px; border-color: var(--clr-accent2-500); }

    /* Таблиця пакетів */
    table thead { display: none; }
    table tr { display: block; margin-bottom: var(--spacing-lg); border: 1px solid var(--clr-primary-700); border-radius: var(--border-radius-md); padding: var(--spacing-sm); background-color: rgba(0,0,0,0.1);}
    table td { display: block; text-align: right !important; padding-left: 50%; position: relative; border-bottom: 1px dashed var(--clr-primary-700); padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm);}
    table td:last-child { border-bottom: none; }
    table td::before { content: attr(data-label); position: absolute; left: var(--spacing-md); top: var(--spacing-sm); width: calc(50% - var(--spacing-lg)); font-weight: bold; text-align: left; color: var(--clr-accent1-400); font-size: var(--fs-xs); text-transform: uppercase;}
    table td.price { font-size: var(--fs-lg); }
    table td .btn { width: 100%; margin-top: var(--spacing-sm); }

    .contact-grid { grid-template-columns: 1fr; }

    /* === МОБІЛЬНЕ МЕНЮ (Виправлено позиціонування) === */
    /* 1. Приховуємо звичайну навігацію */
    nav#main-navigation ul.main-nav__list {
        display: none;
    }

    /* 2. Показуємо кнопку */
    .mobile-nav-toggle {
        display: block;
        order: 3;
        /* Стилі для кнопки з попередньої версії залишаються */
        /* font-size: var(--fs-2xl); padding: var(--spacing-sm); etc. */
    }

    /* 3. Стилі для контейнера меню (коли воно відкрите) */
    nav#main-navigation {
        display: none; /* Початково приховано */
        position: fixed; /* Фіксоване позиціонування */
        /* ВАЖЛИВО: Меню починається ПІД шапкою */
        top: var(--header-height);
        left: 0;
        width: 100%;
        /* ВАЖЛИВО: Висота - решта екрану */
        height: calc(100vh - var(--header-height));
        background-color: rgba(17, 15, 30, 0.98); /* Фон оверлею */
        backdrop-filter: blur(8px);
        z-index: 1050; /* Під кнопкою закриття, але над контентом */
        /* ЗАБРАНО padding-top */
        /* Додаємо плавний перехід */
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-duration-normal) ease, visibility var(--transition-duration-normal) ease;
        overflow-y: auto; /* Дозволяємо прокрутку, якщо пунктів багато */
        /* Центруємо список пунктів по вертикалі та горизонталі */
        align-items: center;
        justify-content: center;
    }

    /* 4. Стилі для ВІДКРИТОГО стану контейнера меню */
    nav#main-navigation.is-open {
        display: flex; /* Робимо видимим та активуємо flex */
        opacity: 1;
        visibility: visible;
    }

    /* 5. Стилі для списку всередині ВІДКРИТОГО меню */
    nav#main-navigation.is-open ul.main-nav__list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg); /* Збільшимо відстань між пунктами */
        width: 90%;
        max-width: 400px;
        text-align: center;
        padding: var(--spacing-xl) 0; /* Додамо вертикальні відступи зверху і знизу списку */
        margin: 0;
        list-style: none;
    }

    nav#main-navigation.is-open ul.main-nav__list li {
        width: 100%;
        /* Анімація появи пунктів (необов'язково) */
        opacity: 0;
        transform: translateY(15px);
        animation: fadeInMenuItem 0.3s ease forwards;
    }
    /* Додаємо затримку для анімації кожного пункту */
    nav#main-navigation.is-open ul.main-nav__list li:nth-child(1) { animation-delay: 0.1s; }
    nav#main-navigation.is-open ul.main-nav__list li:nth-child(2) { animation-delay: 0.15s; }
    nav#main-navigation.is-open ul.main-nav__list li:nth-child(3) { animation-delay: 0.2s; }
    nav#main-navigation.is-open ul.main-nav__list li:nth-child(4) { animation-delay: 0.25s; }
    nav#main-navigation.is-open ul.main-nav__list li:nth-child(5) { animation-delay: 0.3s; }
    /* ... і так далі, якщо пунктів більше */

    @keyframes fadeInMenuItem {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


    /* 6. Стилі для посилань всередині ВІДКРИТОГО меню */
    nav#main-navigation.is-open a {
        padding: var(--spacing-md) var(--spacing-lg);
        width: 100%;
        text-align: center;
        display: block;
        font-size: var(--fs-xl); /* Повернули більший розмір шрифту */
        font-weight: 600;
        color: var(--clr-text-light); /* Основний колір тексту */
        border-radius: var(--border-radius-md);
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; /* Додано transform */
        text-transform: uppercase;
        letter-spacing: 0.8px;
        position: static;
        border-bottom: none;
    }

    nav#main-navigation.is-open a:hover,
    nav#main-navigation.is-open a:focus { /* Додано :focus для доступності */
        background-color: var(--clr-accent1-glow); /* Ледь помітний фон */
        color: var(--clr-common-white); /* Білий текст при наведенні */
        transform: scale(1.05); /* Ефект легкого збільшення */
        outline: none; /* Забираємо контур фокусу, бо є інші стилі */
    }

    /* Забираємо псевдо-елемент ::after на мобільних */
    nav#main-navigation.is-open a::after {
        display: none;
    }
    /* === КІНЕЦЬ МОБІЛЬНОГО МЕНЮ === */


     /* === Карусель відгуків (без змін) === */
     .testimonial-carousel {
         gap: var(--spacing-md);
         margin-left: calc(-1 * var(--container-padding));
         margin-right: calc(-1 * var(--container-padding));
         padding-left: var(--container-padding);
         padding-right: var(--container-padding);
         scroll-padding-left: var(--container-padding);
     }
     .testimonial-carousel .testimonial-card {
          width: clamp(260px, 85vw, 320px);
          padding: var(--spacing-lg);
     }
     .testimonial-card__avatar { width: 60px; height: 60px; margin-bottom: var(--spacing-sm); border-width: 2px; }
     .testimonial-card__rating { font-size: var(--fs-xs); margin-bottom: var(--spacing-sm); }
     .testimonial-card__quote p { font-size: var(--fs-xs); }
     .testimonial-card__author cite { font-size: var(--fs-xs); }

    /* === Анімації (залишаються як є) === */
    /*
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    */
}

.site-logo .logo-icon {
    height: 1.8em;
    width: auto;
    margin-right: var(--spacing-xs);
    vertical-align: middle;
    position: relative;
    top: 0; /* Зміщено менше вгору, або зовсім не зміщено */
}


  #form-messages {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-weight: 500;
    font-size: var(--fs-sm);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    min-height: 1.2em; /* Maintain space even when empty */
    line-height: var(--leading-snug);
    box-sizing: border-box; /* Include padding in height calculation */
}

#form-messages.visible {
    opacity: 1;
    transform: translateY(0);
}

#form-messages.error {
    background-color: rgba(229, 62, 62, 0.15); /* Light red background */
    color: #E53E3E; /* Red text color */
    border: 1px solid rgba(229, 62, 62, 0.3);
}

#form-messages.success {
    background-color: rgba(72, 187, 120, 0.15); /* Light green background */
    color: #48BB78; /* Green text color */
    border: 1px solid rgba(72, 187, 120, 0.3);
}