/* Базовий CSS reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  scroll-behavior: smooth;
  height: 100%;
  width: 100%;
  font-family: sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  text-rendering: optimizeSpeed;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* ----------- */

/* style.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Montserrat:wght@700&display=swap');

body {
    font-family: 'Inter', Arial, sans-serif;
    background-color: #F8F9FB;
    color: #1A2233;
    margin: 0;
    padding: 0;
    line-height: 1.7;
    font-size: 1.1rem;
    transition: background 0.4s;
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: #3867D6;
    margin-top: 0;
}

a {
    color: #3867D6;
    text-decoration: none;
    transition: color 0.2s;
}
a:hover, a:focus {
    color: #F5BE41;
    text-decoration: underline;
}

.button, .btn {
    display: inline-block;
    padding: 0.7em 1.6em;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 2em;
    background: linear-gradient(90deg, #3867D6 60%, #F5BE41 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 18px rgba(56, 103, 214, 0.09);
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.button:hover, .btn:hover {
    background: linear-gradient(90deg, #F5BE41 60%, #3867D6 100%);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 5px 24px rgba(56, 103, 214, 0.13);
}

img {
    max-width: 100%;
    border-radius: 1.2em;
    box-shadow: 0 2px 12px rgba(56, 103, 214, 0.03);
}

@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }
    h1 {
        font-size: 2em;
    }
    .button, .btn {
        padding: 0.6em 1.2em;
        font-size: 0.97rem;
    }
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(248, 249, 251, 0.93);
    box-shadow: 0 2px 18px rgba(56, 103, 214, 0.04);
    backdrop-filter: blur(6px);
    transition: background 0.3s;
}
.header__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.6em 2em;
    gap: 2em;
}
.header__logo {
    display: flex;
    align-items: center;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #3867D6;
    letter-spacing: 1px;
    gap: 0.5em;
    text-decoration: none;
    transition: color 0.18s;
}
.header__logo:hover {
    color: #F5BE41;
}
.header__icon {
    margin-right: 0.25em;
    font-size: 1.35em;
}
.header__country {
    background: #F5BE41;
    color: #fff;
    font-size: 0.85em;
    border-radius: 1em;
    padding: 0.1em 0.8em;
    margin-left: 0.5em;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow: 0 1px 6px rgba(245,190,65,0.09);
}
.header__menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2em;
    margin: 0;
    padding: 0;
}
.header__link {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    color: #1A2233;
    font-size: 1.07rem;
    letter-spacing: 0.02em;
    position: relative;
    transition: color 0.18s;
    padding: 0.25em 0.3em;
}

.header__link:hover, .header__link:focus {
    color: #3867D6;
}
.header__link:hover:after, .header__link:focus:after {
    width: 70%;
}
.header__link--button {
    background: linear-gradient(90deg, #3867D6 60%, #F5BE41 100%);
    color: #fff !important;
    border-radius: 2em;
    padding: 0.45em 1.1em;
    margin-left: 0.5em;
    transition: background 0.18s, color 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 10px rgba(56, 103, 214, 0.05);
}
.header__link--button:hover, .header__link--button:focus {
    background: linear-gradient(90deg, #F5BE41 60%, #3867D6 100%);
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(56, 103, 214, 0.12);
}
@media (max-width: 900px) {
    .header__nav {
        padding: 0.6em 1em;
    }
    .header__menu {
        gap: 1em;
    }
}
@media (max-width: 700px) {
    .header__nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4em;
        padding: 0.7em 0.5em 0.7em 1em;
    }
    .header__menu {
        flex-direction: column;
        gap: 0.7em;
        align-items: flex-start;
        width: 100%;
    }
    .header__link--button {
        margin-left: 0;
    }
}

.footer {
    background: #f5f6fa;
    color: #1A2233;
    padding: 2.8em 0 1.2em 0;
    border-top: 2px solid #F5BE41;
    font-size: 1rem;
    box-shadow: 0 -2px 18px rgba(56, 103, 214, 0.03);
}
.footer__container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1.3fr 2fr 2.3fr;
    gap: 2.5em;
    align-items: flex-start;
    padding: 0 2em;
}
.footer__logo-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6em;
}
.footer__logo {
    display: flex;
    align-items: center;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.28rem;
    font-weight: 700;
    color: #3867D6;
    letter-spacing: 0.5px;
    text-decoration: none;
    gap: 0.4em;
}
.footer__logo:hover {
    color: #F5BE41;
}
.footer__icon {
    font-size: 1.18em;
    margin-right: 0.15em;
}
.footer__country {
    background: #F5BE41;
    color: #fff;
    font-size: 0.82em;
    border-radius: 1em;
    padding: 0.08em 0.8em;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 0.2em;
}
.footer__nav, .footer__info {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.72em;
}
.footer__nav a, .footer__info a {
    color: #1A2233;
    text-decoration: none;
    transition: color 0.18s;
}
.footer__nav a:hover, .footer__info a:hover {
    color: #3867D6;
    text-decoration: underline;
}
.footer__contact {
    display: flex;
    flex-direction: column;
    gap: 0.85em;
    font-size: 0.99em;
}
.footer__contact i {
    color: #3867D6;
    margin-right: 0.5em;
    min-width: 1.2em;
    text-align: center;
}
.footer__contact a {
    color: #1A2233;
    text-decoration: none;
    transition: color 0.17s;
    word-break: break-all;
}
.footer__contact a:hover {
    color: #F5BE41;
    text-decoration: underline;
}
.footer__bottom {
    margin-top: 2em;
    text-align: center;
    font-size: 0.97em;
    color: #78849E;
}
@media (max-width: 950px) {
    .footer__container {
        grid-template-columns: 1fr 1fr;
        gap: 1.5em;
    }
}
@media (max-width: 700px) {
    .footer__container {
        grid-template-columns: 1fr;
        gap: 1em;
        padding: 0 1.2em;
    }
    .footer__col {
        margin-bottom: 1.2em;
    }
}
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.8em;
    min-height: 78vh;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5.2em 2em 2em 2em;
    position: relative;
}
.hero__content {
    flex: 2 1 420px;
    display: flex;
    flex-direction: column;
    gap: 1.2em;
}
.hero__icon {
    font-size: 2.7em;
    color: #3867D6;
    margin-bottom: 0.4em;
    animation: hero-bounce 2.3s infinite cubic-bezier(.34,1.56,.64,1);
    filter: drop-shadow(0 2px 12px rgba(56,103,214,0.09));
}
@keyframes hero-bounce {
    0%, 100% { transform: translateY(0);}
    38% { transform: translateY(-13px);}
    55% { transform: translateY(-8px);}
    70% { transform: translateY(0);}
}
.hero__title {
    font-size: 2.5em;
    font-weight: 700;
    color: #1A2233;
    margin: 0;
    line-height: 1.18;
}
.hero__uk {
    display: inline-block;
    color: #F5BE41;
    background: #fffbe7;
    border-radius: 0.6em;
    padding: 0.09em 0.45em;
    font-size: 0.72em;
    font-weight: 700;
    margin-left: 0.3em;
    letter-spacing: 0.04em;
}
.hero__desc {
    font-size: 1.13em;
    color: #78849E;
    max-width: 530px;
    margin-bottom: 0.8em;
}
.hero__desc-highlight {
    display: block;
    color: #3867D6;
    margin-top: 0.3em;
    font-weight: 600;
    font-size: 1em;
}
.hero__btn {
    width: fit-content;
    font-size: 1.08em;
    box-shadow: 0 2px 20px rgba(56,103,214,0.11);
    display: flex;
    align-items: center;
    gap: 0.7em;
    transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
    margin-top: 0.2em;
}
.hero__btn i {
    font-size: 1em;
}
.hero__img {
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero__img img {
    max-width: 360px;
    min-width: 180px;
    aspect-ratio: 1 / 1;
    background: #eaf0fc;
    object-fit: cover;
    border-radius: 1.8em;
    box-shadow: 0 7px 36px rgba(56, 103, 214, 0.09);
    animation: hero-img-glow 3.4s infinite alternate;
}
@keyframes hero-img-glow {
    from { box-shadow: 0 7px 36px rgba(56, 103, 214, 0.07);}
    to   { box-shadow: 0 9px 42px rgba(245, 190, 65, 0.12);}
}

@media (max-width: 900px) {
    .hero {
        flex-direction: column;
        gap: 1.7em;
        min-height: 65vh;
        padding: 6em 1em 2em 1em;
    }
    .hero__content, .hero__img { width: 100%; }
    .hero__img { justify-content: flex-start; }
    .hero__title { font-size: 2em; }
}
@media (max-width: 500px) {
    .hero {
        padding: 5em 0.2em 1.5em 0.2em;
    }
    .hero__img img { max-width: 90vw; }
}
.about {
    padding: 5em 0 3em 0;
    background: #fff;
}
.about__container {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 2em;
    display: flex;
    flex-direction: column;
    gap: 3em;
}
.about__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1em;
}
.about__icon {
    font-size: 2.2em;
    color: #F5BE41;
    margin-bottom: 0.3em;
    filter: drop-shadow(0 1px 5px rgba(245,190,65,0.08));
    animation: about-bounce 2.6s infinite cubic-bezier(.34,1.56,.64,1);
}
@keyframes about-bounce {
    0%, 100% { transform: translateY(0);}
    40% { transform: translateY(-8px);}
    70% { transform: translateY(0);}
}
.about__title {
    font-size: 2.1em;
    font-weight: 700;
    color: #3867D6;
    margin: 0;
    letter-spacing: 0.01em;
}
.about__desc {
    color: #1A2233;
    font-size: 1.13em;
    max-width: 650px;
    margin-bottom: 0.7em;
    line-height: 1.6;
}
.about__features {
    display: flex;
    gap: 2em;
    justify-content: space-between;
    flex-wrap: wrap;
}
.about__feature {
    background: #f8f9fb;
    border-radius: 1.3em;
    box-shadow: 0 2px 18px rgba(56, 103, 214, 0.04);
    padding: 2em 1.5em;
    flex: 1 1 240px;
    min-width: 240px;
    max-width: 370px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    transition: box-shadow 0.18s, transform 0.15s;
    cursor: pointer;
    border: 1.5px solid transparent;
}
.about__feature:hover, .about__feature:focus {
    box-shadow: 0 5px 24px rgba(245, 190, 65, 0.13);
    border-color: #F5BE41;
    transform: translateY(-4px) scale(1.025);
}
.about__feature i {
    font-size: 1.45em;
    color: #3867D6;
    margin-bottom: 0.2em;
}
.about__feature span {
    font-weight: 700;
    font-size: 1.09em;
    color: #1A2233;
    margin-bottom: 0.25em;
}
.about__feature p {
    color: #78849E;
    font-size: 1em;
    margin: 0;
}

@media (max-width: 950px) {
    .about__features {
        flex-direction: column;
        gap: 1.3em;
    }
}
.practices {
    background: #f8f9fb;
    padding: 5em 0 3.2em 0;
}
.practices__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2em;
}
.practices__title {
    font-size: 2.1em;
    font-weight: 700;
    color: #3867D6;
    margin-bottom: 0.5em;
    letter-spacing: 0.01em;
    text-align: center;
}
.practices__desc {
    text-align: center;
    color: #78849E;
    font-size: 1.12em;
    margin-bottom: 2em;
}
.practices__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2em;
}
.practices__card {
    background: #fff;
    border-radius: 1.5em;
    box-shadow: 0 3px 18px rgba(56, 103, 214, 0.05);
    padding: 2.2em 1.5em 1.7em 1.5em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.16s;
    border: 1.5px solid transparent;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.practices__card:hover, .practices__card:focus {
    box-shadow: 0 9px 32px rgba(245, 190, 65, 0.11);
    border-color: #F5BE41;
    transform: translateY(-4px) scale(1.025);
}
.practices__card i {
    font-size: 1.7em;
    color: #3867D6;
    margin-bottom: 0.2em;
    filter: drop-shadow(0 2px 8px rgba(56,103,214,0.10));
    transition: color 0.15s;
}
.practices__card:hover i {
    color: #F5BE41;
}
.practices__card h3 {
    font-size: 1.13em;
    font-weight: 700;
    color: #1A2233;
    margin: 0 0 0.1em 0;
}
.practices__card p {
    color: #78849E;
    font-size: 1em;
    margin: 0 0 0.7em 0;
}
.practices__btn {
    display: inline-block;
    background: linear-gradient(90deg, #3867D6 70%, #F5BE41 100%);
    color: #fff;
    border-radius: 2em;
    font-size: 1em;
    font-weight: 600;
    padding: 0.42em 1.2em;
    text-decoration: none;
    transition: background 0.17s, transform 0.13s, color 0.13s;
    margin-top: auto;
    box-shadow: 0 2px 10px rgba(56, 103, 214, 0.08);
}
.practices__btn:hover, .practices__btn:focus {
    background: linear-gradient(90deg, #F5BE41 70%, #3867D6 100%);
    color: #fff;
    transform: scale(1.07);
}
@media (max-width: 900px) {
    .practices__cards {
        grid-template-columns: 1fr;
        gap: 1.4em;
    }
}
.trends {
    background: #fff;
    padding: 5em 0 3em 0;
}
.trends__container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2em;
}
.trends__title {
    text-align: center;
    font-size: 2.05em;
    color: #3867D6;
    margin-bottom: 2.1em;
    font-weight: 700;
}
.trends__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2em;
}
.trends__card {
    display: flex;
    align-items: flex-start;
    gap: 1.3em;
    background: #f8f9fb;
    border-radius: 1.2em;
    box-shadow: 0 3px 18px rgba(56,103,214,0.04);
    padding: 1.4em 1.2em;
    transition: box-shadow 0.16s, transform 0.16s, border-color 0.15s;
    border: 1.5px solid transparent;
    position: relative;
}
.trends__card:hover, .trends__card:focus-within {
    box-shadow: 0 8px 30px rgba(245,190,65,0.09);
    border-color: #F5BE41;
    transform: translateY(-3px) scale(1.02);
}
.trends__icon i {
    font-size: 2.1em;
    color: #F5BE41;
    filter: drop-shadow(0 2px 9px rgba(245,190,65,0.11));
    margin-top: 0.5em;
    animation: trends-icon-glow 2.5s infinite alternate;
}
@keyframes trends-icon-glow {
    from { color: #F5BE41;}
    to { color: #3867D6;}
}
.trends__info {
    flex: 1;
}
.trends__date {
    display: inline-block;
    color: #3867D6;
    font-size: 0.93em;
    font-weight: 600;
    margin-bottom: 0.15em;
    background: #eaf0fc;
    padding: 0.11em 0.7em;
    border-radius: 0.8em;
    margin-right: 0.6em;
}
.trends__card h3 {
    margin: 0.1em 0 0.15em 0;
    font-size: 1.13em;
    color: #1A2233;
    font-weight: 700;
}
.trends__card p {
    color: #78849E;
    font-size: 1em;
    margin: 0 0 0.7em 0;
}
.trends__btn {
    display: inline-block;
    font-size: 1em;
    font-weight: 600;
    color: #3867D6;
    text-decoration: underline;
    background: none;
    padding: 0.1em 0.7em;
    border-radius: 1.2em;
    transition: background 0.16s, color 0.16s;
}
.trends__btn:hover, .trends__btn:focus {
    background: #F5BE41;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 800px) {
    .trends__cards {
        grid-template-columns: 1fr;
        gap: 1.2em;
    }
}
.contact {
    background: #f8f9fb;
    padding: 5em 0 3.5em 0;
}
.contact__container {
    max-width: 1050px;
    margin: 0 auto;
    display: flex;
    gap: 3em;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 2em;
    flex-wrap: wrap;
}
.contact__info {
    flex: 1 1 320px;
    min-width: 280px;
    margin-bottom: 2em;
}
.contact__title {
    font-size: 2em;
    color: #3867D6;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 0.4em;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.contact__desc {
    color: #78849E;
    font-size: 1.13em;
    margin-bottom: 1.5em;
}
.contact__details {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #1A2233;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.contact__details i {
    color: #F5BE41;
    margin-right: 0.5em;
    min-width: 1.3em;
    text-align: center;
}
.contact__details a {
    color: #1A2233;
    text-decoration: none;
    transition: color 0.16s;
}
.contact__details a:hover {
    color: #3867D6;
    text-decoration: underline;
}

.contact__form {
    flex: 1 1 380px;
    min-width: 260px;
    background: #fff;
    border-radius: 1.4em;
    box-shadow: 0 3px 18px rgba(56,103,214,0.07);
    padding: 2em 1.7em 1.4em 1.7em;
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    position: relative;
    transition: box-shadow 0.16s;
}
.contact__field {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.contact__form label {
    font-weight: 600;
    color: #3867D6;
    font-size: 1em;
}
.contact__form input,
.contact__form textarea {
    padding: 0.7em 1em;
    border-radius: 0.7em;
    border: 1.5px solid #e4e7f5;
    background: #f8f9fb;
    font-size: 1em;
    font-family: inherit;
    color: #1A2233;
    resize: vertical;
    outline: none;
    transition: border-color 0.16s, box-shadow 0.15s;
}
.contact__form input:focus,
.contact__form textarea:focus {
    border-color: #3867D6;
    box-shadow: 0 2px 14px rgba(56,103,214,0.10);
}
.contact__captcha label {
    font-size: 1em;
}
.contact__btn {
    align-self: flex-start;
    margin-top: 0.3em;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 0.7em;
}
.contact__success {
    display: flex;
    align-items: center;
    gap: 0.6em;
    color: #30bb78;
    font-size: 1.13em;
    font-weight: 600;
    margin-top: 1em;
    background: #e6f7f0;
    padding: 0.7em 1em;
    border-radius: 0.8em;
    animation: fadein 0.5s;
}
.contact__success i {
    color: #30bb78;
    font-size: 1.25em;
}
@keyframes fadein {
    from { opacity: 0;}
    to { opacity: 1;}
}
@media (max-width: 900px) {
    .contact__container {
        flex-direction: column;
        gap: 1.8em;
        padding: 0 1em;
    }
    .contact__form, .contact__info {
        width: 100%;
        min-width: unset;
    }
}
.cookie-popup {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    z-index: 5000;
    background: rgba(248,249,251,0.96);
    box-shadow: 0 -2px 16px rgba(56,103,214,0.06);
    padding: 1.1em 0.7em;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    animation: cookie-fade-in 0.8s;
    font-size: 1.08em;
}
@keyframes cookie-fade-in {
    from { opacity: 0; transform: translateY(35px);}
    to   { opacity: 1; transform: translateY(0);}
}
.cookie-popup__content {
    background: #fff;
    border-radius: 1.1em;
    box-shadow: 0 4px 32px rgba(56,103,214,0.09);
    padding: 1.2em 2.2em 1em 1.4em;
    display: flex;
    align-items: center;
    gap: 1.7em;
    max-width: 580px;
    width: 100%;
}
.cookie-popup__content span {
    color: #1A2233;
    line-height: 1.7;
}
.cookie-popup__content a {
    color: #3867D6;
    text-decoration: underline;
    transition: color 0.16s;
}
.cookie-popup__content a:hover {
    color: #F5BE41;
}
.cookie-popup__btn {
    white-space: nowrap;
    margin-left: 1em;
    min-width: 120px;
    box-shadow: 0 2px 10px rgba(56,103,214,0.09);
    font-size: 1em;
    padding: 0.65em 1.5em;
}
@media (max-width: 700px) {
    .cookie-popup__content {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8em;
        padding: 1.1em 1em 1em 1em;
    }
    .cookie-popup__btn {
        margin-left: 0;
        width: 100%;
    }
}
.pages {
    background: #fff;
    min-height: 75vh;
    padding: 4.5em 0 3em 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.pages .container {
    background: #f8f9fb;
    max-width: 860px;
    width: 100%;
    border-radius: 1.4em;
    box-shadow: 0 3px 22px rgba(56,103,214,0.07);
    padding: 2.8em 2.4em 2em 2.4em;
    color: #1A2233;
    font-size: 1.12em;
    line-height: 1.7;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.2em;
}
.pages h1 {
    font-family: 'Montserrat', Arial, sans-serif;
    color: #3867D6;
    font-weight: 700;
    font-size: 2em;
    margin-bottom: 0.8em;
    letter-spacing: 0.01em;
    line-height: 1.1;
}
.pages h2 {
    font-family: 'Montserrat', Arial, sans-serif;
    color: #F5BE41;
    font-weight: 700;
    font-size: 1.13em;
    margin: 1.2em 0 0.55em 0;
    line-height: 1.16;
}
.pages p {
    color: #1A2233;
    margin: 0 0 0.7em 0;
}
.pages ul {
    margin: 0 0 1.2em 1.1em;
    padding-left: 1.1em;
    color: #1A2233;
    display: flex;
    flex-direction: column;
    gap: 0.7em;
}
.pages ul li {
    background: #f5f6fa;
    border-radius: 0.7em;
    padding: 0.7em 1em;
    margin-bottom: 0.2em;
    font-size: 1em;
    position: relative;
    transition: background 0.14s;
}
.pages ul li::marker {
    color: #3867D6;
}
.pages ul li:hover {
    background: #eaf0fc;
}
.pages a {
    color: #3867D6;
    text-decoration: underline;
    transition: color 0.16s;
    word-break: break-all;
}
.pages a:hover {
    color: #F5BE41;
}
@media (max-width: 600px) {
    .pages .container {
        padding: 1.6em 0.7em 1.2em 0.7em;
        font-size: 1em;
    }
    .pages h1 {
        font-size: 1.28em;
    }
    .pages h2 {
        font-size: 1em;
    }
}