/* ============================================
   ПАНАВИР ДЕНТ — СТИЛИ ЛЕНДИНГА
   ============================================ */

:root {
    /* Цвета из макета */
    --blue:          #1F4F88;
    --blue-dark:     #185FA0;
    --blue-darker:   #2F3E55;
    --blue-light:    #E8F2FC;
    --blue-soft:     #E8ECF5;
    --blue-text:     #315E91;

    --yellow:        #FFE333;
    --yellow-bright: #FFE60A;
    --yellow-soft:   #FFE476;
    --yellow-bg:     #F8F4D9;

    --gold:          #E5BB4F;
    --gold-dark:     #C19338;
    --gold-bg:       #FDF5E8;
    --gold-light:    #FAF8F4;

    --green:         #2F881F;
    --green-dark:    #0F5C3E;
    --green-bg:      #E8F5EF;
    --green-soft:    #E2FBE4;
    --green-light:   #F2FAF6;

    --red:           #F53131;

    --text:          #1D1B17;
    --text-dark:     #1A1A18;
    --text-muted:    #4F4F57;
    --text-gray:     #71717B;
    --text-soft:     #7C8081;
    --text-light:    #878787;
    --text-on-blue:  #809BBC;

    --bg:            #F3F3F3;
    --bg-light:      #FAF8F4;
    --white:         #FFFFFF;
    --border:        #E8ECF5;

    /* Метрики */
    --container: 360px;
    --radius:    16px;
    --radius-sm: 12px;
    --radius-lg: 20px;
}

/* ===== СБРОС ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

ul, ol {
    list-style: none;
}

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

button {
    font: inherit;
    border: none;
    background: none;
    cursor: pointer;
}

sup {
    font-size: 0.6em;
    vertical-align: super;
}

/* ===== КОНТЕЙНЕР ===== */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0;
}

/* ===== ОБЩИЕ ЭЛЕМЕНТЫ ===== */
.eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--blue-text);
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight:bold;
}

.section {
    padding: 36px 0;
}

.section--light {
    background: var(--white);
}

.section--gray {
    background: var(--bg);
}

.section--blue {
    background: var(--blue);
    color: var(--white);
}

.section__title {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.section__title--white {
    color: var(--white);
}

.section__subtitle {
    font-size: 18px;
    line-height: 1.4;
    color: var(--text);
    margin-bottom: 24px;
    font-weight:bold;
}

/* ===== ШАПКА ===== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 248, 244, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width:60%;
}

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

.logo__mark {
    width: 13px;
    height: 13px;
    background: var(--yellow-bright);
    flex-shrink: 0;
}

.logo__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo__brand {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    line-height: 1;
}

.logo__sub {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--text-light);
    line-height: 1;
}

/* ===== КНОПКИ ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: 8px;
    transition: opacity 0.2s, transform 0.1s;
    text-align: center;
}

.btn:active {
    transform: scale(0.97);
}

.btn--yellow {
    background: var(--yellow);
    color: var(--text-dark);
}

.btn--sm {
    padding: 6px 16px;
    font-size: 13px;
    height: 28px;
}

/* ===== HERO ===== */
.hero {
    background: var(--blue);
    color: var(--white);
    padding: 28px 0 32px;
    position: relative;
}

.hero__title {
    font-size: 36px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0 6px 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    margin-top: 8px;
}

.badge small {
    font-size: 10px;
    opacity: 0.65;
    font-weight: 400;
    padding-bottom:5px;
}

.badge--green {
    background: var(--green-soft);
    color: var(--green-dark);
    padding: 3px 10px;
    font-size: 11px;
    border-radius: 10px;
    margin-top: 0;
}

.hero__subtitle {
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    /* color: rgba(255, 255, 255, 0.92); */
    color: rgba(255, 227, 51, 1);
    margin-bottom: 2px;
}



.hero__product {
    border-radius: var(--radius);
    padding: 1px;
    margin:0;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
}

.hero__product-img {
    width: 100%;
    height: auto;
    transform: scale(1.08); /* +10% к размеру */
    transform-origin: center center; /* масштабирование из центра */

    
}



.hero__award {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 10px 16px;
    text-align: center;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
}

.hero__description {
    font-size: 16px;
    line-height: 150%;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 18px;
}

.hero__description strong {
    color: var(--white);
    font-weight: 700;
    font-size: 20px;
}

/* Теги */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    /*background: rgba(255, 255, 255, 0.1);*/
    border:solid 1px rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.tag--on-blue {
    background: rgba(255, 255, 255, 0.12);
}

.tag__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--yellow);
    flex-shrink: 0;
}

/* CTA */
.cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 22px;
    border-radius: 14px;
    font-size: 18px;
    font-weight:bold;
    margin-bottom: 10px;
    transition: transform 0.1s, opacity 0.2s;
}

.cta:active {
    transform: scale(0.99);
}

.cta--white {
    background: var(--white);
    color: rgba(31, 79, 136, 1);
    font-weight:bold;
    font-size:18px;
}

.cta--outline {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 1);
    font-weight:bold;
    font-size:18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.cta__arrow {
    font-size: 18px;
    font-weight: 600;
    margin-left: 12px;
}

.cta__text {font-size:18px;font-weight:bold!important;}

.sep1 {height:20px;border-bottom:1px solid rgba(255, 255, 255, 0.15);}


/* Рейтинг */
.rating {
    background: rgba(31, 79, 136, 1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 12px;
}


.rating__score {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rating__num {
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
}

.rating__stars {
    color: var(--yellow);
    font-size: 20px;
    letter-spacing: 1px;
}

.rating__divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
    margin:0 15px 0 10px;
}

.rating__count {
display:flex;
align-items:center;

}

.rating__count strong {
    color: var(--white);
    font-weight: 700;
    font-size: 20px
}

.rating__count span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    padding:0 0 5px 10px;
}

/* Маркетплейсы */

.marketplaces {
    display: flex;
    gap: 8px;
}

.marketplace {
    flex: 0 1 auto;
    background: rgba(31, 79, 136, 1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

@media (max-width: 900px) {
    .marketplace:last-child {
        flex: 1 1 0%; /* растягивается на всё оставшееся место */
    }
}

.mp-btn {
    display: flex;
    align-items: center;
    justify-content:start;  /* Центрируем контент внутри кнопки */
    width: 100%;              /* Растягиваем на всю ширину marketplace */
    gap: 12px;                /* Добавляем отступ между иконкой и текстом */
}

.mp-btn img {
    max-height: 28px;
    flex-shrink: 0;           /* Чтобы иконка не сжималась */
}

.mp-btn span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.marketplace__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.marketplace__icon--wb {
    background: linear-gradient(135deg, #cb11ab, #481173);
}

.marketplace__icon--ozon {
    background: linear-gradient(135deg, #005bff, #0066cc);
}

.marketplace__icon--ym {
    background: linear-gradient(135deg, #ffc107, #ff9800);
}

.marketplace__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
}

/* ===== ПРОБЛЕМЫ / ДЛЯ КОГО ===== */
.problems {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.problem {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom:12px;
    border-bottom:solid 1px rgba(0, 0, 0, 0.07);
}

.problem:last-child {
    border-bottom: none;
}

.problem__icon {
    width: 44px;
    height: 44px;
    background: var(--bg);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-top:4px;
    flex-shrink: 0;
}

.problem__body {
    flex: 1;
    padding-top: 2px;
}

.problem__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.problem__text {
    font-size: 14px;
    line-height: 1.2;
    color: var(--text-muted);
}

/* ===== СРАВНЕНИЕ ===== */
.compare {
    margin-top: 32px;
    background: var(--blue);
    border-radius: var(--radius);
    padding: 24px 20px;
    color: var(--white);
}

.compare__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.compare__grid {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 14px;
}


.compare__head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
    /* color: rgba(255, 255, 255, 0.6);*/
    color:rgba(105, 197, 255, 1);
}

.compare__col--good {
    border-left:solid 1px rgba(255, 255, 255, 0.07); 
    padding:0 12px 0 12px;

}

.compare__col--good .compare__head {
    color: rgba(105, 197, 255, 1);
}

.compare__cell {
    font-size: 13px;
    line-height: 1.35;
    padding-bottom:6px;
    margin-bottom:6px;
    color: rgba(255, 255, 255, 0.92);
    border-bottom:solid 1px rgba(255, 255, 255, 0.07);
}


.compare__cell:last-child {
    border-bottom: none;
}

.compare__col--bad {

}

.compare__col--bad .compare__head {
    color: rgba(255, 255, 255, 0.35);
}

.compare__col--bad .compare__cell {
    color: rgba(255, 255, 255, 0.65);
}

/* ===== ТАЙМЛАЙН ===== */

.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
}

.timeline__item {
    display: flex;
    gap: 14px;
    /* align-items: flex-start; */
    align-items: stretch;
}

.timeline__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.timeline__body {
    flex: 1;
    padding-top: 4px;
    padding-bottom:12px;
}

.timeline__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(31, 79, 136, 1);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.timeline__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.timeline__text {
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-muted);
}

.timeline__item_left {
    display: flex; /* было: flex-column — это неверное значение */
    flex-direction: column; /* задаём вертикальное расположение элементов */
    justify-content: center;
    align-items: center;
}

.timeline__item_left .v_line {
    width: 2px;
    height:100%;
    background: rgba(10, 61, 43, 0.1);
    margin: 5px auto; /* центрируем линию при необходимости */
}


/* ===== КОМПОНЕНТЫ СОСТАВА ===== */
.components {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.component {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom:12px;
    border-bottom:solid 1px rgba(0, 0, 0, 0.07);
}


.component:last-child {
    border-bottom: none;
}

.component__icon {
    width: 44px;
    height: 44px;
    background: var(--white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    margin-top:4px;
}

.component__body {
    flex: 1;
    padding-top: 2px;
}

.component__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.component__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
}

.component__text {
    font-size: 14px;
    line-height: 1.2;
    color: var(--text-muted);
}

/* ===== ИСТОРИЯ СУБСТАНЦИИ ===== */
.history {
    margin-top: 32px;
    background: var(--blue);
    border-radius: var(--radius);
    padding: 24px 20px;
    color: var(--white);
}

.history__tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    border:solid 1px rgba(255, 255, 255, 0.28);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}

.history__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 20px;
}

.history__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.history__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
    border-bottom:solid 1px rgba(255, 255, 255, 0.07);
    padding-bottom:12px;
}



.history__item:last-child {
    border-bottom: none;
}


.history__icon {
    width: 28px;
    height: 28px;
    background:rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.history__item strong {
    color: var(--white);
    font-weight: 700;
}

/* ===== НАГРАДЫ ===== */
.awards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.award {
    background: var(--white);
    border-radius: var(--radius);
    padding: 18px;
    border-top: 3px solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.award--gold     { border-top-color: var(--gold); }
.award--blue     { border-top-color: var(--blue-dark); }
.award--green    { border-top-color: var(--green); }

.award__meta {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.award__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    margin-bottom: 8px;
}

.award__text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.award__badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.award__badge--gold {
    background: var(--gold-bg);
    color: var(--gold-dark);
}

.award__badge--blue {
    background: var(--blue-soft);
    color: var(--blue-dark);
}

.award__badge--green {
    background: var(--green-bg);
    color: var(--green-dark);
}

/* ===== СТАТИСТИКА ===== */
.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stats__item {
    background: var(--green-light);
    border-radius: 14px;
    padding: 20px 14px;
    text-align: center;
}

.stats__num {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 6px;
    line-height: 1;
}

.stats__star {
    color: var(--gold);
    font-size: 22px;
}

.stats__label {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-muted);
}

/* ===== ОТЗЫВЫ ===== */
.reviews-summary {
    background: var(--blue);
    color: var(--white);
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.reviews-summary .reviews-summary-tune span {display:block;}

.reviews-summary__score {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

.reviews-summary__stars {
    color: var(--gold);
    font-size: 14px;
    letter-spacing: 1px;
}

.reviews-summary__text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.3;
}

.reviews {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review {
    background: var(--white);
    border-radius: var(--radius);
    padding: 16px;
}

.review__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.review__author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.review__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
}

.review__source {
    font-size: 11px;
    color: var(--text-light);
}

.review__stars {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 1px;
}

.review__text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.review__pill {
    display:flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--blue-light);
    color: var(--blue-dark);
    padding: 6px 12px;
    border-radius: 0 8px 8px 0;
    border-left:solid 2px rgba(31, 79, 136, 1);
    font-size: 12px;
    font-weight: 600;
}

/* ===== УВЕДОМЛЕНИЕ ===== */
.notice {
    background: var(--yellow-bg);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 24px;
}

.notice__icon {
    font-size: 16px;
    flex-shrink: 0;
}

.notice p {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
}

.notice strong {
    color: var(--text-dark);
    font-weight: 700;
}

/* ===== КУПИТЬ — БЛОК ===== */
.buy-banner {
    background: var(--yellow);
    color: var(--text-dark);
    border-radius: 42px;
    padding: 8px 16px;
    font-size: 18px;
    font-weight:bold;
    display: inline-block;
    margin: 14px 0 8px 0;
    width:100%;
    
}

.shops {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.shop {
    background: var(--white);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    transition: transform 0.1s;
}

.shop:active {
    transform: scale(0.99);
}

.shop__logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.shop__logo--wb {
    /* background: linear-gradient(135deg, #cb11ab, #481173); */
    background-image:url(/assets/img/wb-logo-btn.png);
    background-repeat:no-repeat;
    background-size:contain;    
}

.shop__logo--ozon {
    /*background: linear-gradient(135deg, #005bff, #001a99);*/
    background-image:url(/assets/img/ozon-logo-btn.png);
    background-repeat:no-repeat;
    background-size:contain;
}

.shop__logo--ym {
    /* background: conic-gradient(from 0deg, #ffc107, #ff5722, #e91e63, #ffc107); */
    background-image:url(/assets/img/ym-logo-btn.png);
    background-repeat:no-repeat;
    background-size:contain;    
}

.shop__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shop__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue);
}

.shop__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.shop__price-old {
    font-size: 12px;
    color: var(--text-light);
    text-decoration: line-through;
}

.shop__price-new {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
}

.shop__price-unit {
    font-size: 11px;
    color: var(--text-light);
}

.shop__arrow {
    color: var(--text-light);
    font-size: 18px;
    margin-left: auto;
}

.buy-disclaimer {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
}

/* ===== ПОДВАЛ ===== */
.footer {
    background: #1A1A18;
    color: rgba(255, 255, 255, 0.7);
    padding: 30px 0 28px;
}

.footer__title {
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.footer__phone {
    display: inline-block;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 8px 16px;
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.footer__hours {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.footer__link {
    display: inline-block;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    transition: background 0.2s;
}

.footer__link:hover {
    background: rgba(255, 255, 255, 0.1);
}

.footer__copy {
    margin-top: 20px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   АДАПТИВ — ПЛАНШЕТ
   ============================================ */
@media (min-width: 600px) {
    :root {
        --container: 540px;
    }

    .section {
        padding: 48px 0;
    }

    .section__title {
        font-size: 36px;
    }

    .hero__title {
        font-size: 44px;
    }

    .compare {
        padding: 32px;
    }

    .history {
        padding: 32px;
    }

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

/* ============================================
   АДАПТИВ — ДЕСКТОП
   ============================================ */
@media (min-width: 900px) {
    :root {
        --container: 720px;
    }

    body {
        font-size: 16px;
    }

    .container {
        padding: 0 24px;
    }

    .section {
        padding: 64px 0;
    }

    .section__title {
        font-size: 42px;
    }

    .hero {
        padding: 40px 0 48px;
    }

    .hero__title {
        font-size: 52px;
    }

    .hero__subtitle {
        font-size: 22px;
    }

    .hero__product {
        min-height: 320px;
    }

    .components,
    .problems {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .awards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .reviews {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .footer {
        padding: 48px 0;
    }
    .logo {max-width:40%;}

}

@media (min-width: 1200px) {
    :root {
        --container: 960px;
    }
}