/* ===== STAGE 0: GLOBAL STYLES ===== */ /* --- Google Fonts Import (already in HTML ) --- */ /* --- CSS Variables (Color Palette & Fonts) --- */ :root { --primary-color: #2b3a67; /* Глубокий синий */ --secondary-color: #4cb998; /* Акцентный зеленый/бирюзовый */ --background-color: #f9f9f9; /* Очень светлый серый/белый */ --card-background: #ffffff; --text-color: #333333; --text-light: #666666; --border-color: #e0e0e0; --font-heading: 'Roboto Slab', serif; --font-body: 'Manrope', sans-serif; --container-width: 1200px; --container-padding: 1.5rem; --header-height: 80px; } /* --- Resets --- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text-color); background-color: var(--background-color); -webkit-font-smoothing: antialiased; } .no-scroll { overflow: hidden; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; transition: color 0.3s ease; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--primary-color); margin-bottom: 1rem; line-height: 1.3; } /* --- Utility Classes --- */ .container { max-width: var(--container-width); margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } /* --- Logo Styling (Global) --- */ .logo { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--primary-color); } .logo svg { width: 40px; /* Немного меньше, чем viewBox для аккуратности */ height: 40px; color: var(--primary-color); /* По умолчанию для stroke="currentColor" */ transition: transform 0.3s ease; } .logo .logo__part--accent { color: var(--secondary-color); } .logo:hover svg { transform: rotate(15deg); } /* ===== STAGE 1: HEADER STYLES ===== */ .header { width: 100%; height: var(--header-height); background-color: var(--card-background); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .header__container { display: flex; justify-content: space-between; align-items: center; height: 100%; } .header__nav-list { display: flex; align-items: center; gap: 2rem; } .header__nav-link { font-weight: 700; color: var(--text-light); position: relative; padding: 0.5rem 0; } .header__nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--secondary-color); transition: width 0.3s ease; } .header__nav-link:hover, .header__nav-link.active { color: var(--primary-color); } .header__nav-link:hover::after { width: 100%; } /* CTA Button in Nav */ .header__nav-link--cta { background-color: var(--secondary-color); color: #fff; padding: 0.75rem 1.5rem; border-radius: 50px; transition: background-color 0.3s ease, transform 0.3s ease; } .header__nav-link--cta:hover { background-color: #40a586; /* Darker accent */ color: #fff; transform: translateY(-2px); } .header__nav-link--cta::after { display: none; /* No underline for CTA */ } /* Mobile Burger */ .header__burger { display: none; /* Hidden on desktop */ background: none; border: none; cursor: pointer; color: var(--primary-color); padding: 0.5rem; } /* --- Mobile-First: Header Media Query --- */ @media (max-width: 992px) { .header__nav { position: fixed; top: var(--header-height); left: 0; width: 100%; height: calc(100vh - var(--header-height)); background-color: var(--card-background); flex-direction: column; justify-content: center; align-items: center; /* Hidden by default */ opacity: 0; visibility: hidden; transform: translateY(-20px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; } .header__nav--active { opacity: 1; visibility: visible; transform: translateY(0); } .header__nav-list { flex-direction: column; gap: 2.5rem; } .header__nav-link { font-size: 1.25rem; } .header__burger { display: block; z-index: 1001; } } /* ===== STAGE 2: FOOTER STYLES ===== */ .footer { background-color: #222; color: #ccc; padding: 4rem 0 2rem; border-top: 5px solid var(--primary-color); } .footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } /* Footer logo column */ .footer__column--logo .logo { color: #fff; margin-bottom: 1rem; } .footer__copyright { font-size: 0.875rem; color: var(--text-light); margin-top: 1rem; } /* Footer titles and lists */ .footer__title { font-family: var(--font-heading); color: #fff; font-size: 1.125rem; margin-bottom: 1rem; position: relative; } .footer__title::after { content: ''; width: 30px; height: 2px; background-color: var(--secondary-color); position: absolute; bottom: -5px; left: 0; } .footer__list { display: flex; flex-direction: column; gap: 0.75rem; } .footer__link { color: #ccc; font-size: 0.95rem; } .footer__link:hover { color: var(--secondary-color); text-decoration: underline; } /* Contacts column */ .footer__list--contacts li { display: flex; align-items: flex-start; gap: 0.75rem; } .footer__icon { flex-shrink: 0; margin-top: 4px; color: var(--secondary-color); width: 16px; height: 16px; } .footer__address { font-size: 0.95rem; line-height: 1.5; } /* --- Mobile-First: Footer Media Query --- */ @media (max-width: 992px) { .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } } @media (max-width: 576px) { .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; } .footer__column { text-align: center; } .footer__title::after { left: 50%; transform: translateX(-50%); } .footer__list--contacts li { justify-content: center; text-align: left; } } /* ===== STAGE 3: HERO SECTION STYLES ===== */ .hero { background-color: var(--card-background); padding: 6rem 0; overflow: hidden; /* Для коректної роботи AOS */ min-height: calc(100vh - var(--header-height)); display: flex; align-items: center; } .hero__container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; } .hero__content { /* Контент займає трохи більше місця */ flex-basis: 55%; } .hero__title { font-size: 2.5rem; margin-bottom: 1.5rem; line-height: 1.2; } .hero__title--accent { color: var(--secondary-color); display: block; /* Робить акцентний текст на новому рядку */ } .hero__description { font-size: 1.25rem; color: var(--text-light); margin-bottom: 2.5rem; max-width: 550px; /* Обмеження ширини тексту */ } .hero__cta { display: inline-block; background-color: var(--primary-color); color: #fff; padding: 1rem 2.5rem; border-radius: 50px; font-weight: 700; font-size: 1.1rem; text-transform: uppercase; box-shadow: 0 5px 15px rgba(43, 58, 103, 0.3); transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .hero__cta:hover { background-color: #1e2a4a; /* Темніший основний колір */ transform: translateY(-3px); box-shadow: 0 8px 20px rgba(43, 58, 103, 0.4); } .hero__image-wrapper { flex-basis: 45%; display: flex; justify-content: center; align-items: center; } .hero__image { width: 100%; max-width: 500px; height: auto; border-radius: 15px; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); border: 5px solid #fff; } /* --- Mobile-First: Hero Media Query --- */ @media (max-width: 992px) { .hero { padding: 4rem 0; text-align: center; } .hero__container { grid-template-columns: 1fr; /* Один стовпець на моб. */ gap: 2.5rem; } .hero__content { order: 2; /* Текст під зображенням */ } .hero__image-wrapper { order: 1; } .hero__title { font-size: 2rem; } .hero__description { font-size: 1.1rem; margin-left: auto; margin-right: auto; } } @media (max-width: 576px) { .hero__title { font-size: 1.5rem; } .hero__cta { width: 100%; padding: 1rem; } } /* ===== STAGE 3: SHARED SECTION STYLES (для .strategy та майбутніх) ===== */ .section-header { text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 4rem; } .section-header__subtitle { display: inline-block; font-size: 0.9rem; font-weight: 700; color: var(--secondary-color); text-transform: uppercase; letter-spacing: 1px; background-color: rgba(76, 185, 152, 0.1); padding: 0.25rem 0.75rem; border-radius: 20px; margin-bottom: 0.5rem; } .section-header__title { font-size: 2.8rem; margin-bottom: 1rem; } .section-header__description { font-size: 1.1rem; color: var(--text-light); } @media (max-width: 768px) { .section-header__title { font-size: 2.2rem; } } /* ===== STAGE 3: STRATEGY SECTION STYLES ===== */ .strategy { padding: 6rem 0; background-color: var(--background-color); /* Світлий фон */ } .strategy__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .strategy-card { background-color: var(--card-background); border: 1px solid var(--border-color); border-radius: 12px; padding: 2.5rem 2rem; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); transition: transform 0.3s ease, box-shadow 0.3s ease; } .strategy-card:hover { transform: translateY(-8px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .strategy-card__icon { display: inline-block; background-color: var(--primary-color); color: var(--secondary-color); width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 1.5rem; } .strategy-card__icon i { width: 28px; height: 28px; } .strategy-card__title { font-size: 1.5rem; color: var(--primary-color); margin-bottom: 1rem; } .strategy-card__text { font-size: 0.95rem; color: var(--text-light); margin-bottom: 1.5rem; line-height: 1.7; /* Більший міжрядковий інтервал для читабельності */ } .strategy-card__link { font-weight: 700; color: var(--secondary-color); display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .strategy-card__link i { width: 16px; height: 16px; transition: transform 0.3s ease; } .strategy-card__link:hover i { transform: translateX(4px); } /* --- Mobile-First: Strategy Media Query --- */ @media (max-width: 992px) { .strategy__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .strategy { padding: 4rem 0; } .strategy__grid { grid-template-columns: 1fr; /* Один стовпець на моб. */ } } /* ===== STAGE 3: INSIGHTS SECTION (FAQ/ACCORDION) ===== */ .insights { padding: 6rem 0; background-color: var(--card-background); /* Повертаємось до білого */ overflow: hidden; } .insights__container { display: grid; grid-template-columns: 1fr 1.2fr; /* Текст трохи вужчий за акордеон */ align-items: flex-start; /* Вирівнюємо по верху */ gap: 4rem; } /* Скидаємо стилі заголовка для лівої колонки */ .insights__content .section-header__subtitle, .insights__content .section-header__title { text-align: left; } .insights__content .section-header__title { margin-bottom: 1.5rem; } .insights__description { font-size: 1.1rem; color: var(--text-light); margin-bottom: 1.5rem; } .insights__cta { display: inline-flex; align-items: center; gap: 0.75rem; background-color: var(--secondary-color); color: #fff; padding: 0.85rem 1.75rem; border-radius: 50px; font-weight: 700; margin-top: 1rem; transition: background-color 0.3s ease, transform 0.3s ease; } .insights__cta:hover { background-color: #40a586; transform: translateY(-2px); } .insights__cta i { width: 20px; height: 20px; } /* Accordion styles */ .accordion { border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; /* Для округлення */ } .accordion__item { border-bottom: 1px solid var(--border-color); } .accordion__item:last-child { border-bottom: none; } .accordion__header { /* Скидаємо стилі кнопки */ background: none; border: none; width: 100%; padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; transition: background-color 0.3s ease; } .accordion__header:hover { background-color: rgba(240, 240, 240, 0.5); } .accordion__header.active { background-color: rgba(76, 185, 152, 0.05); /* Легкий акцентний фон */ } .accordion__title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--primary-color); padding-right: 1rem; } .accordion__icon { color: var(--secondary-color); flex-shrink: 0; transition: transform 0.4s ease; } /* Обертаємо іконку, коли кнопка активна */ .accordion__header[aria-expanded='true'] .accordion__icon { transform: rotate(180deg); } .accordion__content { overflow: hidden; max-height: 0; /* JS буде керувати цим */ transition: max-height 0.4s ease-out, padding 0.4s ease-out; } .accordion__text { padding: 0 2rem 1.5rem 2rem; font-size: 0.95rem; color: var(--text-light); line-height: 1.7; } .accordion__text p { margin-bottom: 1rem; } /* --- Mobile-First: Insights Media Query --- */ @media (max-width: 992px) { .insights__container { grid-template-columns: 1fr; /* Один стовпець */ gap: 3rem; } .insights__content { text-align: center; } .insights__content .section-header__subtitle, .insights__content .section-header__title { text-align: center; } } /* ===== STAGE 3: TECH SECTION STYLES ===== */ .tech { padding: 6rem 0; background-color: var(--background-color); /* Знову світлий фон */ overflow: hidden; } .tech__container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; } .tech__image-wrapper { width: 100%; } .tech__image { width: 100%; height: auto; border-radius: 12px; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } /* Вирівнюємо заголовки в цій секції по лівому краю */ .tech__content .section-header__subtitle, .tech__content .section-header__title { text-align: left; } .tech__content .section-header__title { font-size: 2.5rem; /* Трохи менший, бо блок вужчий */ margin-bottom: 1.5rem; } .tech__description { font-size: 1.1rem; color: var(--text-light); margin-bottom: 2rem; } .tech__features-list { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.5rem; } .tech__features-list li { display: flex; align-items: flex-start; /* Вирівнювання по верху іконки */ gap: 0.75rem; } .tech__feature-icon { flex-shrink: 0; color: var(--secondary-color); width: 22px; height: 22px; margin-top: 2px; } .tech__feature-text { font-size: 1.05rem; line-height: 1.5; } .tech__cta { display: inline-block; background-color: var(--primary-color); color: #fff; padding: 0.9rem 2.25rem; border-radius: 50px; font-weight: 700; box-shadow: 0 5px 15px rgba(43, 58, 103, 0.3); transition: background-color 0.3s ease, transform 0.3s ease; } .tech__cta:hover { background-color: #1e2a4a; transform: translateY(-2px); } /* --- Mobile-First: Tech Media Query --- */ @media (max-width: 992px) { .tech__container { grid-template-columns: 1fr; /* Один стовпець */ gap: 3rem; } .tech__image-wrapper { order: 1; /* Зображення зверху */ } .tech__content { order: 2; /* Контент знизу */ text-align: center; } .tech__content .section-header__subtitle, .tech__content .section-header__title { text-align: center; } .tech__features-list li { text-align: left; /* Текст в пунктах списку залишаємо зліва */ } } @media (max-width: 576px) { .tech { padding: 4rem 0; } .tech__content .section-header__title { font-size: 2rem; } } /* ===== STAGE 3: CASES SECTION (Swiper) ===== */ .cases { padding: 6rem 0; background-color: var(--card-background); /* Білий фон */ overflow: hidden; } .cases-slider { padding: 2rem 0 4rem; /* Додатковий відступ для пагінації */ overflow: visible; /* Щоб тіні карток не обрізались */ } .case-card { background-color: var(--card-background); border: 1px solid var(--border-color); border-radius: 12px; padding: 2.5rem; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); height: 100%; /* Вирівнюємо висоту слайдів */ display: flex; flex-direction: column; justify-content: space-between; } .case-card__quote { font-size: 1.1rem; font-style: italic; color: var(--text-light); line-height: 1.7; margin-bottom: 2rem; position: relative; padding-left: 2rem; } /* Декоративні лапки */ .case-card__quote::before { content: '“'; font-family: 'Times New Roman', Times, serif; font-size: 5rem; color: var(--secondary-color); opacity: 0.2; position: absolute; left: -10px; top: -1.5rem; line-height: 1; } .case-card__author { border-top: 1px solid var(--border-color); padding-top: 1.5rem; } .case-card__name { display: block; font-size: 1.1rem; font-weight: 700; color: var(--primary-color); } .case-card__source { font-size: 0.9rem; color: var(--text-light); } /* Swiper Navigation */ .cases-slider .swiper-button-prev, .cases-slider .swiper-button-next { width: 50px !important; height: 50px !important; background-color: #fff; border: 1px solid var(--border-color); border-radius: 50%; color: var(--primary-color); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .cases-slider .swiper-button-prev:hover, .cases-slider .swiper-button-next:hover { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); } .cases-slider .swiper-button-prev { left: -25px; /* Виносимо за межі контейнера */ } .cases-slider .swiper-button-next { right: -25px; } .cases-slider .swiper-button-prev::after, .cases-slider .swiper-button-next::after { display: none; /* Ховаємо стандартні стрілки */ } .cases-slider .swiper-button-prev svg, .cases-slider .swiper-button-next svg { width: 24px !important; height: 24px !important; } /* Swiper Pagination */ .cases-slider .swiper-pagination-bullet { width: 10px !important; height: 10px !important; background-color: var(--border-color); opacity: 1; transition: background-color 0.3s ease, width 0.3s ease; } .cases-slider .swiper-pagination-bullet-active { width: 25px !important; background-color: var(--secondary-color); border-radius: 5px; } /* --- Mobile-First: Cases Media Query --- */ @media (max-width: 768px) { .cases-slider .swiper-button-prev, .cases-slider .swiper-button-next { display: none !important; /* Ховаємо стрілки на мобільних */ } } /* ===== STAGE 4: CONTACT SECTION STYLES ===== */ .contact { padding: 6rem 0; background-color: var(--background-color); /* Світлий фон */ } .contact__container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .contact__content { /* Вирівнюємо заголовки по лівому краю */ text-align: left; } .contact__content .section-header__subtitle { text-align: left; } .contact__content .section-header__title { text-align: left; font-size: 2.5rem; } .contact__content .section-header__description { text-align: left; } .contact__form-wrapper { background-color: var(--card-background); padding: 3rem; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); border: 1px solid var(--border-color); } .form-group { margin-bottom: 1.5rem; } .form-group__label { display: block; font-weight: 700; color: var(--primary-color); margin-bottom: 0.5rem; font-size: 0.9rem; } .form-group__input-wrapper { position: relative; display: flex; align-items: center; } .form-group__input-wrapper svg { position: absolute; left: 15px; color: var(--text-light); width: 20px; height: 20px; opacity: 0.6; } .form-group__input-wrapper input[type='text'], .form-group__input-wrapper input[type='email'], .form-group__input-wrapper input[type='tel'] { width: 100%; padding: 0.85rem 1rem 0.85rem 3rem; /* Відступ для іконки */ border: 1px solid var(--border-color); border-radius: 8px; font-family: var(--font-body); font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .form-group__input-wrapper input:focus { outline: none; border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(76, 185, 152, 0.2); } /* Checkbox styles */ .form-group--checkbox { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 1rem; } .form-group--checkbox input[type='checkbox'] { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--secondary-color); } .form-group--checkbox label { font-size: 0.875rem; color: var(--text-light); line-height: 1.5; } .form-group--checkbox label a { color: var(--primary-color); text-decoration: underline; font-weight: 700; } .form-group--checkbox label a:hover { color: var(--secondary-color); } /* Submit button */ .contact-form__submit { width: 100%; background-color: var(--primary-color); color: #fff; padding: 1rem; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 700; font-family: var(--font-heading); cursor: pointer; box-shadow: 0 5px 15px rgba(43, 58, 103, 0.3); transition: background-color 0.3s ease, transform 0.3s ease; margin-top: 1.5rem; } .contact-form__submit:hover { background-color: #1e2a4a; transform: translateY(-2px); } /* Success Message */ .form-success-message { text-align: center; padding: 2rem; border: 2px dashed var(--secondary-color); border-radius: 12px; background-color: rgba(76, 185, 152, 0.05); } .form-success-message i { width: 50px; height: 50px; color: var(--secondary-color); margin-bottom: 1rem; } .form-success-message h3 { font-size: 1.8rem; color: var(--primary-color); margin-bottom: 0.5rem; } .form-success-message p { font-size: 1.1rem; color: var(--text-light); } /* --- Mobile-First: Contact Media Query --- */ @media (max-width: 992px) { .contact__container { grid-template-columns: 1fr; /* Один стовпець */ gap: 3rem; } .contact__content { text-align: center; } .contact__content .section-header__subtitle { text-align: center; } .contact__content .section-header__title { text-align: center; } .contact__content .section-header__description { text-align: center; } } /* ===== STAGE 5: COOKIE POPUP STYLES ===== */ .cookie-popup { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #222; /* Темний фон, як у футера */ color: #eee; padding: 1.5rem 2rem; box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15); z-index: 2000; /* Hidden by default, JS will show it */ transform: translateY(100%); visibility: hidden; opacity: 0; transition: transform 0.5s ease-out, visibility 0.5s, opacity 0.5s; } .cookie-popup--show { transform: translateY(0); visibility: visible; opacity: 1; } .cookie-popup__content { display: flex; justify-content: space-between; align-items: center; max-width: var(--container-width); margin: 0 auto; gap: 2rem; } .cookie-popup__text { font-size: 0.9rem; color: #ccc; line-height: 1.5; } .cookie-popup__text a { color: var(--secondary-color); text-decoration: underline; font-weight: 700; } .cookie-popup__text a:hover { color: #fff; } .cookie-popup__accept { background-color: var(--secondary-color); color: #fff; border: none; border-radius: 50px; padding: 0.75rem 1.75rem; font-weight: 700; font-size: 0.9rem; cursor: pointer; flex-shrink: 0; /* Щоб кнопка не стискалась */ transition: background-color 0.3s ease, transform 0.3s ease; } .cookie-popup__accept:hover { background-color: #40a586; transform: scale(1.05); } /* --- Mobile-First: Cookie Media Query --- */ @media (max-width: 768px) { .cookie-popup { padding: 1.5rem; } .cookie-popup__content { flex-direction: column; gap: 1.5rem; text-align: center; } .cookie-popup__accept { width: 100%; } } /* ===== STAGE 5: POLICY PAGES STYLES ===== */ /* (для privacy.html, terms.html, etc.) */ .pages { padding: 5rem 0; background-color: var(--card-background); } .pages .container { max-width: 900px; /* Вужчий контейнер для кращої читабельності */ } /* Загальні стилі для текстового контенту */ .pages h1, .pages h2, .pages h3, .pages p, .pages ul, .pages ol { margin-bottom: 1.5rem; } .pages h1 { font-size: 1.8rem; color: var(--primary-color); border-bottom: 2px solid var(--border-color); padding-bottom: 1rem; } .pages h2 { font-size: 1.5rem; color: var(--primary-color); margin-top: 2.5rem; } .pages h3 { font-size: 1.5rem; color: var(--primary-color); margin-top: 2rem; } .pages p { font-size: 1.05rem; line-height: 1.7; color: var(--text-light); } /* Стилізація списків */ .pages ul, .pages ol { padding-left: 2rem; font-size: 1.05rem; line-height: 1.7; color: var(--text-light); } .pages ul li { list-style-type: disc; margin-bottom: 0.75rem; } .pages ol li { list-style-type: decimal; margin-bottom: 0.75rem; } /* Стилізація акцентних елементів */ .pages strong { font-weight: 700; color: var(--text-color); } .pages a { color: var(--secondary-color); text-decoration: underline; font-weight: 700; } .pages a:hover { color: var(--primary-color); text-decoration: none; }