*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* шапка fixed — без этого заголовок секции при переходе из меню
       подлезает под неё */
    scroll-padding-top: 80px;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 0.93rem + 0.37vw, 1.25rem);
    /* 16px -> 20px */
    line-height: 1.5;
    min-height: 100vh;
}

body.modal-open {
    overflow: hidden;
}

@font-face {
    font-family: 'Ramona';
    src: url('../fonts/Ramona-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Ramona-Light';
    src: url('../fonts/Ramona-Light.ttf') format('truetype');
    font-weight: light;
}


:root {
    --color-purple: #8661d1;
    --color-light-purple: #BCA1F0;
    /* --color-purple-text: #5128a3; #6c4aa6 #604297*/

    --color-purple-text: #7954c4;
    --color-purple-text-muted: #8c6dbf;
    /* этот цвет хорош на белом фоне, надо еще подмать над оттенком на желтом фоне */
    /* TODO: выбрать и написать  #5d3a9b #533190 #472683*/

    --color-orange: #f98b4b;

    --color-terracotta: #A63A00;
    --color-persimmon: #A8450A;
    --color-orange-dark: #D95A14;

    --color-grey: #838383;
    --color-transparent-black: #000000BF;

    --grad-purple: linear-gradient(180deg, #FFFFFF 0%, #E6CDF2 100%);
    --grad-yellow: linear-gradient(360deg, rgba(255, 240, 179, 0.59) 16.95%, rgba(255, 255, 255, 0.59) 100%);

    --grad-footer: linear-gradient(180deg, #E6CDF2 0%, #FFFFFF 100%);

    --text-dark: #333333;
    /* --text-muted: #666666; */
    --text-muted: #675E75;
    --text-muted-orange: #7D553B;
    --text-muted-gray: #7B6685;
    /* Высота хедера: от 3.56rem (57px) до 4.375rem (70px) */
    --header-height: clamp(3.5625rem, 10.833vw + 1.3956rem, 4.375rem);

    /* Размер иконок: от 2.1875rem (35px) до 2.625rem (42px) */
    --icon-size: clamp(2.1875rem, 5.833vw + 1.0206rem, 2.625rem);

    /* Вертикальный отступ: от 0.6875rem (11px) до 0.875rem (14px) */
    --header-padding-v: clamp(0.6875rem, 2.5vw + 0.1875rem, 0.875rem);

    /* Горизонтальный отступ: от 1.625rem (26px) до 2rem (32px) */
    --header-padding-h: clamp(1.625rem, 5vw + 0.625rem, 2rem);

    /* Толщина полосок бургера: от 0.25rem (4px) до 0.3125rem (5px) */
    --bar-thickness: clamp(0.25rem, 0.833vw + 0.0831rem, 0.3125rem);
    --bar-half: calc(var(--bar-thickness)/2);
    --card-clamp-size: clamp(0.75rem, 0.65rem + 0.52vw, 1.375rem);

}

/* ЗАГОЛОВКИ */
h1 {
    font-size: clamp(1.5rem, 1rem + 2.5vw, 4rem);
    line-height: 1.1;
    font-family: "Ramona", sans-serif;
    font-weight: 700;
    font-style: Bold;

    text-transform: uppercase;

    letter-spacing: -2%;
    color: var(--color-purple);

}

h2 {
    font-size: clamp(1.375rem, 1.05rem + 1.62vw, 3rem);
    /* 22px -> 48px */
    color: var(--color-purple);

}

h3 {
    font-size: clamp(1.125rem, 1rem + 0.63vw, 1.5rem);
    /* 18px -> 24px */
}

h4 {
    font-size: clamp(1.125rem, 1rem + 0.63vw, 1.5rem);
    /* 18px -> 24px */
    font-weight: 500;
}

p {
    font-size: clamp(1rem, 0.93rem + 0.37vw, 1.25rem);
    /* 16px -> 20px */
    line-height: 1.5;
    /* Стандарт для хорошей читаемости текста */
    color: var(--text-dark);
}

a {
    color: var(--color-purple-text);
    text-decoration: none;
    transition: color 0.2s ease;

    font-size: clamp(1rem, 0.93rem + 0.37vw, 1.25rem);
}

/* a:hover {
    color: var(--color-purple);


} */

a,
button,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease;
}

input,
textarea {
    font-family: inherit;
    font-size: inherit;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-purple-text-muted);
    opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: var(--color-purple-text);
}

section {
    min-width: 320px;

    width: 100%;
}

.photo-card {
    height: 100%;
    width: 100%;

    overflow: hidden;
    position: relative;
}

.photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.4);
}

.photo-card.top-photo {
    border-radius: 80px 80px 15px 15px;
}

.photo-card.bottom-photo {
    border-radius: 13px 13px 80px 80px;
}

.photo-card.round-photo {

    border-radius: 50%;
}

.photo-caption {
    text-align: center;
    font-family: Inter;
    font-weight: 500;
    font-style: Italic;
    font-size: 1rem;


    line-height: 1.5;

    color: var(--color-purple-text);
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.6);
    /* Полупрозрачный белый фон */
    backdrop-filter: blur(8px);
    /* Эффект матового стекла */
    padding: 15px 20px;
    border-radius: 20px;


}

.section-divider {
    position: relative;
    height: 0;
    width: 100%;
    z-index: 10;

}

.section-decoration {
    position: absolute;
    pointer-events: none;
    user-select: none;

}

.decor-turtle {
    width: 10%;
    height: auto;

    left: calc(50% + 300px);

    transform: translate(-50%, -50%);

    img {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 768px) {
    .decor-turtle {
        display: none;
    }
}


.container {
    width: 100%;
    max-width: 1920px;
    padding-left: clamp(1.25rem, 5.49vw - 5.4px, 100px);
    padding-right: clamp(1.25rem, 5.49vw - 5.4px, 100px);

    margin: 0 auto;
    padding-bottom: 20px;
    padding-top: 20px;


}

/* HEADER section */
.header {
    width: 100%;
    z-index: 1000;
}

.header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;

}



.header-address a {
    display: flex;
    /* align-items: flex-start;  */
    gap: 10px;
    font-style: normal;



}

.header-address .address-icon {
    flex-shrink: 0;
}

.address-text {

    line-height: 1.2;

    font-size: clamp(0.6875rem, 0.6rem + 0.4375vw, 1.125rem);
    font-size: clamp(0.8125rem, 0.75rem + 0.3125vw, 1.125rem);


    color: var(--color-purple-text);
}

.logo-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.5rem, 0.25rem + 1.25vw, 1rem);
}

.logo-logo {
    height: var(--icon-size);
}

.logo-text {
    height: clamp(10px, 8px + 0.625vw, 20px);
}

.header-nav .nav-list {
    display: flex;
    gap: 25px;
    list-style: none;

    font-weight: 500;
}

.header-nav a:hover {
    color: var(--color-orange);
}

.menu-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    /* color: var(--color-purple); */
    font-weight: 400;
    /* Обычный вес */
}

/* Скрытый псевдоэлемент, который резервирует место */
.menu-item::after {
    content: attr(data-text);
    /* Берет текст из HTML-атрибута */
    font-weight: 700;
    /* Жирный вес */
    height: 0;
    /* Схлопываем по высоте, чтобы не влиял на вертикаль */
    visibility: hidden;
    /* Делаем невидимым */
    overflow: hidden;
    /* Прячем излишки */
    user-select: none;
    /* Запрещаем выделение мышкой */
    pointer-events: none;
    /* Игнорируем клики */
}

/* Эффект при наведении */
.menu-item:hover {
    font-weight: 700;
    /* Включаем жирный шрифт */
}

.menu-overlay {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100vw;
    height: 100vh;

    z-index: 10;
    display: none;
        background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


/* Таблетка шапки с двумя номерами: фон на обёртке, номера стопкой.
   Высота подогнана под 52px строки контактов (7+2*18.2+1+7 ≈ 51px). */
.header-phones {
    background-color: var(--color-purple);
    border-radius: 25px;
    padding: 7px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    transition: background-color 0.2s;
}

.header-phones:hover {
    background-color: var(--color-orange);
}

.header-phone-link {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    white-space: nowrap;
}

.header-phone-link:hover {
    color: #FFFFFF;
    text-decoration: underline;
}



.mobs {
    display: none;
}

.landing-section {

    display: flex;
    align-items: center;
}

.action-button {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 50px;
    text-shadow:
        0px 1px 2px rgba(42, 27, 64, 0.8),
        0px 0px 4px rgba(42, 27, 64, 0.4);
    letter-spacing: 0.03em;
    font-weight: normal;
    /* font-style: Medium; */
    font-size: clamp(1.125rem, 1rem + 0.63vw, 1.5rem);
    /* 18px -> 24px */

    white-space: nowrap;
    min-width: 180px;

    box-sizing: border-box;

    max-width: 420px;

    width: 100%;
    vertical-align: middle;
    border: none;
    cursor: pointer;
    /* transition: 0.3s; */
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    user-select: none;
    /* -webkit-user-select: none; */
}



.btn-cancel {
    background-color: #EDECF0;
    color: var(--color-purple-text);
    text-shadow: none;
}

.btn-orange {
    background-color: var(--color-orange);
    /* background-color: #ED5100; */
    color: #FFFFFF;
    /* text-shadow: 2px 2px 0px ; */
    text-shadow:
        0px 1px 2px rgb(107, 36, 0, 0.8),
        0px 0px 4px rgb(107, 36, 0, 0.4);
}

.btn-purple {
    background-color: var(--color-purple);
    color: #fff;
}

.btn-white {
    background-color: #fff;
    color: var(--color-purple-text);
    border: 2px solid #E6CBF2;
    text-shadow: none;

}

@media(hover: hover) {


    .btn-orange:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(249, 139, 75, .5);
        color: #fff;
        font-weight: normal;
    }

    .btn-purple:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(134, 97, 209, 0.5);
    }


    .method-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(134, 97, 209, 0.15);
    }

}

.action-button:active {

    transform: scale(0.96) translateY(1px);

}


#hero {
    background: var(--grad-yellow);

}

.hero-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    gap: 1.875rem;
    /* Расстояние между картинкой и текстом */
    align-items: center;
    margin: 0 auto;

}

.hero-content {
    max-width: 840px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* margin-bottom: 40px; */
    align-items: center;
    text-align: center;
}

.hero-content h4 {
    font-weight: 500;
    vertical-align: middle;
    color: var(--color-transparent-black);
}

@media (min-width: 1570px) {
    .break-line {
        display: block;
    }
}


.action-wrap {
    text-align: center;
    margin: 40px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.hero-image {
    position: relative;
    display: inline-block;


}

.faq-image {
    position: relative;


}

.hero-image-main {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}


.image-decor {
    pointer-events: none;

    position: absolute;
    z-index: 3;
}

.decor-ellipse {
    position: absolute;


    width: 101%;
    height: 96%;
    top: 1%;
    left: -1%;

    /* Оформление самой линии эллипса внутри SVG */
    fill: none;
    /* Прозрачный внутри */
    stroke: #FFD682;
    /* Цвет линии (поменяйте на свой) */
    stroke-dasharray: 6 4;
    /* Длина штриха 8px, промежуток 6px */
    stroke-width: 2px;
    /* 1px на мобильных по умолчанию */

    z-index: 2;
    pointer-events: none;
}

.faq-ellipse {

    stroke-dasharray: 4 4 !important;

    width: 104%;
    height: 105%;
    top: -2%;
    left: -1%;
}


.decor-rainbow {
    width: 30%;
    height: auto;
    top: 0;
    right: 45%;
    transform: translateY(-10%);
}

.decor-puppy {
    width: 22%;
    bottom: 13%;
    right: 93%;
}

.flower-large {
    width: 10%;
    height: auto;
    bottom: 15%;
    right: -2%;
    transform: rotate(-15deg);
}

/* Второй цветочек (поменьше, ближе к самому углу) */
.flower-small {
    width: 6%;
    height: auto;
    bottom: 27%;
    right: -4%;
    transform: rotate(10deg);
}

@media (max-width: 1490px) {
    .flower-large {

        bottom: 5%;
        right: 9%;
    }

    .flower-small {

        bottom: 17%;
        right: 4%;

    }
}


.title-bold {
    font-family: "Ramona", sans-serif;
    font-weight: 700;
    font-style: Bold;

    text-transform: uppercase;


    letter-spacing: -2%;
    margin-bottom: 24px;
}

.title-light {
    font-family: 'Ramona-Light', sans-serif;
    font-weight: 300;
    /* Ramona Light */


    margin-bottom: 40px;

}

.feature-container {
    padding-left: 0;
    padding-right: 0;
}

/* контейнер обнуляет отступы ради волны на всю ширину,
   но заголовок из-за этого упирался в край экрана */
.feature-container .title-light {
    padding-left: clamp(1.25rem, 5.49vw - 5.4px, 100px);
}





.wave-container {
    max-width: 1920px;
    margin: 0 auto;
    /* Центрируем всю конструкцию на экранах > 1920px */
    position: relative;
}

.wave-svg {

    display: block;
    width: 100%;
    height: auto;

}

#card-container {
    width: 1720px;
    height: 300px;


    x: 120;
    y: 50;
}

.unique-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.double {
    display: none;
}

.unique-item {
    text-align: center;
    max-width: 404px;
    height: 300px;
}

.unique-item h3 {
    text-align: left;

    font-weight: 500;
}

.unique-item p {
    color: var(--color-grey);
    text-align: left;

    font-weight: 400;

}

.unique-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    position: relative;
    z-index: 2;
}

@media (max-width: 1300px) {
    .wave-container {
        display: none;
    }

    .double {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 30px;
        /* Отступы: 40px между строками, 30px между колонками */
        /* max-width: 1000px; */
        margin: 0 auto;
        padding-top: 20px;
    }

    .unique-grid {

        padding-left: clamp(1.25rem, 5.49vw - 5.4px, 100px);
        padding-right: clamp(1.25rem, 5.49vw - 5.4px, 100px);

    }

    /* Элементы 1-й строки (1 и 2) прижимаем к левому краю своих колонок */
    .unique-item:nth-child(1),
    .unique-item:nth-child(2) {
        justify-self: start;
    }

    /* Элементы 2-й строки (3 и 4) прижимаем к правому краю своих колонок */
    .unique-item:nth-child(3),
    .unique-item:nth-child(4) {
        justify-self: end;
    }

    .unique-item {
        background: #fff;
        border: 1px solid rgba(134, 97, 209, 0.2);
        box-shadow: 0 10px 30px rgba(134, 97, 209, 0.1);
        border-radius: 20px;
        padding: 50px 20px 30px;
        position: relative;
    }

    .unique-icon {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-bottom: 0;

    }
}



@media (max-width: 768px) {
    .wave-container {
        display: none;
    }

    .double {
        display: grid;
        grid-template-columns: 1fr;
        gap: 50px;
        /* Отступы: 40px между строками, 30px между колонками */

    }


    .unique-item {
        /* На мобильных делаем карточки на всю ширину */
        max-width: 100%;
        /* Сбрасываем привязку к краям */
        justify-self: stretch !important;
    }





}

.about-wrap,
.methods-wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
    /* Расстояние между тремя крупными секциями */
    width: 100%;

}

.row-wrap {
    display: grid;
    /* Минимальная высота секции, чтобы на широких экранах картинка смотрелась эффектно */
    /* clamp(мин_высота, предпочтительная_высота, макс_высота) */
    /* min-height: clamp(350px, 45vh, 600px);  */

    gap: clamp(10px, 5vw, 20px);

    transition: all 0.3s ease;
}

.row-top {
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "media content";
}

.row-bottom {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "content media";
}

.faq-wrap {
    grid-template-columns: 1fr 2fr;
    /* 1/3 левая колонка, 2/3 правая */
    grid-template-areas: "media content";


}

.column-media {
    grid-area: media;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.column-text {
    grid-area: content;
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: clamp(10px, 5vw, 20px);
    border-radius: 15px;
}

.accordion-wrap {
    gap: clamp(10px, 5vw, 20px);
}


.column-text p {

    font-weight: 500;
    font-style: Medium;
    letter-spacing: 0%;

}

.column-text h3 {

    font-size: clamp(14px, 2.5vw, 24px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: clamp(8px, 2vw, 16px);

    letter-spacing: 0%;
    vertical-align: middle;
}

.about-right {

    box-shadow: 0px 4px 4px 0px #00000026;

}

.about-left {
    background: linear-gradient(360deg, rgba(255, 240, 179, 0.59) 16.95%, rgba(255, 255, 255, 0.59) 100%);

}

.about-social-banner {

    display: flex;

    flex-direction: row;
    justify-content: center;
    gap:30px;

    align-items: center;
    background: #FFF0B2;
    width: 100%;
    min-height: 100px;

    border-radius: 8px;

    padding: 20px 70px;
}

.about-social-banner h3 {

    color: var(--color-orange-dark);
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);

}

.social-banner-icons-wrap {
    display: flex;

    flex-direction: row;
    gap: 20px;


}


.about-social-button {
 display: inline-flex;
  align-items: center;
  justify-content: center;
gap: clamp(1rem, 0.875rem + 0.625vw, 1.625rem);            
  

  padding: 16px 50px;      
  border: 2px solid var(--color-orange);
  border-radius:44px;      
  font-family: inherit;
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 2%;
  text-decoration: none;
  transition: all 0.2s ease;

  img {
    width:  clamp(1.5rem, 1.35rem + 0.75vw, 2.25rem);
  }
}
.about-social-button:active {

    transform: scale(0.96) translateY(1px);

}

.vk-sbbtn {
    background-color: var(--color-orange);
    
    color: #fff;
    box-shadow: 0px 1px 2px rgba(107, 36, 0, 0.2), 0px 0px 4px rgba(107, 36, 0, 0.1);
     img {
          filter: brightness(0) invert(1);
     }
}

.max-sbbtn {
    background-color: #fff;
    color: var(--color-orange-dark);
}




@media (max-width: 1200px) {
.about-social-banner {
    flex-direction: column;
    text-align: center;

}
    
    /* Чуть-чуть меняем пропорции колонок с 1/3 и 2/3 на 40% и 60% для лучшей читаемости */
    .row-top {
        grid-template-columns: 1.2fr 1.8fr;
    }

    .row-bottom {
        grid-template-columns: 1.8fr 1.2fr;
    }
}

@media (max-width: 820px) {
    .row-wrap {
        /* Переключаем грид на одну колонку */
        grid-template-columns: 1fr;
        min-height: auto;
        /* Сбрасываем жесткую высоту */
    }

    /* 
               Переопределяем порядок элементов для мобилок через grid-template-areas!
               На мобильном картинка ВСЕГДА будет сверху, а текст снизу, 
               независимо от того, как они стояли на десктопе.
            */
    .row-top,
    .faq-wrap {
        grid-template-areas:
            "media"
            "content";
    }

    .row-bottom {
        grid-template-areas:
            "content"
            "media";
    }

    .column-media {
        /* height: 250px;  */
    }

    .column-text {
        padding: 30px 24px !important;
        /* Уменьшаем отступы для пальцев */
    }

    .accordion-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.purple-bold {
    margin-top: 20px;

    font-weight: 700 !important;
    font-style: Bold !important;
    font-size: 20px !important;


    letter-spacing: 0%;
    color: var(--color-purple-text);

}



.mosaic-grid {
    display: grid;
    gap: 28px;
}

.grid-pic-1 {
    grid-area: img1;
}

.grid-pic-2 {
    grid-area: img2;

}

.grid-text-1 {
    grid-area: t1;
}

.grid-text-2 {
    grid-area: t2;
}

.grid-text-3 {
    grid-area: t3;
}

.grid-text-4 {
    grid-area: t4;
}

.grid-text-5 {
    grid-area: t5;
}

.grid-text-6 {
    grid-area: t6;
}

.grid-item {
    max-width: 530px;
    width: 100%;
}

.grid-item img {
    width: 100%;
}

@media (max-width: 767px) {

.social-banner-icons-wrap {
    flex-direction: column;
}

    .mosaic-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (min-width: 768px) and (max-width: 1599px) {
    .mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "img1   t1"
            "img1   t2"
            "img1   t3"
            "t4     img2"
            "t5     img2"
            "t6     img2";
    }

}

@media (min-width: 1600px) {
    .mosaic-grid {
        grid-template-columns: repeat(3, 1fr);

        grid-template-rows: repeat(4, 1fr);
        grid-template-areas:
            "img1   t2   t6"
            "img1   t3   img2"
            "img1   t4   img2"
            "t1     t5   img2";

    }

    .title-light,
    .feature-container .title-light {
        padding-left: calc(clamp(1.25rem, 5.49vw - 5.4px, 100px) + 80px);
    }

}

.card-p {
    padding: 30px 36px;
    border-radius: 90px;
    text-align: center;
    font-weight: 500;
    font-style: Medium;
    line-height: 1.2;
    letter-spacing: 0%;
    text-align: center;
    font-size: clamp(0.75rem, 0.65rem + 0.52vw, 1.375rem);
}

.l-purple {
    background: linear-gradient(180deg, #F0D5FD 0%, #D5ABE9 100%);
}

.l-blue {
    background: linear-gradient(180deg, rgba(178, 230, 252, 0.8) 0%, rgba(104, 206, 248, 0.8) 100%);
}

.l-orange {
    background: linear-gradient(180deg, rgba(255, 174, 117, 0.8) 0%, rgba(249, 139, 75, 0.8) 100%);
}

.yellow {
    background: linear-gradient(180deg, #FFE2A8 0%, #FFD682 100%);

}

.l-yellow {
    background: #FFF8C4;

}

.hollow-orange {
    border: 2px solid #F98B4B;
    color: var(--color-orange-dark);
}

#methods {
    background: linear-gradient(180deg, #FFFFFF 0%, #E6CDF2 100.78%);
}


.methods-grid {
    gap: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.method-card {
    position: relative;

    flex-basis: 530px;
    /* flex: 1;  */
    /* max-width: 530px; */
    background: #fff;
    border-radius: 20px;
    padding: 50px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(134, 97, 209, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 85px;

}

.method-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 0;
    /* background: #fff; */
}

.method-icon img {}

.method-card h4 {

    font-weight: 500;




    letter-spacing: 0%;
    text-align: center;

}

.method-card p {
    text-align: left;

    font-weight: 400;




    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--color-grey);

}






#price {
    /* max-width: 1100px; */
    margin: 0 auto;

}


.price-main-card {
    border: 1px solid #F98B4B;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 8px 24px rgba(74, 144, 226, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    color: var(--text-dark);
    text-align: center;
}

.main-card__info {
    flex: 1;
    min-width: 280px;
}

.main-card__badge {

    text-align: left !important;
    color: #F98B4B;
    width: 100%;
    padding-left: 20%;
    font-size: 0.85rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
}

.main-card__title {
    font-size: 1.8rem;
    margin: 0 0 10px 0;
    color: var(--text-dark);
}

.main-card__desc {
    color: var(--text-muted);
    margin: 0;
}



.price-tag {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-dark);

}

.program-card {
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    transition: transform 0.2s, box-shadow 0.2s;
}

.program-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.program-card__title {
    font-size: 1.4rem;
    margin: 0 0 15px 0;
    color: var(--color-purple);
}

.program-card__features {
    display: block;
    list-style: none;
    padding: 0;
    margin: 10px 0 18px 0;
    flex-grow: 1;
    /* буллиты — это конкретика результата, читаются списком, а не по центру */
    text-align: left;
}

.program-card__features li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 22px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.35;
}

.program-card__features li::before {
    content: "✓";
    color: var(--secondary-color);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Скрытый блок (Аккордеон) */
.accordion-section {
    border-top: 1px solid #E0E0E0;
    padding-top: 30px;
}

.price-subscription-note {
    display: block;
    width: fit-content;
    max-width: 760px;
    min-height: 56px;
    margin: 0 auto 26px;
    padding: 16px 24px;
    border-radius: 20px;
    background-color: #F7F3FF;
    box-shadow:
        0 0 0 1px rgba(121, 84, 196, 0.14),
        0 8px 20px rgba(121, 84, 196, 0.08);
    color: var(--text-dark);
    font-size: 1.05rem;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
    text-wrap: pretty;
    transition-property: background-color, box-shadow, transform;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
}

.price-subscription-note span {
    color: var(--color-purple-text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (hover: hover) {
    .price-subscription-note:hover {
        background-color: #F2EBFF;
        box-shadow:
            0 0 0 1px rgba(121, 84, 196, 0.2),
            0 10px 24px rgba(121, 84, 196, 0.12);
    }
}

.price-subscription-note:focus-visible {
    outline: 3px solid rgba(121, 84, 196, 0.35);
    outline-offset: 3px;
}

.price-subscription-note:active {
    transform: scale(0.96);
}

.accordion-toggle {
    display: none;
}

/* Два тумблера прайса: кнопки-«пилюли» в стиле btn-white */
.toggle-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.accordion-label {
    display: inline-block;
    background-color: #fff;
    color: var(--color-purple-text);
    border: 2px solid #E6CBF2;
    border-radius: 50px;
    font-weight: 600;
    text-align: center;
    padding: 15px 30px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

@media(hover: hover) {
    .accordion-label:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(134, 97, 209, 0.25);
    }
}

.accordion-label:active {
    transform: scale(0.96) translateY(1px);
}

.accordion-label::after {
    content: " ▼";
    font-size: 0.8rem;
}

/* Текст кнопки: «Показать…» в закрытом виде, «Скрыть…» в открытом */
.toggle-text-open {
    display: none;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Магия CSS: каждый чекбокс открывает свою таблицу */
#toggle-services:checked~.toggle-content-services,
#toggle-programs:checked~.toggle-content-programs {
    max-height: 6000px;
    /* С запасом под всю таблицу (36 строк) + переносы на мобильном */
    transition: max-height 0.5s ease-in;
}

#toggle-services:checked~.toggle-buttons .toggle-label-services,
#toggle-programs:checked~.toggle-buttons .toggle-label-programs {
    background-color: var(--color-light-purple);
    color: #fff;
    border-color: var(--color-light-purple);
}

#toggle-services:checked~.toggle-buttons .toggle-label-services::after,
#toggle-programs:checked~.toggle-buttons .toggle-label-programs::after {
    content: " ▲";
}

#toggle-services:checked~.toggle-buttons .toggle-label-services .toggle-text-closed,
#toggle-programs:checked~.toggle-buttons .toggle-label-programs .toggle-text-closed {
    display: none;
}

#toggle-services:checked~.toggle-buttons .toggle-label-services .toggle-text-open,
#toggle-programs:checked~.toggle-buttons .toggle-label-programs .toggle-text-open {
    display: inline;
}

/* Заголовок над каждой таблицей — видно, какая где, когда открыты обе */
.price-table-title {
    margin-top: 30px;
    text-align: center;
    color: var(--color-purple-text);
}

/* Таблица цен внутри аккордеона */
.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.price-table th,
.price-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #E0E0E0;
}

.price-table td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.price-table th {
    background-color: transparent;
    color: var(--text-dark);
    font-weight: 600;
}

.price-table__category {
    background-color: #FAFAFA;
    font-weight: bold;
    color: var(--primary-color);
}

.text-right {
    text-align: right;
}

@media (max-width: 767px) {


    .price-subscription-note {
        width: 100%;
        min-height: 52px;
        margin-bottom: 22px;
        padding: 14px 16px;
        border-radius: 18px;
        font-size: 0.95rem;
    }


    .price-table th,
    .price-table td {
        padding: 10px;
        font-size: 0.9rem;
    }
}



.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));


    gap: 25px;
    margin-bottom: 40px;

}

.pricing-card {
    flex:  1 1 calc(33.3333% - 25px);
    background: #fff;
    border-radius: 20px;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); */
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    height: 100%;


}

.pricing-square-top {

    /* без ширины рамка тянулась по тексту: у карточек она получалась разной,
       а длинные описания вылезали за края карточки */
    width: 100%;
    min-height: 400px;
    height: 100%;
    padding: 20px;
    text-align: center;
    border: 3px solid #DBD7FD;
    border-radius: 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pricing-rect-bottom {
    width: calc(100% - 40px);
    min-height: 80px;
    padding: 10px 15px;
    background-color: rgba(134, 97, 209, 0.5);
    border-radius: 15px;

    /* цена прижималась к левому верхнему углу плашки */
    display: flex;
    align-items: center;
    justify-content: center;

    /* плашка всегда у нижнего края карточки: без этого в коротких карточках
       (без буллетов) цены висели на разной высоте */
    margin-top: auto;
}

#faq {

    background: var(--grad-yellow);
}

#faq .column-media {
    overflow: visible !important;
}

.accordion-item {
    background: #FFFFFF;
    /* Белый фон */
    border: 2px solid #FFD682;
    /* Рамочка */
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.accordion-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 214, 130, 0.15);
}

/* Кнопка-триггер */
.accordion-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    color: #000000;
    /* Черный текст */
    cursor: pointer;
    outline: none;
}

/* Оранжевый плюсик */
.accordion-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-left: 16px;
}

/* Рисуем плюс на чистом CSS */
.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    background-color: #FFA500;
    /* Насыщенный оранжевый */
    transition: transform 0.3s ease-in-out;
    border-radius: 2px;
}

/* Горизонтальная линия */
.accordion-icon::before {
    top: 8px;
    left: 0;
    width: 18px;
    height: 2px;
}

/* Вертикальная линия */
.accordion-icon::after {
    top: 0;
    left: 8px;
    width: 2px;
    height: 18px;
}

/* Анимация плюса в минус при открытии */
.accordion-item.active .accordion-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

.accordion-item.active .accordion-icon::before {
    transform: rotate(180deg);
}

.accordion-content-inner {
    padding: 0 24px 20px 24px;
    font-size: 1rem;
    line-height: 1.6;
    color: #333333;
    /* Слегка приглушенный черный для читаемости тела ответа */
}

#contacts {
    padding-bottom: 80px;
    background: linear-gradient(360deg, rgba(230, 205, 242, 0.5) 0%, rgba(255, 255, 255, 0.5) 90.87%);
}

.contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 25px;
    grid-template-areas: "info map form";
}

.contacts-col {
    padding: 25px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    /* без min-width колонки грида не сжимаются уже своего контента
       и вылезают за экран на планшете и мобильном */
    min-width: 0;
}

.col-info {
    grid-area: info;
    justify-content: space-between;
    gap: 24px;
}
    .info-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }


.col-map {
    grid-area: map;
    padding: 0;
    overflow: hidden;
    min-height: 350px;
}

.col-form {
    grid-area: form;
    border-radius: 15px;
    background-color: #D5ABE980;
    text-align: center;
}

.map-container {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 15px;
    pointer-events: none;
}

.map-container:active iframe,
.map-container:focus-within iframe {
    pointer-events: auto;
}
 
.form-title {
    font-size: 1.25rem;
    margin-bottom: 15px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    height: 100%;
    padding: 0 15px;
}

.form-input {
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #f8fafc;
    outline: none;
}

.form-input:focus {
    border-color: var(--color-purple);
    background: #fff;
}

/* 1. Прячем стандартный чекбокс, но оставляем доступным для клавиатуры */
.checkbox-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    /* font-family: sans-serif; */
    font-size: 16px;
    user-select: none;
 justify-content: center;
}

/* текст со ссылкой — один flex-элемент, иначе они рвутся на две колонки */
.checkbox-text {
    text-align: left;
}

.checkbox-box {
    position: relative;
    /* без flex-shrink квадратик сплющивается в полоску на узких экранах */
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border: 2px solid var(--color-purple-text-muted);
    border-radius: 6px;
    /* Закругленные углы */
    background-color: #fff;
    transition: all 0.2s ease-in-out;
}

.checkbox-label:hover .checkbox-box {
    border-color: var(--color-purple);
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.3);
}

.checkbox-input:checked+.checkbox-box {
    border-color: var(--color-purple-text);
    background-color: var(--color-purple);
    /* Синий фон */
}

/* Рисуем галочку внутри квадрата через псевдоэлемент */
.checkbox-box::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    /* Оставляем только нижнюю и правую рамки */
    transform: rotate(45deg) scale(0);
    /* Поворачиваем на 45 градусов и прячем */
    transition: transform 0.2s ease-in-out;
}

/* Показываем галочку при клике с красивой анимацией */
.checkbox-input:checked+.checkbox-box::after {
    transform: rotate(45deg) scale(1);
    /* Плавное появление */
}

/* Стили при фокусе с клавиатуры (веб-доступность) */
.checkbox-input:focus-visible+.checkbox-box {
    outline: 2px solid #000;
    outline-offset: 2px;
}


.social-row {
    display: flex;
    flex-direction: column;
 gap: 24px;
}


.btn-submit {
    border: none;
    margin-top: auto;
    width: 100%;
}


@media (min-width: 768px) and (max-width: 1024px) {
    .contacts-grid {
        grid-template-columns: 1fr 1fr;
        /* Две колонки */
        grid-template-areas:
            "info form"
            "map map";
        gap: 20px;
    }

    .col-map {
        min-height: 250px;
        /* Уменьшенная высота карты для планшета */
    }

}

/* ==========================================
       МЕДИА-ЗАПРОС: МОБИЛЬНЫЙ (до 767px)
       ========================================== */
@media (max-width: 767px) {
    .contacts-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "info"
            "map"
            "form";
        gap: 20px;
    }



    .social-row {
        flex-wrap: nowrap;
        /* Соцсети в одну строку */
    }

    .col-map {
        min-height: 300px;
    }
}

@media (max-width: 1200px) {
    
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .pricing-card.featured {
        transform: none;
        border: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }
}

@media (max-width: 768px) {


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

    .pricing-card.featured {
        transform: scale(1.05);
        box-shadow: 0 20px 50px rgba(134, 97, 209, 0.2);
        border: 2px solid var(--color-purple);
    }


}

/* footer */
.footer {
    margin-top: -35px;
    /* position: relative; */
    /* padding: 100px 0 60px; */
    background: url("../img/background_footer.png");
    height: 496px;
    width: 100%;
    color: var(--color-purple-text)
        /* border-top: 1px solid rgba(134, 97, 209, 0.2); */
}


.footer-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.footer-col {
    flex: 1;
}

.footer-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    height: 75px;
}


.footer-nav {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;

}

.footer-address {
    font-style: normal;
    font-size: 0.9rem;
}


.footer-contacts {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 15px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.footer-phone {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-purple);

    /* два номера — стопкой, по правому краю (на мобильном перецентровано ниже) */
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}



dialog {
    margin: auto;
    /* padding: 24px; */


    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);


    box-sizing: border-box;


    border: none;

  max-width: 100vw;
  max-height: 100dvh;

  width: 100vw;
  height: 100dvh;
   background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

dialog:not([open]) {
    display: none;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

}

/* Контент окна */
.modal-content {
    background: #fff;
    width: 100%;
    max-width: 90dvw;
    margin: 0 auto;
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    position: relative;

    /* animation: slideIn 0.3s ease; */
}

.call-modal-content {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    /* Идеальный шаг для отступов между полями и кнопками */
}

.modal-form-content {

    max-width: none;
  height: 100dvh;
  margin: 0;

  padding: 20px;
}
.modal-header,
.modal-footer {
  flex: 0 0 auto;
  padding: 15px 20px;
  text-align: center;

}

.form-scroll-body {
          flex: 1 1 auto;
  overflow-y: auto !important;
  height: 100%; /* Заставляет блок растянуться и включить собственный скролл */
  min-height: 0; /* Важный хак для flex-элементов, чтобы они могли уменьшаться/скроллиться */

}

.form-group {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column; 
    align-items: stretch;
}

.fade-in {
    animation: fadeInEffect 0.4s ease forwards;
}

@keyframes fadeInEffect {
    from {
        opacity: 0;
        transform: translateY(10px);
        /* Легкий эффект всплытия */
    }

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

@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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


/* Кнопка крестик */
.modal-close-x {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    height: 44px;
    width: 44px;
    border: 2px solid var(--color-light-purple);
    border-radius: 50%;
    font-size: 28px;
    color: var(--color-light-purple);

    cursor: pointer;
}


@media (max-width: 768px) {
    .desktops {
        display: none;
    }

    .mobs {
        display: block;
    }

    .landing-section {
        padding: 30px 0;
    }


    #burger {
        display: flex;
        flex-direction: column;
        /* Полосочки должны встать друг под друга */
        justify-content: center;
        align-items: center;
        gap: 3px;
        height: 44px;
        width: 44px;
        border-radius: 50%;
        border: 2px solid var(--color-light-purple);
        padding: 0;
    }

    .header {

        position: fixed !important;
        top: 0;
        z-index: 1000 !important;
        background-color: #ffffff;

    }

    .page-content {
        padding-top: var(--header-height);
        overflow: hidden;
        text-align: center;
    }

    .footer {
        background: none;
        background: linear-gradient(180deg, #D5ABE9 0%, #EBD6F3 69.71%);
        padding-top: 50px;
    }

    .header-wrap {
        height: var(--header-height);
        position: relative;
    }

    .header-mobile-menu {
        position: absolute;
        top: calc((var(--header-height) - 44px) / 2);
        left: var(--header-padding-h);

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 44px;
        height: 44px;
        cursor: pointer;
        z-index: 1010;
    }

    .header-mobile-menu .bar1,
    .header-mobile-menu .bar2,
    .header-mobile-menu .bar3 {
        display: block;
        width: 30px;
        height: 3px;
        background-color: var(--color-light-purple);
        transition: all 0.3s ease-in-out;
    }

    /* Красивая анимация бургера в крестик при открытии меню (класс .active вешается через JS) */
    .header-mobile-menu.change .bar1 {
        transform: translateY(6px) rotate(45deg);
    }

    .header-mobile-menu.change .bar2 {
        opacity: 0;
    }

    .header-mobile-menu.change .bar3 {
        transform: translateY(-6px) rotate(-45deg);
    }

    .header-logo {
        position: absolute;
        left: 50%;
        top: var(--header-padding-v);
        transform: translate(-50%, 0);
        z-index: 1005;

    }



    .header-mobile-phone-btn {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: calc((var(--header-height) - 44px) / 2);
        right: var(--header-padding-h);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: #BCA1F0;
        border: none;


        transition: transform 0.1s, background-color 0.2s;
        z-index: 1005;
    }

    .header-mobile-phone-btn:active {
        transform: scale(0.96);
        /* Эффект нажатия */
    }

    .header-mobile-phone-btn img {
        width: 18px;
        height: 18px;
    }

    .header-right .social-wrap {
        display: none;
    }

    .header-center {
        display: none;
    }

    .header-menu {
        display: none;
        /* Скрыто по умолчанию */
    }

    .header-menu.active {
        display: flex;
        flex-direction: column;
        /* Навигация сверху, адрес снизу */
        align-items: center;

        position: fixed;
        top: var(--header-height);
        /* Выпадает ровно под линией хедера */
        left: 0;
        width: 100%;
        /* height: calc(100vh - var(--header-height));  */
        background-color: #ffffff;
        padding: 40px 20px;
        gap: 30px;
        z-index: 1000;
        overflow-y: auto;
    }
    

    .header-nav .nav-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        list-style: none;
    }

    .header-address a {
        display: flex;
        align-items: center;
        gap: 8px;

        font-style: normal;
        order: 2;

        margin-top: auto;

    }


    /* TODO: добавить js-fallback, когда это не поддерживается  !important */
    @supports (selector(:has(*))) {
        .landing-section {
            display: none;
        }

        .base-section,
        #contacts {
            display: block;
        }

        .standalone-section {
            display: none;

        }

        .page-content:has(#price:target),
        .page-content:has(#faq:target),
        .page-content:has(#about:target) {

            .base-section {
                display: none;
            }

            :target {
                display: block;
            }
        }

        .page-content:has(#contacts:target) .base-section {
            display: none;
        }
    }

    h2 {
        text-align: center;
    }



    .container {
        margin: 0 auto;
    }

    .hero-wrap {}

    .decor-puppy {
        width: 15%;
        bottom: 8%;
        right: 87%;
        /* transform: rotate(-15deg); */
    }

    .footer-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
    }

    /* Свойство `order` позволяет легко менять порядок элементов в Flexbox */

    /* 1. Логотип */
    .footer-logo {
        order: 1;
        flex-direction: column;

    }

    .footer-logo .logo-logo {
        height: 56px;
        width: auto;
    }

    .footer-logo .logo-letters {}

    /* 2. Телефон */
    .footer-phone {
        order: 2;
        align-items: center;
    }

    .footer-phone-link {

        font-weight: 700;

    }

    /* 3. Соцсети */
    .footer-social {
        order: 3;
        display: flex;
        gap: 16px;
    }

    .footer-social img {
        width: 28px;
        height: 28px;
    }


    .footer-nav {
        order: 4;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 48px;
        /* Отступы: 12px между строками, 24px между словами */
        max-width: 300px;
        /* Ограничиваем ширину, чтобы 5 ссылок гарантированно разбились на 2 строки */
        margin: 0 auto;


        /* Твои границы (опционально) */
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 20px 0;
    }

    .footer-nav a {}

    /* 5. Адрес */
    .footer-address {
        order: 5;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        font-style: normal;



    }

    .footer-address .address-icon {
        width: 20px;
        height: 20px;
    }

    .hero-image {
        order: 1;
        text-align: center;
        margin: 0;
    }

    .hero-address {
        order: 2;
    }
}

@media (min-width: 769px) {
    .mobs {
        display: none;
    }

    .landing-section {
        display: block;
    }

    .header-wrap {


        min-height: 164px;
    }

    .header-logo img {
        height: 100%;
        width: auto;
    }

    .header-menu {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 10px;
    }

    .header-contacts-desk {
        height: 52px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-content: center;
    }

    .header-social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background-color: var(--color-purple);
        /* Ваш фиолетовый цвет */
        border-radius: 50%;
        /* Делает фон круглым */
    }

    .header-social-link:hover {
        background-color: var(--color-orange);
    }

    .white-svg {
        width: 24px;
        /* Задайте нужный размер иконки */
        height: 24px;

        /* Фильтр: делает инверсию в белый цвет независимо от исходного цвета SVG */
        filter: brightness(0) invert(1);
    }


    .hero-wrap {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }

    .hero-content {
        align-items: flex-start;
        text-align: left;
    }

    .decor-ellipse {
        stroke-dasharray: 8 8;
        stroke-width: 2px;
    }

    .footer {
        /* padding: 50px 100px; */
        padding-top: 110px;

    }


    .footer-wrap {
        display: grid;
        /* Определяем 3 колонки:
           - 1-я: авто (для логотипа)
           - 2-я: 1fr (гибкая, для меню и адреса)
           - 3-я: авто (для соцсетей и телефона) */
        grid-template-columns: auto 1fr auto;
        /* Определяем 2 строки:
           - 1-я: авто (для меню и соцсетей)
           - 2-я: авто (для адреса и телефона) */
        grid-template-rows: auto auto;
        /* Отступы между ячейками: gap-row gap-column */
        gap: 16px 40px;
        align-items: center;
        /* Выравнивание элементов по центру строки */
    }

    /* Логотип: занимает 1-ю колонку и растягивается на 2 строки */
    .footer-logo {
        grid-column: 1;
        grid-row: 1 / span 2;
        /* Начинается в 1-й строке и занимает 2 строки */
        align-self: center;
    }

    .footer-logo .logo-logo {
        height: 75px;
        width: auto;
    }

    /* Навигация: 2-я колонка, 1-я строка, по центру */
    .footer-nav {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        /* Выравнивает элемент по центру ячейки */
        display: flex;
        gap: 25px;
    }

    /* Адрес: 2-я колонка, 2-я строка, по центру */
    .footer-address {
        grid-column: 2;
        grid-row: 2;
        justify-self: center;
        display: flex;
        align-items: center;
        gap: 8px;
        font-style: normal;

        color: #8661d1;

    }

    .footer-address .address-icon {
        width: 16px;
        height: 16px;
    }

    /* Соцсети: 3-я колонка, 1-я строка, по правому краю */
    .footer-social {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        /* Выравнивает элемент по правому краю ячейки */
        display: flex;
        gap: 12px;
    }

    .footer-social img {
        width: 24px;
        height: 24px;
        transition: transform 0.2s;
    }

    .footer-social img:hover {
        transform: scale(1.1);
    }

    /* Телефон: 3-я колонка, 2-я строка, по правому краю */
    .footer-phone {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .footer-phone-link {

        font-weight: 700;
        white-space: nowrap;
        /* Чтобы номер не переносился */
    }
}

/* На узких планшетах широкая контактная группа переполняет шапку.
   Оставляем десктопное меню, но заменяем контакты компактной кнопкой звонка. */
@media (min-width: 769px) and (max-width: 939px) {
    .header-contacts-desk {
        display: none;
    }

    .header-mobile-phone-btn.mobs {
        display: flex;
        flex: 0 0 44px;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background-color: #BCA1F0;
        transition-property: transform, background-color;
        transition-duration: 0.1s, 0.2s;
        cursor: pointer;
    }

    .header-mobile-phone-btn.mobs:active {
        transform: scale(0.96);
    }

    .header-mobile-phone-btn.mobs img {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 340px) {
    #burger {
        left: 8px;
    }

    .header-mobile-phone-btn {
        right: 8px;
    }
}

@media (min-width: 768px) and (max-width: 1299px) {
    .footer-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Ровно две колонки */
        gap: 20px 30px;
        align-items: center;
    }

    /* ЛЕВАЯ КОЛОНКА */
    .footer-logo {
        grid-column: 1;
        grid-row: 1;
    }


    .footer-nav {
        grid-column: 1;
        grid-row: 2;
        display: flex;
        flex-wrap: wrap;
        /* Меню переносится в 2 аккуратные строчки */
        gap: 10px 20px;
    }

    /* ПРАВАЯ КОЛОНКА (прижата к правому краю) */
    .footer-phone {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .footer-phone-link {
        font-size: 18px;
        font-weight: 700;
    }

    .footer-social {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        display: flex;
        gap: 12px;
    }

    .footer-address {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-style: normal;
        font-size: 13px;
        color: #a0aec0;
        text-align: right;
    }

    .footer-address .address-icon {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        margin-top: 2px;
    }
}

@media (max-width: 992px) {}

input.is-invalid {
  border-color: #ff4a4a !important;
  background-color: #fff8f8;
}

button[type="submit"]:disabled {
  background-color: #cccccc !important;
  color: #666666 !important;
  cursor: not-allowed; /* Курсор в виде перечеркнутого круга */
  opacity: 0.7;
}

.social-link-button {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 border-radius: 60px;
gap: 14px; /* Расстояние между иконкой и текстом */
    
    width: 100%; /* Делает кнопку длинной на всю ширину родителя */
    max-width: 400px; /* Ограничение максимальной ширины (можно изменить или убрать) */
    
    padding: 8px 24px 8px 8px; /* Внутренние отступы (слева меньше из-за иконки) */
        font-size: 16px;
    font-weight: 500;
    text-decoration: none; /* Убираем подчеркивание ссылки */
    box-sizing: border-box;
    
    transition: all 0.3s ease; /* Плавность анимации при наведении */

}
    .social-icon-wrap {


    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-purple); 
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; 

         img {
    width: 22px;
    height: 22px;
    object-fit: contain;

                  filter: brightness(0) invert(1);
                  
    }
    }
.social-link-button:hover {
    background-color: #F7F0FA; /* Легкий фиолетовый оттенок при наведении */
    border-color: #5A189A; /* Более темная фиолетовая рамка */
    box-shadow: 0 4px 12px rgba(123, 44, 191, 0.15); /* Нежная тень */
    transform: translateY(-1px); /* Легкий подъем вверх */
}

/* Экран «Заявка отправлена!» в модальном окне */
.feedback-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    height: 100%;
    padding: 20px;
}

.success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--color-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    line-height: 1;
}

.feedback-success .btn-submit {
    max-width: 320px;
    margin-top: 8px;
}