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

/* Remove default margin */
* {
    margin: 0;
}

/* Core body defaults */
html:focus-within {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: sans-serif;
}

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

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
    font: inherit;
}

/* Avoid text overflows */
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    font-family: "Inter";
}

/* Remove list styles */
ul,
ol {
    list-style: none;
    padding: 0;
}

/* Anchor defaults */
a {
    text-decoration: none;
    color: inherit;
}

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

/* Buttons reset */
button {
    background: none;
    border: none;
    cursor: pointer;
}

/* Root stacking context */
#root,
#__next {
    isolation: isolate;
}

.wrapper {
    max-width: 428px;
    width: 100%;
    padding: 0 10px;
    margin: 0 auto;
    overflow: hidden;
}

.hero {
    height: 800px;
    /* Стандартна висота для екрану 428px (напр. iPhone 13/14 Pro Max) */
    position: relative;
    overflow: hidden;
    background-color: #050505;
    display: flex;
    flex-direction: column;
    max-width: 428px;
    margin: 0 auto;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Шар для контенту (поверх фонового фото) */
.content-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ВЕРХНЯ ЧАСТИНА */
.top-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 30px;
}

/* Помаранчевий банер */
.top-banner {
    width: 100%;
    background-color: #fa4a14;
    color: #ffffff;
    text-align: center;
    padding: 12px 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Головний заголовок */
.title {
    font-family: "Inter-Bold";
    color: #ffffff;
    font-size: 40px;
    line-height: 1.15;
    text-align: center;
    margin-top: 25px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.title .highlight {
    color: #e63916;
}

/* НИЖНЯ ЧАСТИНА */
.bottom-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 35px;
}

.header__price {
    position: absolute;
    transform: rotate(3deg);
    border-radius: 200px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 26.33vw;
    height: 26.33vw;
    bottom: 18%;
    right: 5%;
    display: flex;
    z-index: 9;
    cursor: pointer;
    transition: .3s;
    box-shadow: 0 0 38px 0 #000;
    background: rgba(255, 255, 255, .1);
}

.header__price-was {
    font-size: 4vw;
    line-height: 120%;
    color: #fff;
}

.header__price-now {
    line-height: 110%;
    font-size: 7.63vw;
    font-weight: 700;
    color: #FF4400;
}

.header__price-was span::before {
    content: "";
    display: block;
    width: 100%;
    height: .3vw;
    position: absolute;
    top: 1.6vw;
    left: 0;
    background-color: red;
}

.header__price::after {
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    width: 35.33vw;
    height: 35.33vw;
    margin-top: -3%;
    position: absolute;
    z-index: -1;
    background-image: url(../images/price-m-frame.png);
}

@media (min-width: 430px) {
    .header__price {
        position: absolute;
        transform: rotate(3deg);
        border-radius: 200px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 113px; /* 26.33vw */
        height: 113px; /* 26.33vw */
        bottom: 18%;
        right: 5%;
        display: flex;
        z-index: 9;
        cursor: pointer;
        transition: .3s;
        box-shadow: 0 0 38px 0 #000;
        background: rgba(255, 255, 255, .1);
    }

    .header__price-was {
        font-size: 17px; /* 4vw */
        line-height: 120%;
        color: #fff;
    }

    .header__price-now {
        line-height: 110%;
        font-size: 33px; /* 7.63vw */
        font-weight: 700;
        color: #FF4400;
    }

    .header__price-was span::before {
        content: "";
        display: block;
        width: 100%;
        height: 1.5px; /* .3vw */
        position: absolute;
        top: 7px; /* 1.6vw */
        left: 0;
        background-color: red;
    }

    .header__price::after {
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        display: block;
        width: 152px; /* 35.33vw */
        height: 152px; /* 35.33vw */
        margin-top: -3%;
        position: absolute;
        z-index: -1;
        background-image: url(../images/price-m-frame.png);
    }
}

.header__price-was span, .holding-items-element-wrp {
    position: relative;
}

/* Текст перед кнопкою */
.question-text {
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

/* Кнопка із таймером */
.cta-button {
    width: 388px;
    height: 65px;
    border: 2px solid #e63916;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background: rgba(10, 4, 2, 0.8);
    backdrop-filter: blur(4px);
    box-shadow: inset 0 0 15px rgba(230, 57, 22, 0.1);
}

.cta-button-text {
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.cta-button-timer {
    color: #e63916;
    font-size: 20px;
    font-weight: 800;
    margin-left: 6px;
    letter-spacing: 0.5px;
}

.badge {
    background-color: #ff4a00;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
    margin-top: 60px;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

/* Головний заголовок */
.main-title {
    font-size: 36px;
    font-weight: 900;
    line-height: 1.1;
    font-family: "Inter-Bold";
    color: #000000;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.main-title span{
    color: #ff4a00;
}

.main-title .highlight {
    color: #ff4a00;
    font-style: italic;
}

/* Описовий текст */
.description {
    font-size: 16.5px;
    line-height: 1.45;
    color: #1a1a1a;
    margin-bottom: 35px;
    letter-spacing: -0.2px;
}

.description strong {
    font-weight: 700;
    color: #000000;
}

/* Контейнер для карток */
.cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Окрема картка */
.card {
    background-color: #ffffff;
    border-radius: 18px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.153);
    border: 1px solid #f2f2f2;
}

/* Номерок картки */
.card-number {
    color: #ff4a00;
    font-size: 18px;
    font-weight: 800;
    border: 1px solid #fdbcb4;
    background-color: #fff6f4;
    padding: 4px 5px;
    border-radius: 3px;
    line-height: 1;
    margin-right: 15px;
}

/* Іконка (Емодзі) */
.card-icon {
    font-size: 55px;
    line-height: 1;
    margin-right: 18px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    flex-shrink: 0;
}

/* Текст картки */
.card-text {
    font-size: 18.5px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    color: #000000;
}

.text-orange {
    color: #ff4a00;
}

/* Спеціальний стиль для 3-ї картки (менший текст) */
.card-text.small-text {
    font-size: 14px;
    line-height: 1.3;
}

.solutions-block {
    font-family: sans-serif;
    padding: 30px 0;
    max-width: 600px;
    margin: 0 auto;
}

.solutions-block .orange-text {
    color: #ff4a00;
}

.solutions-block p{
    font-style: italic;
}

.tag-section {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.solution-tag {
    background-color: #ff4a00;
    color: white;
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
}

.solution-description {
    color: #444;
    font-size: 16px;
    line-height: 1.5;
    margin-top: 20px;
}

.protocols-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.protocol-card {
    display: flex;
    position: relative;
    background-color: #141414;
    color: white;
    padding: 25px;
    border-left: 3px solid #FF4400;
    border-radius: 20px;
    overflow: visible; /* Дозволити виступати зображенням */
    height: 180px; /* Фіксована висота для ефекту виступання зображень */
}


.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px;
}

.protocol-title {
    color: #F33918;
    font-size: 21px;
    margin: 0;
    font-weight: bold;
}

.protocol-name {
    color: white;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.protocol-desc {
    color: #aaa;
    font-size: 15px;
    margin: 0;
    line-height: 1.4;
}

.protocol-model {
    position: absolute;
    right: 10px;
    bottom: -1px; /* Початкове розташування, щоб зображення стояли на нижньому краї картки */
    width: auto;
    height: 170px;
    display: block;
    object-fit: contain;
    object-position: bottom right;
}

/* Специфічне налаштування відступання для кожного зображення на основі макета */
.model-1 {
   right: -10px;
}

.model-3 {
    right: -10px;
}

.course-info-banner {
    background-color: #FF4400; /* Відтінок помаранчевого з макета */
    border-radius: 22px;
    padding: 32px 15px;
    max-width: 100%; /* Ширина з урахуванням відступів (428px - 20px з обох боків) */
    text-align: center;
    box-sizing: border-box;
}

.course-info-banner p {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 1.8px; /* Збільшена відстань між літерами, як на макеті */
    margin: 0;
    text-transform: uppercase;
}

.system-inside-block {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    max-width: 428px;
    margin: 0 auto;
    padding: 30px 0px;
    box-sizing: border-box;
}

.system-inside-block .orange-text {
    color: #ef4c23; /* Помаранчевий колір з макету */
}

/* Рядки з телефонами та текстом */
.feature-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 35px;
    padding-right: 10px;
}

.phone-wrapper {
    flex: 0 0 120px; /* Фіксована ширина для телефону */
}

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

.feature-info {
    flex: 1;
    padding-top: 5px;
}

.feature-subtitle {
    color: #ef4c23;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px 0;
    letter-spacing: 0.2px;
}

.feature-list {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.feature-list li {
    font-size: 15px;
    color: #000000;
    line-height: 1.3;
    margin-bottom: 4px;
    font-weight: 500;
    list-style: initial;
}

.feature-desc {
    font-size: 15px;
    color: #000000;
    line-height: 1.4;
    margin: 0;
    font-weight: 500;
}

.mt-spacing {
    margin-top: 15px;
}

/* Секція трекінгу */
.tracking-section {
    margin-top: 55px;
    padding-right: 20px;
}

.track-badge {
    display: inline-block;
    background-color: #ef4c23;
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.tracking-heading {
    font-size: 36px;
    font-weight: 900;
    font-family: "Inter-Bold";
    color: #000000;
    line-height: 1.05;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.tracking-text {
    font-size: 16.5px;
    line-height: 1.4;
    color: #1a1a1a;
    margin: 0;
}

.tracking-text strong {
    font-weight: 700;
    color: #000000;
}

.adapt-text {
    text-align: center;
    font-style: italic;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    margin: 0 0 35px 0;
    letter-spacing: 0.2px;
}

.guarantee-card {
    background: linear-gradient(90deg, #f33918 0.96%, #ff5900 46.15%, #f33918 100%);
    border-radius: 22px;
    padding: 30px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.guarantee-badge {
    flex: 0 0 95px; /* Фіксована ширина для бейджа */
}

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

.guarantee-info {
    flex: 1;
}

.guarantee-heading {
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.25;
    letter-spacing: 0.3px;
}

.guarantee-paragraph {
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    margin: 0;
}

.timeline-roadmap {
    font-family: 'Inter', sans-serif;
    max-width: 428px;
    margin: 0 auto;
    padding: 20px 0px;
    background-color: #ffffff;
    box-sizing: border-box;
}

.timeline-step {
    position: relative;
    padding-left: 35px;
    padding-bottom: 25px;
}

/* Вертикальна лінія */
.step-line {
    position: absolute;
    left: 10px; /* Вирівнювання по центру вузла */
    top: 24px;
    bottom: 0;
    width: 2px;
}

.hidden-line {
    display: none;
}

/* Вузли (крапочки на таймлайні) */
.step-node {
    position: absolute;
    left: -4px;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.step-node::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Заголовок кроку та бейдж */
.step-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-top: 2px;
}

.step-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
}

.step-badge-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.days-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.days-badge.text-dark {
    color: #000000;
}

.progress-dashes {
    display: flex;
    gap: 3px;
    margin-top: 5px;
}

.progress-dashes .dash {
    width: 14px;
    height: 4px;
    border-radius: 2px;
    background-color: #e0e0e0;
}

/* Елементи списку (пін + текст) */
.info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.info-item:last-child {
    margin-bottom: 0;
}

.pin-icon {
    width: 18px;
    height: auto;
    margin-top: 2px;
    flex-shrink: 0;
}

.info-text strong {
    display: block;
    font-size: 14px;
    color: #000000;
    margin-bottom: 4px;
    line-height: 1.3;
}

.info-text p {
    margin: 0;
    font-size: 13.5px;
    color: #111111;
    line-height: 1.45;
}

/* КОЛЬОРОВІ ТЕМИ ДЛЯ КРОКІВ */

/* 1. Оранжевий */
.step-orange .step-line { background-color: #f7a77e; }
.step-orange .step-node { border: 2px solid #ea5e24; box-shadow: 0 0 0 6px #f5783e32; }
.step-orange .step-node::after { background-color: #ea5e24; }
.step-orange .days-badge { background-color: #ea5e24; }
.step-orange .dash.active { background-color: #ea5e24; }

/* 2. Жовтий */
.step-yellow .step-line { background-color: #e4e286; }
.step-yellow .step-node { border: 2px solid #f4d94c; box-shadow: 0 0 0 6px #f4d84c3f;  }
.step-yellow .step-node::after { background-color: #f4d94c; }
.step-yellow .days-badge { background-color: #f4d94c; }
.step-yellow .dash.active { background-color: #f4d94c; }

/* 3. Світло-зелений */
.step-light-green .step-line { background-color: #badd4b; }
.step-light-green .step-node { border: 2px solid #badd4b; box-shadow: 0 0 0 6px #bbdd4b3f; }
.step-light-green .step-node::after { background-color: #badd4b; }
.step-light-green .days-badge { background-color: #badd4b; }
.step-light-green .dash.active { background-color: #badd4b; }

/* 4. Зелений */
.step-green .step-node { border: 2px solid #87c745; box-shadow: 0 0 0 6px #86c74533; }
.step-green .step-node::after { background-color: #87c745; }
.step-green .days-badge { background-color: #87c745; }
.step-green .dash.active { background-color: #87c745; }

/* Нижній фінальний банер */
.final-banner {
    background: linear-gradient(90deg, #f33918 0.96%, #ff5900 46.15%, #f33918 100%);
    border-radius: 22px;
    padding: 30px 20px;
    text-align: center;
    color: #ffffff;
    margin-top: 15px;
}

.banner-icon img{
    width: 40px;
}
.banner-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.banner-title {
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 1.5px;
}

.banner-desc {
    font-size: 14.5px;
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
}

.i-was-you-block {
    font-family: 'Inter', sans-serif;
    max-width: 428px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 30px 0px 40px 0px;
    box-sizing: border-box;
    overflow: hidden;
}

.orange-text {
    color: #eb4a14;
}

.i-was-you-intro {
    font-size: 16.5px;
    line-height: 1.45;
    color: #1a1a1a;
    margin: 15px 0 20px 0;
}

/* Секція з цитатою та фото */
.middle-section {
    position: relative;
    min-height: 310px;
    display: flex;
    align-items: flex-start;
}

.quote-box {
    width: 52%;
    border-left: 3px solid #eb4a14;
    padding-left: 15px;
    position: relative;
    z-index: 2;
    top: 50px; /* Опускаємо цитату нижче */
}

.quote-box p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    color: #000000;
}

.image-wrapper {
    position: absolute;
    right: -25px; /* Зсуваємо фото трохи за правий край екрану */
    bottom: 15px;
    width: 290px;
    z-index: 1;
}

.iron-model {
    width: 100%;
    height: auto;
    display: block;
}

.image-fade {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
}

/* Картка зі статистикою */
.stats-card {
    position: relative;
    z-index: 3;
    background-color: #ffffff;
    border-radius: 18px;
    padding: 25px 10px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-top: -15px;
    border: 1px solid #f8f8f8;
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-number {
    display: block;
    font-size: 44px;
    font-weight: 700;
    font-family: "Inter-Bold";
    color: #eb4a14;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1.5px;
}

.stat-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #1a1a1a;
    text-transform: uppercase;
    line-height: 1.35;
    letter-spacing: 0.5px;
}

.system-adjusts-block {
    font-family: 'Inter', sans-serif;
    max-width: 428px;
    margin: 0 auto;
    padding: 20px 0px;
    box-sizing: border-box;
}

.system-adjusts-block .orange-text {
    color: #ef4c23;
}

.adjusts-subtitle {
    font-size: 16.5px;
    color: #1a1a1a;
    margin: 15px 0 25px 0;
    line-height: 1.4;
}

.adjusts-subtitle strong {
    font-weight: 700;
    color: #000000;
}

/* Контейнер акордеону */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #f2f2f2;
}

/* Шапка акордеону */
.faq-header {
    background: linear-gradient(105deg, #ff5416 0%, #eb3f03 100%);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    border-radius: 16px;
    cursor: pointer;
    color: #ffffff;
    transition: border-radius 0.3s ease;
}

.faq-item.is-open .faq-header {
    border-radius: 16px 16px 0 0;
}

.faq-icon-wrap {
    width: 34px;
    height: 34px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.faq-title {
    font-size: 15px;
    font-weight: 700;
    flex: 1;
    letter-spacing: 0.3px;
}

/* Стрілка */
.faq-arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
    opacity: 0.8;
}

.faq-item.is-open .faq-arrow {
    transform: rotate(180deg);
}

/* Контент акордеону */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.is-open .faq-content {
    max-height: 250px; /* Достатня висота для розкриття */
}

.faq-content-inner {
    padding: 20px 18px;
    font-size: 15px;
    color: #000000;
    line-height: 1.45;
    font-weight: 500;
}

/* Нижній банер */
.adjusts-banner {
    background: linear-gradient(105deg, #ff5416 0%, #eb3f03 100%);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    color: #ffffff;
    margin-top: 25px;
}

.adjusts-banner h3 {
    margin: 0 0 6px 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.adjusts-banner p {
    margin: 0;
    font-size: 15.5px;
    font-weight: 400;
}


.custom-slider-section {
    position: relative;
    min-width: 104%;
    left: -2%;
    max-width: 398px;
    margin: 0 auto;
    overflow: hidden;
    padding: 37px 0 19px 0;
    font-family: 'Inter', sans-serif;
}

.decor-warning {
    position: absolute;
    width: 65px;
    z-index: 1;
}

.decor-warning img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}


.top-left {
    top: 19px;
    left: -14px;
}

.bottom-right {
    bottom: 70px;
    right: -14px;
}

.first-swiper {
    width: 100%;
    overflow: visible;
    z-index: 2;
}

.swiper-slide {
    padding: 9px 0 19px 19px;
    box-sizing: border-box;
}

.slide-inner-card {
    background: #ffffff43;
    backdrop-filter: blur(5px);
    border-radius: 23px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 105%;
    box-shadow: 0 0px 16px 2px rgb(0 0 0 / 11%);
    height: 100%;
}

.card-img-box {
    max-width: 100px;
    flex: 0 0 140px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0px 16px 2px rgb(0 0 0 / 11%);
}

.card-img-box img {
    width: 100%;
    border-radius: 20px;
    
    object-fit: contain;
    display: block;
}

.card-text-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 9px;
}

.slide-title {
    font-size: 16px;
    font-weight: 800;
    color: #000000;
    line-height: 1.25;
    margin: 0 0 7px 0;
    letter-spacing: 0.5px;
}

.slide-desc {
    font-size: 11.5px;
    font-weight: 400;
    color: #111111;
    line-height: 1.45;
    margin: 0;
}

.slider-controls-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 10%;
    margin-top: 9px;
    position: relative;
    z-index: 3;
}

.second-slider-pagination{
    max-width: 200px !important;
    overflow: hidden !important;
}

.first-slider-pagination {
    display: flex;
    gap: 11px;
    align-items: center;
    position: static;
    width: auto;
}

.swiper-pagination{
    padding-bottom: 10px;
    display: flex;
    justify-content: left;
    gap: 10px;
}

.rev-img{
    border-radius: 20px;
    box-shadow: 0 0 15px 2px #00000030;
}

.swiper-pagination-bullet {
    width: 9px !important;
    height: 9px !important;
    border: 1.5px solid #000000 !important;
    border-radius: 50% !important;
    background: transparent !important;
    opacity: 1 !important;
    margin: 0 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.swiper-pagination-bullet{
    display: none !important;
}
.swiper-pagination-bullet:nth-child(5),
.swiper-pagination-bullet:nth-child(4),
.swiper-pagination-bullet:nth-child(3),
.swiper-pagination-bullet:nth-child(2),
.swiper-pagination-bullet:nth-child(1){
    display: block !important;
}

.swiper-pagination-bullet-active {
    border-color: transparent !important;
    background: #ff5416 !important;
    box-shadow: 0 0 0 5px #ffe3d8 !important;
}

.nav-buttons-wrap {
    display: flex;
    justify-content: right;
    align-items: flex-end;
    gap: 14px;
    margin-left: auto;
    position: relative;
    z-index: 99;
}

.slider-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 28px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.slider-btn:active {
    transform: scale(0.95);
}

.slider-btn svg {
    width: 23px;
    height: 23px;
}

.btn-prev {
    width: 90px;
    height: 47px;
    box-shadow: 0 0 5px 2px #e1e1e1;
}

.btn-next {
    width: 90px;
    height: 47px;

}

.contact-bg{
    background-color: #000;
    padding: 50px 15px;
    margin-bottom: 250px;
}

.contact {
    background-image: url(../images/contacts.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 50px 0;
    max-width: 428px;
    margin: 0 auto;
}

.contact span,
.contact p{
    color: #fff;
}

.contact .mainTitle{
font-weight: 700;
font-size: 40px;
line-height: 100%;
text-transform: uppercase;
text-align: center;
color: #fff;
text-shadow: 0 22px 17px rgba(0, 0, 0, 0.6);
}

.contact .mainTitle span{
    color: #f85301;
}

.contact-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
}

.contact-box-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.support_link,
.contactlink {
    font-weight: 400;
    font-size: 14px;
    line-height: 179%;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-align: center;
    display: block;
    margin: 0 auto;
    color: #cacaca;
}


.footer-bg{
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(150px);
    transition: all .5s ease;
}

.footer {
    background-color: #fff;
    border-top: 2px solid #FF4400;
    border-bottom: 2px solid #FF4400;
    border-radius: 30px 30px 0 0;
    padding: 25px 0;
    
    margin: 0 auto;
    width: 100%;
    max-width: 430px;
}

.footer-bg.active {
    transform: translateY(0px);
    opacity: 1;
}

.footer-timer {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.footer-timer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.footer-timer-value {
    border-radius: 150px;
    width: 67px;
    height: 38px;
    background: #FF4400;
    color: #fff;
    font-family: "League Gothic", sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 117%;
    text-align: center;
}

.footer-timer-time {
    font-weight: 500;
    font-size: 10px;
    line-height: 100%;
    text-align: center;
    color: #000;
}

.footerButton {
    font-weight: 400;
    font-size: 20px;
    line-height: 141%;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 14px;
    font-family: "League Gothic", sans-serif;
    margin: 15px auto 0 auto;
    width: 293px;
    height: 56px;
    background: #FF4400;
    transition: .2s;
}

.footerButton:active {
    background: #4a7500;
}


.footer-title{
    font-weight: 800;
font-size: 16px;
line-height: 100%;
text-transform: uppercase;
text-align: center;
color: #000;
padding-bottom: 10px;
}

@media (max-width: 430px) {
    .hero {
        height: 182.3488vw;
        /* Стандартна висота для екрану 428px (напр. iPhone 13/14 Pro Max) */
        position: relative;
        overflow: hidden;
        background-color: #050505;
        display: flex;
        flex-direction: column;
        max-width: 99.5348vw;
        min-width: 100%;
        margin: 0 auto;
    }

    .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }

    /* Шар для контенту (поверх фонового фото) */
    .content-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* ВЕРХНЯ ЧАСТИНА */
    .top-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding-top: 6.9767vw;
    }

    /* Помаранчевий банер */
    .top-banner {
        width: 100%;
        background-color: #fa4a14;
        color: #ffffff;
        text-align: center;
        padding: 2.7906vw 0;
        font-size: 3.0232vw;
        font-weight: 600;
        letter-spacing: 0.0697vw;
    }

    /* Головний заголовок */
    .title {
        color: #ffffff;
        font-size: 9vw;
        line-height: 1.15;
        text-align: center;
        margin-top: 5.8139vw;
        font-weight: 800;
        letter-spacing: 0.1162vw;
        text-transform: uppercase;
    }

    .title .highlight {
        color: #e63916;
    }

    /* НИЖНЯ ЧАСТИНА */
    .bottom-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 8.1395vw;
    }

    /* Текст перед кнопкою */
    .question-text {
        color: #ffffff;
        font-size: 3.3720vw;
        font-weight: 800;
        text-align: center;
        margin-bottom: 1.509vw;
        letter-spacing: 0.0465vw;
        text-transform: uppercase;
    }

    /* Кнопка із таймером */
    .cta-button {
        width: 90.2325vw;
        height: 15.1162vw;
        border: 0.4651vw solid #e63916;
        border-radius: 8.1395vw;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        background: rgba(10, 4, 2, 0.8);
        backdrop-filter: blur(0.9302vw);
        box-shadow: inset 0 0 3.4883vw rgba(230, 57, 22, 0.1);
    }

    .cta-button-text {
        color: #ffffff;
        font-size: 4.6511vw;
        font-weight: 800;
        letter-spacing: 0.1162vw;
    }

    .cta-button-timer {
        color: #e63916;
        font-size: 4.6511vw;
        font-weight: 800;
        margin-left: 1.3953vw;
        letter-spacing: 0.1162vw;
    }

    .badge {
        background-color: #ff4a00;
        color: #ffffff;
        font-size: 3.0232vw;
        font-weight: 600;
        text-transform: uppercase;
        padding: 1.8604vw 3.7209vw;
        border-radius: 4.6511vw;
        display: inline-block;
        margin-top: 13.9534vw;
        margin-bottom: 5.8139vw;
        letter-spacing: 0.1162vw;
    }

    /* Головний заголовок */
    .main-title {
        font-size: 8.372vw;
        font-weight: 900;
        line-height: 1.1;
        color: #000000;
        margin-bottom: 5.8139vw;
        text-transform: uppercase;
        letter-spacing: -0.1162vw;
    }

    .main-title span{
        color: #ff4a00;
    }

    .main-title .highlight {
        color: #ff4a00;
        font-style: italic;
    }

    /* Описовий текст */
    .description {
        font-size: 3.8372vw;
        line-height: 1.45;
        color: #1a1a1a;
        margin-bottom: 8.1395vw;
        letter-spacing: -0.0465vw;
    }

    .description strong {
        font-weight: 700;
        color: #000000;
    }

    /* Контейнер для карток */
    .cards-container {
        display: flex;
        flex-direction: column;
        gap: 4.6511vw;
    }

    /* Окрема картка */
    .card {
        background-color: #ffffff;
        border-radius: 4.1860vw;
        padding: 4.6511vw 4.1860vw;
        display: flex;
        align-items: center;
        border: 0.2325vw solid #f2f2f2;
    }

    /* Номерок картки */
    .card-number {
        color: #ff4a00;
        font-size: 4.1860vw;
        font-weight: 800;
        border: 0.2325vw solid #fdbcb4;
        background-color: #fff6f4;
        padding: 0.9302vw 1.1627vw;
        border-radius: 0.6976vw;
        line-height: 1;
        margin-right: 3.4883vw;
    }

    /* Іконка (Емодзі) */
    .card-icon {
        font-size: 12.7906vw;
        line-height: 1;
        margin-right: 4.1860vw;
        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
        flex-shrink: 0;
    }

    /* Текст картки */
    .card-text {
        font-size: 4.3023vw;
        font-weight: 800;
        line-height: 1.3;
        text-transform: uppercase;
        color: #000000;
    }

    .text-orange {
        color: #ff4a00;
    }

    /* Спеціальний стиль для 3-ї картки (менший текст) */
    .card-text.small-text {
        font-size: 3.2558vw;
        line-height: 1.3;
    }

    .solutions-block {
        font-family: sans-serif;
        padding: 6.9767vw 0;
        max-width: 139.5348vw;
        margin: 0 auto;
    }

    .solutions-block .orange-text {
        color: #ff4a00;
    }

    .tag-section {
        display: flex;
        gap: 3.4883vw;
        margin-top: 4.6511vw;
    }

    .solution-tag {
        background-color: #ff4a00;
        color: white;
        padding: 2.3255vw 4.1860vw;
        border-radius: 6.9767vw;
        font-size: 3.2558vw;
        font-weight: bold;
    }

    .solution-description {
        color: #444;
        font-size: 3.7209vw;
        line-height: 1.5;
        margin-top: 4.6511vw;
    }

    .protocols-container {
        display: flex;
        flex-direction: column;
        gap: 4.6511vw;
        margin-top: 6.9767vw;
    }

    .protocol-card {
        color: white;
        padding: 5.8139vw;
        border-radius: 4.6511vw;
        overflow: visible; /* Дозволити виступати зображенням */
        height: 41.8604vw; /* Фіксована висота для ефекту виступання зображень */
    }


    .card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 2.3255vw;
    }

    .protocol-title {
        color: #F33918;
        font-size: 4.5837vw;
        margin: 0;
        font-weight: bold;
    }

    .protocol-name {
        color: white;
        font-size: 4.311vw;
        font-weight: bold;
        text-transform: uppercase;
    }

    .protocol-desc {
        color: #aaa;
        font-size: 3.558vw;
        margin: 0;
        line-height: 1.4;
    }

    .protocol-model {
        position: absolute;
        right: 2.3255vw;
        bottom: -0.2325vw; /* Початкове розташування, щоб зображення стояли на нижньому краї картки */
        width: auto;
        height: 39.5348vw;
        display: block;
        object-fit: contain;
        object-position: bottom right;
    }

    /* Специфічне налаштування відступання для кожного зображення на основі макета */
    .model-1 {
       right: -2.3255vw;
    }

    .model-3 {
        right: -2.3255vw;
    }

    .course-info-banner {
        background-color: #FF4400; /* Відтінок помаранчевого з макета */
        border-radius: 5.1162vw;
        padding: 7.4418vw 3.4883vw;
        max-width: 100%; /* Ширина з урахуванням відступів (428px - 20px з обох боків) */
        text-align: center;
        box-sizing: border-box;
    }

    .course-info-banner p {
        color: #ffffff;
        font-family: 'Inter', sans-serif;
        font-size: 3.2558vw;
        font-weight: 500;
        line-height: 1.6;
        letter-spacing: 0.4186vw; /* Збільшена відстань між літерами, як на макеті */
        margin: 0;
        text-transform: uppercase;
    }

    .system-inside-block {
        font-family: 'Inter', sans-serif;
        background-color: #ffffff;
        max-width: 99.5348vw;
        margin: 0 auto;
        padding: 6.9767vw 0vw;
        box-sizing: border-box;
    }

    .system-inside-block .orange-text {
        color: #ef4c23; /* Помаранчевий колір з макету */
    }

    /* Рядки з телефонами та текстом */
    .feature-row {
        display: flex;
        align-items: flex-start;
        gap: 3.4883vw;
        margin-top: 8.1395vw;
    }

    .phone-wrapper {
        flex: 0 0 27.9069vw; /* Фіксована ширина для телефону */
    }

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

    .feature-info {
        flex: 1;
        padding-top: 1.1627vw;
    }

    .feature-subtitle {
        color: #ef4c23;
        font-size: 3.3720vw;
        font-weight: 700;
        line-height: 1.3;
        margin: 0 0 2.7906vw 0;
        letter-spacing: 0.0465vw;
    }

    .feature-list {
        margin: 0 0 2.7906vw 0;
        padding-left: 4.6511vw;
    }

    .feature-list li {
        font-size: 3.4883vw;
        color: #000000;
        line-height: 1.3;
        margin-bottom: 0.9302vw;
        font-weight: 500;
    }

    .feature-desc {
        font-size: 3.4883vw;
        color: #000000;
        line-height: 1.4;
        margin: 0;
        font-weight: 500;
    }

    .mt-spacing {
        margin-top: 3.4883vw;
    }

    /* Секція трекінгу */
    .tracking-section {
        margin-top: 12.7906vw;
    }

    .track-badge {
        display: inline-block;
        background-color: #ef4c23;
        color: #ffffff;
        padding: 1.8604vw 4.1860vw;
        border-radius: 5.8139vw;
        font-size: 3.2558vw;
        font-weight: 600;
        letter-spacing: 0.1162vw;
        text-transform: uppercase;
        margin-bottom: 4.6511vw;
    }

    .tracking-heading {
        font-size: 8.3720vw;
        font-weight: 900;
        color: #000000;
        line-height: 1.05;
        margin: 0 0 3.4883vw 0;
        text-transform: uppercase;
        letter-spacing: -0.2325vw;
    }

    .tracking-text {
        font-size: 3.8372vw;
        line-height: 1.4;
        color: #1a1a1a;
        margin: 0;
    }

    .tracking-text strong {
        font-weight: 700;
        color: #000000;
    }

    .adapt-text {
        text-align: center;
        font-style: italic;
        font-size: 3.8186vw;
        font-weight: 500;
        color: #000000;
        margin: 0 0 8.1395vw 0;
        letter-spacing: 0.0465vw;
    }

    .guarantee-card {
        background: linear-gradient(90deg, #f33918 0.96%, #ff5900 46.15%, #f33918 100%);
        border-radius: 5.1162vw;
        padding: 6.9767vw 4.6511vw;
        display: flex;
        align-items: center;
        gap: 4.1860vw;
    }

    .guarantee-badge {
        flex: 0 0 22.0930vw; /* Фіксована ширина для бейджа */
    }

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

    .guarantee-info {
        flex: 1;
    }

    .guarantee-heading {
        color: #ffffff;
        font-size: 4.8837vw;
        font-weight: 700;
        margin: 0 0 2.7906vw 0;
        line-height: 1.25;
        letter-spacing: 0.0697vw;
    }

    .guarantee-paragraph {
        color: #ffffff;
        font-size: 3vw;
        font-weight: 400;
        line-height: 1.45;
        margin: 0;
    }

    .timeline-roadmap {
        font-family: 'Inter', sans-serif;
        max-width: 99.5348vw;
        margin: 0 auto;
        padding: 4.6511vw 0vw;
        background-color: #ffffff;
        box-sizing: border-box;
    }

    .timeline-step {
        position: relative;
        padding-left: 10.1395vw;
        padding-bottom: 5.8139vw;
    }

    /* Вертикальна лінія */
    .step-line {
        position: absolute;
        left: 3vw; /* Вирівнювання по центру вузла */
        top: 5.5813vw;
        bottom: 0;
        width: 0.4651vw;
    }

    .hidden-line {
        display: none;
    }

    /* Вузли (крапочки на таймлайні) */
    .step-node {
        position: absolute;
        left: 0px;
        top: 0;
        width: 6.5813vw;
        height: 6.5813vw;
        border-radius: 50%;
        background-color: #fff;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .step-node::after {
        content: '';
        width: 1.8604vw;
        height: 1.8604vw;
        border-radius: 50%;
    }

    /* Заголовок кроку та бейдж */
    .step-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 4.6511vw;
        padding-top: 0.4651vw;
    }

    .step-header h3 {
        margin: 0;
        font-size: 3.7209vw;
        font-weight: 700;
        color: #000000;
    }

    .step-badge-group {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .days-badge {
        padding: 0.9302vw 2.3255vw;
        border-radius: 0.9302vw;
        font-size: 2.3255vw;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: 0.1162vw;
    }

    .days-badge.text-dark {
        color: #000000;
    }

    .progress-dashes {
        display: flex;
        gap: 0.6976vw;
        margin-top: 1.1627vw;
    }

    .progress-dashes .dash {
        width: 3.2558vw;
        height: 0.9302vw;
        border-radius: 0.4651vw;
        background-color: #e0e0e0;
    }

    /* Елементи списку (пін + текст) */
    .info-item {
        display: flex;
        align-items: flex-start;
        gap: 2.7906vw;
        margin-bottom: 4.1860vw;
    }

    .info-item:last-child {
        margin-bottom: 0;
    }

    .pin-icon {
        width: 4.1860vw;
        height: auto;
        margin-top: 0.4651vw;
        flex-shrink: 0;
    }

    .info-text strong {
        display: block;
        font-size: 3.2558vw;
        color: #000000;
        margin-bottom: 0.9302vw;
        line-height: 1.3;
    }

    .info-text p {
        margin: 0;
        font-size: 3.1395vw;
        color: #111111;
        line-height: 1.45;
    }

    /* КОЛЬОРОВІ ТЕМИ ДЛЯ КРОКІВ */

    /* 1. Оранжевий */
    .step-orange .step-line { background-color: #f7a77e; }
    .step-orange .step-node { border: 0.6976vw solid #f9d8c9; }
    .step-orange .step-node::after { background-color: #ea5e24; }
    .step-orange .days-badge { background-color: #ea5e24; }
    .step-orange .dash.active { background-color: #ea5e24; }

    /* 2. Жовтий */
    .step-yellow .step-line { background-color: #e4e286; }
    .step-yellow .step-node { border: 0.6976vw solid #faeebb; }
    .step-yellow .step-node::after { background-color: #f4d94c; }
    .step-yellow .days-badge { background-color: #f4d94c; }
    .step-yellow .dash.active { background-color: #f4d94c; }

    /* 3. Світло-зелений */
    .step-light-green .step-line { background-color: #badd4b; }
    .step-light-green .step-node { border: 0.6976vw solid #e2f0b6; }
    .step-light-green .step-node::after { background-color: #badd4b; }
    .step-light-green .days-badge { background: linear-gradient(166deg, #ffdc4f 0%, #82e108 100%); }
    .step-light-green .dash.active { background-color: #badd4b; }

    /* 4. Зелений */
    .step-green .step-node { border: 0.6976vw solid #c9e8a5; }
    .step-green .step-node::after { background-color: #87c745; }
    .step-green .days-badge { background-color: #87c745; }
    .step-green .dash.active { background-color: #87c745; }

    /* Нижній фінальний банер */
    .final-banner {
        background-color: #e9532d;
        border-radius: 3.7209vw;
        padding: 6.9767vw 4.6511vw;
        text-align: center;
        color: #ffffff;
        margin-top: 3.4883vw;
    }

    .banner-icon {
        display: flex;
        justify-content: center;
        margin-bottom: 3.4883vw;
    }

    .banner-title {
        font-size: 4.4186vw;
        font-weight: 800;
        margin: 0 0 2.3255vw 0;
        letter-spacing: 0.3488vw;
    }

    .banner-desc {
        font-size: 3.3720vw;
        line-height: 1.4;
        font-weight: 400;
        margin: 0;
    }

    .i-was-you-block {
        font-family: 'Inter', sans-serif;
        max-width: 99.5348vw;
        margin: 0 auto;
        background-color: #ffffff;
        padding: 6.9767vw 0vw 9.3023vw 0vw;
        box-sizing: border-box;
        overflow: hidden;
    }

    .orange-text {
        color: #eb4a14;
    }

    .i-was-you-intro {
        font-size: 3.8372vw;
        line-height: 1.45;
        color: #1a1a1a;
        margin: 3.4883vw 0 4.6511vw 0;
    }

    /* Секція з цитатою та фото */
    .middle-section {
        position: relative;
        min-height: 72.0930vw;
        display: flex;
        align-items: flex-start;
    }

    .quote-box {
        width: 52%;
        border-left: 0.6976vw solid #eb4a14;
        padding-left: 3.4883vw;
        position: relative;
        z-index: 2;
        top: 11.6279vw; /* Опускаємо цитату нижче */
    }

    .quote-box p {
        margin: 0;
        font-size: 3.4883vw;
        font-weight: 500;
        line-height: 1.45;
        color: #000000;
    }

    .image-wrapper {
        position: absolute;
        right: -5.8139vw; /* Зсуваємо фото трохи за правий край екрану */
        bottom: 3.4883vw;
        width: 67.4418vw;
        z-index: 1;
    }

    .iron-model {
        width: 100%;
        height: auto;
        display: block;
    }

    .image-fade {
        position: absolute;
        bottom: -0.4651vw;
        left: 0;
        width: 100%;
        height: 20.9302vw;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
    }

    /* Картка зі статистикою */
    .stats-card {
        position: relative;
        z-index: 3;
        background-color: #ffffff;
        border-radius: 4.1860vw;
        padding: 5.8139vw 2.3255vw;
        display: flex;
        justify-content: space-between;
        box-shadow: 0 2.3255vw 6.9767vw rgba(0, 0, 0, 0.08);
        margin-top: -3.4883vw;
        border: 0.2325vw solid #f8f8f8;
    }

    .stat-item {
        text-align: center;
        flex: 1;
    }

    .stat-number {
        display: block;
        font-size: 10.2325vw;
        font-weight: 800;
        color: #eb4a14;
        line-height: 1;
        margin-bottom: 1.8604vw;
        letter-spacing: -0.3488vw;
    }

    .stat-label {
        display: block;
        font-size: 2.5581vw;
        font-weight: 500;
        color: #1a1a1a;
        text-transform: uppercase;
        line-height: 1.35;
        letter-spacing: 0.1162vw;
    }

    .system-adjusts-block {
        font-family: 'Inter', sans-serif;
        max-width: 99.5348vw;
        margin: 0 auto;
        padding: 4.6511vw 0vw;
        box-sizing: border-box;
    }

    .system-adjusts-block .orange-text {
        color: #ef4c23;
    }

    .adjusts-subtitle {
        font-size: 3.8372vw;
        color: #1a1a1a;
        margin: 3.4883vw 0 5.8139vw 0;
        line-height: 1.4;
    }

    .adjusts-subtitle strong {
        font-weight: 700;
        color: #000000;
    }

    /* Контейнер акордеону */
    .faq-container {
        display: flex;
        flex-direction: column;
        gap: 3.4883vw;
    }

    .faq-item {
        background-color: #ffffff;
        border-radius: 3.7209vw;
        box-shadow: 0 0.9302vw 4.6511vw rgba(0, 0, 0, 0.05);
        border: 0.2325vw solid #f2f2f2;
    }

    /* Шапка акордеону */
    .faq-header {
        background: linear-gradient(105deg, #ff5416 0%, #eb3f03 100%);
        padding: 3.7209vw 4.1860vw;
        display: flex;
        align-items: center;
        border-radius: 3.7209vw;
        cursor: pointer;
        color: #ffffff;
        transition: border-radius 0.3s ease;
    }

    .faq-item.is-open .faq-header {
        border-radius: 3.7209vw 3.7209vw 0 0;
    }

    .faq-icon-wrap {
        width: 7.9069vw;
        height: 7.9069vw;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 1.8604vw;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 3.4883vw;
        flex-shrink: 0;
    }

    .faq-title {
        font-size: 3.4883vw;
        font-weight: 700;
        flex: 1;
        letter-spacing: 0.0697vw;
    }

    /* Стрілка */
    .faq-arrow {
        font-size: 2.3255vw;
        transition: transform 0.3s ease;
        opacity: 0.8;
    }

    .faq-item.is-open .faq-arrow {
        transform: rotate(180deg);
    }

    /* Контент акордеону */
    .faq-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .faq-item.is-open .faq-content {
        max-height: 58.1395vw; /* Достатня висота для розкриття */
    }

    .faq-content-inner {
        padding: 4.6511vw 4.1860vw;
        font-size: 3.4883vw;
        color: #000000;
        line-height: 1.45;
        font-weight: 500;
    }

    /* Нижній банер */
    .adjusts-banner {
        background: linear-gradient(105deg, #ff5416 0%, #eb3f03 100%);
        border-radius: 3.7209vw;
        padding: 5.5813vw 4.6511vw;
        text-align: center;
        color: #ffffff;
        margin-top: 5.8139vw;
    }

    .adjusts-banner h3 {
        margin: 0 0 1.3953vw 0;
        font-size: 4.8837vw;
        font-weight: 800;
        letter-spacing: 0.1162vw;
    }

    .adjusts-banner p {
        margin: 0;
        font-size: 3.6046vw;
        font-weight: 400;
    }

    .contact {
        background-image: url(../images/contacts.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 11.6279vw 0;
    }

    .contact span,
    .contact p{
        color: #fff;
    }

    .contact .mainTitle{
        font-weight: 800;
        font-size: 10.3720vw;
        line-height: 100%;
        text-transform: uppercase;
        text-align: center;
        color: #fff;
        text-shadow: 0 5.1162vw 3.9534vw rgba(0, 0, 0, 0.6);
    }

    .contact .mainTitle span{
        color: #f85301;
    }

    .contact-box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4.6511vw;
        padding-top: 2.3255vw;
        padding-bottom: 2.3255vw;
        margin: 0 auto;
    }

    .contact-box-item {
        display: flex;
        align-items: center;
        gap: 1.1627vw;
    }

    .support_link,
    .contactlink {
        font-weight: 400;
        font-size: 3.2558vw;
        line-height: 179%;
        text-decoration: underline;
        text-decoration-skip-ink: none;
        text-align: center;
        display: block;
        margin: 0 auto;
        color: #cacaca;
    }

    .footer {
        border-radius: 6.9767vw 6.9767vw 0 0;
        padding: 5.8139vw 0;
        margin: 0 auto;
        width: 100%;
        max-width: 100vw;
    }

    .footer-timer {
        gap: 1.3953vw;
    }

    .footer-timer-item {

        gap: 1.1627vw;
    }

    .footer-timer-value {
        border-radius: 34.8837vw;
        width: 15.5813vw;
        height: 8.8372vw;
        font-weight: 400;
        font-size: 6.9767vw;
        line-height: 117%;
        text-align: center;
    }

    .footer-timer-time {
        font-weight: 500;
        font-size: 2.3255vw;
        line-height: 100%;
        text-align: center;
        color: #000;
    }

    .footerButton {
        font-weight: 400;
        font-size: 4.6511vw;
        line-height: 141%;
        text-transform: uppercase;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        border-radius: 3.2558vw;
        font-family: "League Gothic", sans-serif;
        margin: 3.4883vw auto 0 auto;
        width: 68.1395vw;
        height: 13.0232vw;
    }

    .footer-title{
        font-weight: 800;
        font-size: 3.7209vw;
        line-height: 100%;
        text-transform: uppercase;
        text-align: center;
        color: #000;
        padding-bottom: 2.3255vw;
    }
}




.contacts {
    padding: 48px 24px 60px;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    max-width: 428px;
    margin: 0 auto 180px auto;
}

.contacts__title {
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 36px 0;
    letter-spacing: -0.5px;
    text-align: left;
}

.contacts__grid {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 48px;
}

.contacts__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 120px;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 -2px 4px 0 rgba(255, 255, 255, 0.25);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-radius: 30px;
    text-decoration: none;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.25);

}

.contacts__icon {
    width: 37%;
    object-fit: contain;
    margin-bottom: 12px;
}

.contacts__icon--email {
    width: 48px;
}

.contacts__label {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.contacts__policy {
    display: inline-block;
    color: #7d7d7d;
    font-size: 13px;
    font-weight: 400;
    text-decoration: underline;
    margin-bottom: 15px;
}

.contacts__copyright {
    color: #7d7d7d;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 36px 0;
}

.contacts__payments {
    display: block;
    width: 100%;
    max-width: 90%;
    height: auto;
    object-fit: contain;
    margin-left: -2px;
}