/* --- ОСНОВНЫЕ НАСТРОЙКИ И СБРОС --- */
:root {
    --vw: 16.8;
    --font-main: "Montserrat", sans-serif;
    --font-note: "Noteworthy", sans-serif;
    --color-white: #fff;
    --color-black: #000;
    --color-red: #f04322;
    --color-light: #fffbf0;
    --inline-padding: 140rem; /* Боковой отступ контента */
}

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

/* Настройка масштабирования (rem зависит от ширины экрана) */
html {
    font-size: 0.0694445vw; 
    -webkit-text-size-adjust: 100%;
}

body {
    color: var(--color-black);
    font-family: var(--font-main);
    font-size: 18rem;
    line-height: 1.4;
    font-weight: 500;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.3s;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

main.wrapper {
    flex: 1;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* --- HEADER --- */
header {
    z-index: 99;
    background: var(--color-red);
    height: 60rem;
    padding-right: 70rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    top: 0; left: 0; right: 0;
}

/* Стили логотипа */
header .logo {
    width: 140rem; /* Ширина контейнера логотипа */
    position: absolute;
    top: 11rem;
    left: 50rem;
    display: block; /* Важно, чтобы ссылка была блочной */
}

header .logo img {
    width: 100%; /* Принудительно растягиваем картинку по ширине контейнера */
    height: auto;
}

/* Меню (десктоп) */
.menu {
    font-family: var(--font-note);
    display: flex;
    gap: 30rem;
    font-size: 20rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-white);
}

.menu a {
    position: relative;
}

.menu a::after {
    content: "";
    opacity: 0;
    background: url(../images/line.webp) center / 100% 100% no-repeat;
    width: calc(100% + 20rem);
    height: 6rem;
    transition: opacity 0.3s;
    position: absolute;
    top: 100%;
    left: -10rem;
}

.menu a:hover::after {
    opacity: 1;
}

/* Элементы мобильного меню (скрыты по умолчанию) */
.menu-block {
    display: none;
}
.burger {
    cursor: pointer;
    width: 30rem;
}

/* --- FOOTER --- */
.footer {
    /*background: var(--color-red);*/
    color: var(--color-white);
    font-size: 15rem;
    padding: 163rem 170rem 106rem;
    position: relative;
}

.footer__fon {
    background: var(--color-red);
    width: 100%;
    height: 54%;
    left: 0;
    bottom: 0;
    position: absolute;

}

/* Блок волны в футере */
.footer__wave {
    position: absolute;
    top: 0; left: 0; right: 0;
    line-height: 0;
    z-index: 0;
}

.footer__wave img {
    width: 100%; /* Растягивание волны */
    display: block;
}

.footer_grad{
    position: absolute;
    top: 0;
    transform: translateY(-62%);
    z-index: -1;
}

#wd, #gd{
        display: block;
    }
#wb, #gb{
        display: none;
}

.footer__content {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 125rem;
}

.footer a:hover {
    text-decoration: underline;
}

/* --- УТИЛИТАРНЫЕ КЛАССЫ (из HTML) --- */
.hidden { display: none; }
.flex { display: flex; }
.w-full { width: 100%; }
.w-158 { width: 158rem; }
.w-225 { width: 225rem; }
.mt-22 { margin-top: 22rem; }
.mb-30 { margin-bottom: 30rem; }
.gap-30 { gap: 30rem; }


#backup_cont{
    display: flex;
    justify-content: flex-end;
    position: relative;
    margin-top: 60rem;
    background-image: url(../images/backup_2.jpg);
    background-repeat: none;
    background-size: cover;
    background-position: center;
    padding: calc(133/ var(--vw) * 1vw) calc(94/ var(--vw) * 1vw);
}

#backup_cont_txts{
    display: flex;
    gap: calc(35/ var(--vw) * 1vw);
    align-items: center;
    flex-direction: column;
}

#backup_cont_txts_title{
    display: block;
    position: relative;
}

#backup_cont_txts_title p {
    
    /* === 1. Базовые настройки шрифта === */
    font-family: 'Montserrat';
    font-weight: 900;
    font-size: calc(67/ var(--vw) * 1vw);
    line-height: 112%;
    text-align: center;
    text-transform: uppercase;
    position: relative; /* Важно для позиционирования наклейки */
    
    /* === 2. НИЖНИЙ СЛОЙ (Белая база) === */
    /* Мы делаем сам этот текст жирным и белым. Это будет наша обводка. */
    color: #FFFFFF; 
    -webkit-text-stroke: calc(5/ var(--vw) * 1vw) #FFFFFF; /* Толщина обводки */
    
    /* Этот трюк делает так, чтобы заливка перекрывала внутреннюю часть обводки,
       делая буквы четче */
    paint-order: stroke fill; 
}

#backup_cont_txts_title p::after {
    /* === 3. ВЕРХНИЙ СЛОЙ (Золотая наклейка) === */
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10; /* Явно кладем поверх всего */
    
    /* Убираем обводку у верхнего слоя, нам нужен чистый цвет */
    -webkit-text-stroke: 0;
    
    /* === 4. ГРАДИЕНТ === */
    background: linear-gradient(90deg, #D8A45E 0%, #A47236 21.63%, #F0CE38 42.31%, #A47235 67.31%, #E2A85F 92.79%);
    
    /* Обрезаем градиент по тексту */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Делаем буквы прозрачными, чтобы просвечивал градиент фона */
    -webkit-text-fill-color: transparent;
    color: transparent;
}


.shine_img {
    position: absolute;
    z-index: 11;
    width: calc(130 / var(--vw) * 1vw);
    transform: translate(-50%, -50%);
    animation: shine-effect 3s infinite ease-in-out;
    opacity: 0;
}

@keyframes shine-effect {
    0% {
        
        opacity: 0;
      
        transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
    }
    50% {
        
        opacity: 1;
       
        transform: translate(-50%, -50%) scale(1.2) rotate(15deg);
        
        filter: brightness(1.3);
    }
    100% {
        
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotate(30deg);
    }
}

.shine_img:nth-child(1) {
    animation-delay: 0s;
}

.shine_img:nth-child(2) {
    animation-delay: 1s;
}

.shine_img:nth-child(3) {
    animation-delay: 2s;
}

.backup_cont_txts_p{
     /* === 1. Базовые настройки шрифта === */
    font-family: 'Montserrat';
    font-weight: 900;
    font-size: calc(35/ var(--vw) * 1vw);
    line-height: 130%;
    text-align: center;
    position: relative; /* Важно для позиционирования наклейки */
    
    /* === 2. НИЖНИЙ СЛОЙ (Белая база) === */
    /* Мы делаем сам этот текст жирным и белым. Это будет наша обводка. */
    color: #FFFFFF; 
    -webkit-text-stroke: calc(6/ var(--vw) * 1vw) #FFFFFF; /* Толщина обводки */
    
    /* Этот трюк делает так, чтобы заливка перекрывала внутреннюю часть обводки,
       делая буквы четче */
    paint-order: stroke fill; 
}

.backup_cont_txts_p::after {
    /* === 3. ВЕРХНИЙ СЛОЙ (Золотая наклейка) === */
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10; /* Явно кладем поверх всего */
    
    /* Убираем обводку у верхнего слоя, нам нужен чистый цвет */
    -webkit-text-stroke: 0;
    
    /* === 4. ГРАДИЕНТ === */
    background: linear-gradient(90deg, #BB8847 12.22%, #A47236 21.63%, #A47235 67.31%, #D69D57 87.67%);
    
    /* Обрезаем градиент по тексту */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Делаем буквы прозрачными, чтобы просвечивал градиент фона */
    -webkit-text-fill-color: transparent;
    color: transparent;
}

#backup_cont_txts_counter{
    display: flex;
    gap: calc(8/ var(--vw) * 1vw);
}

.backup_cont_txts_counter_part{
    display: flex;
    flex-direction: column;
    gap: calc(26/ var(--vw) * 1vw);
}

.backup_cont_txts_counter_part_nums{
    display: flex;
    gap: calc(6/ var(--vw) * 1vw);
}

.backup_cont_txts_counter_part_nums_num{
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: calc(100/ var(--vw) * 1vw);
height: calc(112/ var(--vw) * 1vw);
background: linear-gradient(91.83deg, #E7952C 0%, #F0CE38 47.87%, #D38526 99.57%);
border: calc(9/ var(--vw) * 1vw) solid #FFFFFF;
border-radius: calc(23/ var(--vw) * 1vw);
font-family: 'Montserrat';
font-style: normal;
font-weight: 900;
font-size: calc(71/ var(--vw) * 1vw);
line-height: 119%;
color: white;
}

.backup_cont_txts_counter_dots{
font-family: 'Montserrat';
font-style: normal;
font-weight: 900;
height: calc(112/ var(--vw) * 1vw);
font-size: calc(45/ var(--vw) * 1vw);
line-height: 119%;
leading-trim: both;
text-edge: cap;
display: flex;
align-items: center;
text-align: center;
color: #FFFFFF;

}

/* 1. Создаем анимацию мигания */
@keyframes blink-animation {
    0% { opacity: 1; }      /* Видно */
    50% { opacity: 0.2; }     /* Не видно (середина секунды) */
    100% { opacity: 1; }    /* Снова видно */
}

/* 2. Применяем её к точкам */
.backup_cont_txts_counter_dots {
    /* infinite = повторять бесконечно
       1s = длительность одной секунды */
    /*animation: blink-animation 1s infinite steps(1); */
    animation: blink-animation 1s infinite ease-in-out;
}



/* --- МОБИЛЬНАЯ ВЕРСИЯ (< 1024px) --- */
@media (orientation: portrait) {

    :root {
    --vw: 10.1;
    }


    /* Пересчет rem и отступов */
    html { font-size: 0.277778vw; }
    body { font-size: 15rem; --inline-padding: 20rem; }
    body.open { overflow: hidden; }

    /* Header Mobile */
    header {
        height: 50rem;
        padding-right: var(--inline-padding);
    }
    
    header .logo {
        width: 89rem; /* Уменьшенный размер лого на мобильном */
        top: 10rem;
        left: var(--inline-padding);
    }

    header .menu { display: none; }

    /* Бургер */
    .m\:block { display: block; }
    .m\:hidden { display: none; }
    
    .burger img:last-child { display: none; }
    .open .burger img:first-child { display: none; }
    .open .burger img:last-child { display: block; }

    /* Выпадающее меню */
    .m\:flex.menu-block {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: var(--color-light);
        position: fixed;
        inset: 0;
        z-index: 98;
        padding-top: 94rem;
        transform: translateY(-100%);
        transition: transform 0.3s;
        overflow-y: auto;
    }

    .open .menu-block {
        transform: translateY(0);
    }

    .menu-block .menu {
        flex-direction: column;
        align-items: center;
        gap: 24rem;
        color: var(--color-black);
    }
    .menu-block .menu a::after { display: none; }
    .menu-block .menu a:hover { text-decoration: underline; }

    .menu-block__footer {
        background: var(--color-red);
        width: 100%;
        padding: 20rem;
        position: relative;
    }
    .menu-block__footer::before {
        content: "";
        background: url(../images/wave.webp) 0 0 / 777rem no-repeat;
        width: 100%;
        height: 100rem;
        position: absolute;
        top: -70rem;
        left: 0;
    }
    .menu-block__footer img {
        position: relative;
        z-index: 10;
    }

    /* Footer Mobile */
    .footer {
        padding: 95rem var(--inline-padding) 44rem;
        font-size: 13rem;
        /*overflow: hidden;*/
    }

    .footer__fon {
    height: 75%;
    }

    .footer__wave {
        width: 100%;
        max-width: none;
    }
    .footer__wave img {
        width: 100%;
        max-width: none;
    }

    #wd, #gd{
        display: none;
    }
    #wb, #gb{
        display: block;
    }

    .footer__content {
        flex-direction: column;
        gap: 22rem;
    }

    /* Мобильные утилиты */
    .m\:flex-col { flex-direction: column; }
    .m\:mt-9 { margin-top: 9rem; }
    .m\:gap-10 { gap: 10rem; }

    #backup_cont{
    margin-top: 50rem;
    justify-content: center;
    padding: calc(var(--inline-padding) * 2) var(--inline-padding);
    min-height: 100vh;
    background-image: url(../images/backup_mob.jpg);
    background-position: top;
    }

    #backup_cont_txts_title p {
       /* font-size: calc(24 / var(--vw) * 1vw);*/
    }








}