/* ===== MAIN БЛОК ===== */
.main-conteiner {
    display: flex;
    position: relative;
    align-items: center;
    /* Секция во всю ширину: фон доходит до краёв экрана, а контент держится
       в тех же границах, что и остальные блоки, за счёт общего --gutter.
       Раньше здесь стоял max-width: 1720px, из-за чего по краям вылезал
       тёмный фон main двумя полосами. */
    max-width: none;
    padding: 100px var(--gutter) 0;
    margin: auto;
    height: min(calc(100vh - 100px), 900px);
    overflow: hidden;
    background:
        radial-gradient(ellipse at 70% 50%, rgba(30, 94, 255, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 80%, rgba(91, 147, 255, 0.06) 0%, transparent 40%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-1) 100%);
}

/* Пульсирующая подсветка */
.main-conteiner::before {
    content: '';
    position: absolute;
    top: 20%;
    right: 10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(30, 94, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: pulseGlow 6s ease-in-out infinite;
}

.fridge-main {
    position: relative;
    width: 373px;
    z-index: 1;
    filter: drop-shadow(0 0 40px rgba(30, 94, 255, 0.2));
}

.main-eyebrow {
    margin-left: 40px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue-3);
    padding: 9px 18px;
    border: 1px solid rgba(30, 94, 255, 0.3);
    border-radius: 100px;
    background: rgba(30, 94, 255, 0.08);
    position: relative;
    z-index: 1;
}

.main-header {
    color: #ffffff;
    margin-left: 40px;
    font-size: 72px;
    font-weight: 700;
    line-height: 1.12;
    margin-top: 26px;
    text-shadow: 0 0 40px rgba(30, 94, 255, 0.15);
    position: relative;
    z-index: 1;
}

.main-header span {
    background: linear-gradient(135deg, #1E5EFF, #5B93FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.main-title {
    margin-left: 40px;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.4;
    margin-top: 28px;
    opacity: 0.95;
    position: relative;
    z-index: 1;
    max-width: 1200px;
}


/* Кнопка */
.main-actions {
    margin-left: 40px;
    margin-top: 40px;
    position: relative;
    z-index: 1;
}

/* Холодильник + плашки, выглядывающие из-за него */
.hero-fridge {
    position: relative;
    flex-shrink: 0;
    z-index: 1;
}
/* Плашки лежат ПОД холодильником (z-index ниже) и выглядывают из-за его левого края */
.main-stats {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.main-stat {
    position: absolute;
    /* правый край плашки уходит на 54px ПОД холодильник — она выглядывает из-за него */
    right: calc(100% - 54px);
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    padding: 15px 54px 15px 20px;
    border-radius: 14px 0 0 14px;
    background: var(--bg-2);
    border: 1px solid var(--glass-brd);
    border-right: none;
    /* лёгкая тень в тон фона — раньше чёрная 45% давала грязное пятно */
    box-shadow: -8px 10px 24px rgba(8, 20, 43, 0.28);
    white-space: nowrap;
}
.main-stat b {
    font-size: 26px;
    font-weight: 700;
    color: var(--blue-2);
}
.main-stat span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 6px;
}
/* Равномерно по всей высоте холодильника */
.main-stat:nth-child(1) { top: 8%; }
.main-stat:nth-child(2) { top: 44%; }
.main-stat:nth-child(3) { top: 80%; }

/* КНОПКА */
.main-button {
    border: none;
    box-sizing: border-box;
    /* пилюля по ширине надписи, с бликом при наведении */
    border-radius: 999px;
    background: var(--btn-grad);
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    /* одна мягкая тень вместо трёх слоёв */
    box-shadow: 0 6px 18px rgba(30, 94, 255, 0.22);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    max-width: 100%;
    height: 74px;
    font-size: 24px;
}
.main-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    pointer-events: none;
}
.main-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 8px 22px rgba(30, 94, 255, 0.3);
}
.main-button:hover::after {
    left: 130%;
}
.main-button:active {
    transform: translateY(0) scale(0.98);
}

/* СНЕЖИНКА — белая, с анимацией */
.snowflake {
    position: absolute;
    top: 700px;
    right: var(--gutter);
    filter: drop-shadow(0 0 30px rgba(30, 94, 255, 0.2));
    animation: floatSnow 8s ease-in-out infinite;
    z-index: 1;
}

/* КРУГИ — голубоватые */
.circles {
    position: absolute;
    top: 150px;
    right: var(--gutter);
    z-index: 0;
    opacity: 0.6;
    animation: rotateCircles 7s linear infinite;
}

/* АНИМАЦИИ */
@keyframes floatSnow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(15deg); }
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.4); opacity: 1; }
}

@keyframes rotateCircles {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== АДАПТИВ ===== */
@media (max-width: 1720px) {
    .main-conteiner {
        padding-top: 90px;
        height: min(calc(100vh - 90px), 880px);
    }
    .main-header {
        font-size: 64px;
        line-height: 1.12;
    }
    .fridge-main {
        width: 330px;
    }
}

@media (max-width: 1530px) {
    .main-conteiner {
        padding-top: 80px;
        height: min(calc(100vh - 80px), 850px);
        gap: 30px;
    }
    .main-header {
        font-size: 56px;
        margin-left: 30px;
    }
    .fridge-main {
        width: 280px;
    }
    .main-title {
        font-size: 22px;
        margin-left: 30px;
        margin-top: 28px;
    }
    .main-button {
        height: 70px;
        font-size: 22px;
    }
    .snowflake {
        right: 150px;
        width: 120px;
        top: 630px;
    }
}

@media (max-width: 1260px) {
    .main-conteiner {
        padding-top: 70px;
        height: min(calc(100vh - 70px), 700px);
        gap: 25px;
    }
    .main-header {
        font-size: 48px;
        margin-left: 20px;
    }
    .fridge-main {
        width: 230px;
    }
    .main-title {
        font-size: 20px;
        margin-left: 20px;
        margin-top: 24px;
    }
    .main-button {
        height: 65px;
        font-size: 20px;
    }
    .snowflake {
        right: 100px;
        width: 100px;
        top: 600px;
    }
}

@media (max-width: 1024px) {
    .main-conteiner {
        padding-top: 60px;
        height: min(calc(100vh - 60px), 600px);
        gap: 20px;
    }
    .main-header {
        font-size: 40px;
        margin-left: 15px;
    }
    .fridge-main {
        width: 190px;
    }
    .main-title {
        font-size: 18px;
        margin-left: 15px;
        margin-top: 22px;
    }
    .main-button {
        height: 60px;
        font-size: 18px;
    }
    .snowflake {
        right: 80px;
        width: 80px;
        top: 550px;
    }
}

@media (max-width: 768px) {
    .main-conteiner {
        flex-direction: column;
        text-align: center;
        padding-top: 50px;
        height: min(calc(100vh - 50px), 820px);
        gap: 15px;
        justify-content: center;
        background:
            radial-gradient(ellipse at center, rgba(30, 94, 255, 0.08) 0%, transparent 70%),
            linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-1) 100%);
    }
    .main-conteiner::before {
        display: none;
    }
    .fridge-main {
        width: 150px;
        margin: 0 auto;
    }
    .main-header {
        font-size: 38px;
        line-height: 1.15;
        margin-left: 0;
        text-align: center;
    }
    .main-title {
        font-size: 16px;
        margin-left: 0;
        margin-top: 22px;
        text-align: center;
    }
    .snowflake {
        right: 80px;
        width: 60px;
        top: 650px;
    }
}

@media (max-width: 600px) {
    .main-conteiner {
        padding-top: 40px;
        height: min(calc(100vh - 40px), 740px);
        gap: 10px;
    }
    .fridge-main {
        width: 120px;
    }
    .main-header {
        font-size: 30px;
    }
    .main-title {
        font-size: 15px;
        margin-top: 18px;
    }
    .snowflake {
        right: 60px;
        width: 60px;
        top: 600px;
    }
}

@media (max-width: 480px) {
    .main-conteiner {
        padding-top: 30px;
        height: min(calc(100vh - 30px), 640px);
    }
    .fridge-main {
        width: 100px;
    }
    .main-header {
        font-size: 24px;
    }
    .main-title {
        font-size: 14px;
        margin-top: 15px;
    }
    .snowflake {
        right: 40px;
        width: 60px;
        top: 550px;
    }
}

@media (max-width: 400px) {
    .main-conteiner {
        padding-top: 20px;
        height: min(calc(100vh - 20px), 600px);
    }
    .fridge-main {
        width: 80px;
    }
    .main-header {
        font-size: 20px;
    }
    .main-title {
        font-size: 12px;
        margin-top: 12px;
    }
    .snowflake {
        right: 40px;
        width: 40px;
        top: 480px;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .main-conteiner {
        height: 100vh;
        padding-top: 20px;
        flex-direction: row;
        gap: 20px;
    }
    .fridge-main {
        width: 80px;
    }
    .main-header {
        font-size: 28px;
        line-height: 1.15;
    }
    .main-title {
        font-size: 13px;
        margin-top: 10px;
    }
    .main-eyebrow,
    .main-stats {
        display: none;
    }
    .main-actions {
        margin-left: 0;
        margin-top: 16px;
    }
}

/* ===== Выравнивание eyebrow / кнопки и масштаб плашек ===== */
/* Холодильник и текст — правее, слева освобождаем место под плашки */
@media (min-width: 1025px) {
    .main-conteiner {
        box-sizing: border-box;
        height: auto;
        /* на весь экран, но не выше 1000px — это высота самого содержимого на широких экранах; на высоких мониторах
           холодильник и текст иначе терялись в пустоте */
        min-height: min(100vh, 1000px);
        /* +124px — видимая часть плашек .main-stat (их ширина минус скрытая
           под корпусом часть). За счёт этого левый край плашек попадает
           ровно на общую линию контента остальных секций. */
        padding-left: calc(var(--gutter) + 124px);
    }
}

@media (max-width: 1530px) {
    .main-eyebrow,
    .main-actions { margin-left: 30px; }
    .main-stat { padding: 13px 50px 13px 17px; }
    .main-stat b { font-size: 22px; }
    .main-stat span { font-size: 11px; }
    .main-stat { right: calc(100% - 50px); }
}
@media (max-width: 1260px) {
    .main-eyebrow,
    .main-actions { margin-left: 20px; }
}
@media (max-width: 1024px) {
    .main-eyebrow,
    .main-actions { margin-left: 15px; }
    .main-eyebrow { font-size: 13px; letter-spacing: 1px; }
    /* Слева от холодильника уже нет места для аккуратного «выглядывания» */
    .main-stats { display: none; }
}
@media (max-width: 768px) {
    .main-eyebrow {
        display: inline-flex;
        margin: 0 auto;
        font-size: 12px;
        letter-spacing: 1px;
        padding: 7px 14px;
    }
    .main-actions {
        margin: 20px auto 0 auto;
        display: flex;
        justify-content: center;
    }
    .main-button {
        max-width: 280px;
    }
    /* На узких экранах плашки прячем — герой остаётся чистым */
    .main-stats {
        display: none;
    }
}
@media (max-width: 600px) {
    .main-actions { margin-top: 14px; }
    .main-button { max-width: 240px; }
}

/* ===== 3D-ХОЛОДИЛЬНИК (canvas вместо fridge.svg) ===== */
/* --fw = «ширина холодильника», аналог прежней width у fridge.svg.
   Canvas шире неё, чтобы хватало места на распахнутую дверцу;
   симметричные отрицательные поля оставляют ширину .hero-fridge равной --fw,
   поэтому плашки .main-stat выглядывают из-за холодильника ровно как раньше.
   margin-bottom поднимает холодильник вместе с плашками: у контейнера padding-top
   равен высоте шапки, а снизу 0, поэтому при align-items: center блок визуально провисал.
   Отступ снизу, а не top: при нехватке высоты окна центрирование само себя отключает
   и холодильник остаётся под шапкой, а не заезжает под неё. */
.main-conteiner {
    --fw: 414px;
}
.hero-fridge {
    margin-bottom: calc(var(--fw) * 0.24);
}

canvas.fridge-main {
    display: block;
    position: relative;
    z-index: 1;
    /* canvas шире --fw, чтобы распахнутая дверь не упиралась в край.
       Поля асимметричны: кадр в fridge3d.js сдвинут влево (camX), и canvas
       сдвинут туда же, чтобы холодильник остался по центру .hero-fridge.
       Сумма полей = -0.8 * --fw, поэтому ширина .hero-fridge по-прежнему = --fw. */
    width: calc(var(--fw) * 1.8);
    /* 1.95 * 3.6 / 3.35 — кадр в fridge3d.js выше на запас под открытую дверь;
       лишнее уходит вверх отрицательным margin-top, поэтому в раскладке
       холодильник по-прежнему занимает 1.95 * --fw и стоит там же */
    height: calc(var(--fw) * 2.0955);
    margin-top: calc(var(--fw) * -0.1455);
    margin-left: calc(var(--fw) * -0.525);
    margin-right: calc(var(--fw) * -0.275);
    filter: drop-shadow(0 0 40px rgba(30, 94, 255, 0.25));
    cursor: grab;
    touch-action: pan-y;
}


/* Плашки должны всегда уходить правым краем за корпус.
   Холодильник крутится (автовращение + слежение за курсором), и в анфас его силуэт самый узкий —
   левый край корпуса никогда не заходит правее 0.17 * --fw от края .hero-fridge.
   Берём 0.2 * --fw с запасом; padding-right растёт на столько же, поэтому левый
   край плашки остаётся на месте. top — в пределах высоты корпуса (12%–91% canvas). */
.main-stat {
    box-sizing: border-box;
    right: calc(100% - var(--fw) * 0.2);
    padding-right: calc(var(--fw) * 0.2);
    /* одинаковая ширина у всех трёх: скрытая часть (0.2 * --fw) + видимая (124px
       под самую длинную подпись «диагностика»); без этого ширина плыла по контенту */
    width: calc(var(--fw) * 0.2 + 124px);
}
.main-stat:nth-child(1) { top: 15%; }
.main-stat:nth-child(2) { top: 44%; }
.main-stat:nth-child(3) { top: 71%; }

/* Ноутбуки 1025–1360px: плашки не прячем, а делаем уже (видимая часть 100px вместо 124px),
   а заголовок плавно уменьшается с шириной окна — неразрывное «ХОЛОДИЛЬНИКОВ»
   помещается до правого отступа (замерено на 1025/1100/1200/1300/1360). */
@media (min-width: 1025px) and (max-width: 1360px) {
    .main-conteiner { padding-left: calc(var(--gutter) + 100px); }
    .main-stat {
        width: calc(var(--fw) * 0.2 + 100px);
        padding-left: 12px;
    }
    .main-stat b { font-size: 19px; }
    .main-stat span { font-size: 10px; }
    .main-header { font-size: clamp(38px, 3.9vw, 56px); }
    /* надпись над заголовком — в одну строку */
    .main-eyebrow {
        white-space: nowrap;
        font-size: 13px;
        letter-spacing: 1px;
    }
}
/* Ниже 1025px (узкий ноутбук развёрнут в колонку, планшет, телефон) — отдельно, см. конец файла */
@media (max-width: 1024px) {
    .main-conteiner { padding-left: var(--gutter); }
}

/* --fw-w — предел размера холодильника по ширине экрана (для десктопа),
   итоговый --fw на десктопе считается ниже с учётом высоты окна */
.main-conteiner { --fw-w: 460px; }
@media (max-width: 1720px) { .main-conteiner { --fw: 372px; --fw-w: 372px; } }
@media (max-width: 1530px) { .main-conteiner { --fw: 314px; --fw-w: 314px; } }
@media (max-width: 1260px) { .main-conteiner { --fw: 257px; --fw-w: 257px; } }
@media (max-width: 1024px) { .main-conteiner { --fw: 209px; } .hero-fridge { margin-bottom: 0; } }
/* на телефоне холодильник — главный герой первого экрана, не значок:
   раньше на 390px он был 91px шириной */
@media (max-width: 768px) {
    .main-conteiner { --fw: 220px; }
}
@media (max-width: 600px) { .main-conteiner { --fw: 200px; } }
@media (max-width: 480px) { .main-conteiner { --fw: 180px; } }
@media (max-width: 400px) { .main-conteiner { --fw: 164px; } }
@media (max-height: 500px) and (orientation: landscape) {
    .main-conteiner { --fw: 84px; }
}

/* ===== ТЕКСТОВАЯ КОЛОНКА ГЕРОЯ: распределение по высоте экрана ===== */
@media (min-width: 1025px) {
    /* поднимается на ту же величину, что и холодильник, — центры колонок совпадают,
       и сверху под шапкой не остаётся лишней пустоты */
    .hero-fridge + div {
        margin-bottom: calc(var(--fw) * 0.24);
    }
    /* промежутки растут вместе с высотой окна, заполняя экран равномернее;
       нижние границы — прежние значения, так что на невысоких экранах ничего не сжимается */
    .main-header      { margin-top: clamp(24px, 4.2vh, 52px); }
    .main-title       { margin-top: clamp(24px, 3.8vh, 46px); }
    .main-actions     { margin-top: clamp(36px, 5.8vh, 70px); }
}

/* ===== ГЕРОЙ: вместо двух абзацев — короткий список и подпись у кнопки ===== */
.main-points {
    list-style: none;
    display: inline-flex;
    flex-direction: column;
    gap: clamp(8px, 1.4vh, 14px);
    text-align: left;
}
.main-points li {
    position: relative;
    padding-left: 36px;
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.35;
    color: var(--text);
}
/* галочка в круглой стеклянной плашке — в тон значкам в «Наших преимуществах» */
.main-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.675em;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(91, 147, 255, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FB4FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
    box-shadow: inset 0 0 0 1px rgba(91, 147, 255, 0.4);
}

/* пояснение к пункту — второй строкой, мельче и приглушённо */
.main-points li span {
    /* стеклянная плашка: полупрозрачный синий фон и тонкая синяя рамка, без точки */
    display: block;
    width: fit-content;
    margin-top: 32px;
    /* выносим влево на ширину отступа пункта — край встаёт по линии галочек */
    margin-left: -36px;
    max-width: 26em;
    padding: 8px 16px;
    text-wrap: balance;
    border-radius: 12px;
    background: rgba(91, 147, 255, 0.1);
    border: 1px solid rgba(91, 147, 255, 0.28);
    font-size: 0.76em;
    line-height: 1.4;
    color: var(--text-soft);
}


/* кнопка */
.main-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
}


@media (max-width: 768px) and (min-height: 501px) {
    /* список и подпись выше двух прежних абзацев: при фиксированной высоте
       блок центрировался с переполнением и холодильник уезжал под шапку.
       Шапка на телефоне в одну строку (логотип + бутерброд), 64px — отступ сверху под неё */
    .main-conteiner {
        height: auto;
        padding-top: 88px;
        padding-bottom: 48px;
    }
    .main-points li {
        font-size: 15px;
        padding-left: 32px;
    }
    .main-points li span {
        margin-left: -32px;
    }
    .main-actions {
        flex-direction: column;
    }
    /* единый ритм ~20px между строками героя: раньше заголовок почти прилипал
       к списку (≈15px), а плашка отрывалась от него на 32px */
    .main-header {
        margin-top: 20px;
    }
    .main-points {
        margin-top: 20px;
    }
    .main-points li span {
        margin-top: 20px;
    }
    .main-actions {
        margin-top: 24px;
    }
}

/* Снежинка привязана к низу блока, а не к пиксельному top по брейкпоинтам */
@media (min-width: 1025px) {
    .snowflake {
        top: auto;
        bottom: clamp(40px, 8vh, 90px);
    }
}
/* Снежинка декоративная. Раньше на экранах ниже 860px она наезжала на подпись под
   кнопкой и пряталась; после перераскладки героя она стоит в правом нижнем углу,
   правее и ниже текста (замер 1280×720: до подписи и кнопки больше 170px). */
@media (max-width: 768px) {
    .snowflake { display: none; }
}

/* ===== ГЕРОЙ НА ДЕСКТОПЕ: всё распределяется по высоте экрана ===== */
@media (min-width: 1025px) {
    .main-conteiner {
        /* --H — высота героя: весь экран, но не больше 1000px */
        --H: min(100vh, 1000px);
        --pb: clamp(8px, 1.5vh, 16px);
        min-height: var(--H);
        /* сверху — место под фиксированную шапку (~90px) с зазором;
           зазор побольше, а снизу поменьше — контент стоит чуть ниже центра */
        padding-top: 128px;
        padding-bottom: var(--pb);
        /* холодильник занимает всю высоту под шапкой (canvas = 1.95 * --fw),
           но не больше, чем позволяет ширина экрана */
        --fw: max(240px, min(var(--fw-w), calc((var(--H) - 128px - var(--pb)) / 1.95)));
    }
    /* центрирование теперь честное — в полосе между шапкой и низом блока,
       прежний подъём через margin-bottom не нужен */
    .hero-fridge,
    .hero-fridge + div {
        margin-bottom: 0;
    }
    /* промежутки в текстовой колонке — доля высоты героя */
    .main-header  { margin-top: clamp(20px, calc(var(--H) * 0.05), 56px); }
    .main-title   { margin-top: clamp(20px, calc(var(--H) * 0.046), 52px); }
    .main-points  { gap: clamp(8px, calc(var(--H) * 0.016), 18px); }
    .main-actions { margin-top: clamp(28px, calc(var(--H) * 0.07), 76px); }
}

/* ===== ПОДПИСИ ДЕТАЛЕЙ В 3D-ХОЛОДИЛЬНИКЕ (слой создаёт fridge3d.js) =====
   Точка-маячок на детали, тонкая выноска и тёмная стеклянная плашка —
   читается на белом нутре холодильника и не закрывает саму деталь. */
.fl {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    white-space: nowrap;
    will-change: transform, opacity;
}
.fl--flip {
    flex-direction: row-reverse;
}
.fl-dot {
    position: relative;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--blue-2);
    box-shadow: 0 0 0 2px #fff, 0 0 10px 2px rgba(30, 94, 255, 0.6);
}
/* мягкий пульс вокруг точки */
.fl-dot::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid var(--blue-2);
    animation: flPulse 2.2s ease-out infinite;
}
.fl-line {
    flex: none;
    width: 18px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--blue-2), rgba(91, 147, 255, 0.35));
}
.fl--flip .fl-line {
    background: linear-gradient(270deg, var(--blue-2), rgba(91, 147, 255, 0.35));
}
.fl-text {
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(12, 30, 60, 0.88);
    border: 1px solid rgba(91, 147, 255, 0.45);
    box-shadow: 0 6px 16px rgba(8, 20, 43, 0.35);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.2px;
}
@keyframes flPulse {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .fl-dot::after { animation: none; opacity: 0; }
}

/* ===== ТЕЛЕФОН: читаемый заголовок и надпись в одну строку ===== */
@media (max-width: 600px) {
    .main-header { font-size: 32px; }
}
@media (max-width: 480px) {
    .main-header { font-size: 30px; }
    .main-eyebrow {
        white-space: nowrap;
        font-size: 10.5px;
        letter-spacing: 0.06em;
        padding: 7px 12px;
    }
}
@media (max-width: 400px) {
    .main-header { font-size: 27px; }
}

/* ===== ПОДСКАЗКА «ОТКРОЙТЕ» НА РУЧКЕ ДВЕРИ (слой создаёт fridge3d.js) =====
   Пульсирующий маячок на ручке и синяя плашка рядом. Пропадает после первого открытия. */
.fh {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    /* маячок на ручке, плашка справа от него (если справа тесно — слева, класс ставит fridge3d.js) */
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    will-change: transform, opacity;
}
.fh--left {
    flex-direction: row-reverse;
}
.fh--left .fh-text {
    animation-name: fhNudgeLeft;
}
@keyframes fhNudgeLeft {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-4px); }
}
.fh-ring {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 16px 4px rgba(30, 94, 255, 0.55);
}
/* две расходящиеся волны — «сюда можно нажать» */
.fh-ring::before,
.fh-ring::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--blue-2);
    animation: fhWave 1.8s ease-out infinite;
}
.fh-ring::after {
    animation-delay: 0.9s;
}
.fh-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 9px;
    border-radius: 999px;
    background: var(--btn-grad);
    box-shadow: 0 6px 16px rgba(30, 94, 255, 0.35);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    /* лёгкое «покачивание», чтобы плашку заметили */
    animation: fhNudge 2.4s ease-in-out infinite;
}
.fh-text svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@keyframes fhWave {
    0%   { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(2.6); opacity: 0; }
}
@keyframes fhNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
@media (max-width: 600px) {
    .fh-text { font-size: 11px; padding: 5px 10px 5px 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .fh-ring::before, .fh-ring::after, .fh-text { animation: none; }
}

/* ===== ТЕЛЕФОН И УЗКИЙ ПЛАНШЕТ: текст героя — один ровный блок =====
   Раньше каждая строка центровалась по своей ширине (список ~415px,
   плашка ~330px, кнопка ~225px) — «ёлочка» посередине и пустота по бокам.
   Теперь список и плашка одной ширины, блок не шире 540px и стоит по центру. */
@media (max-width: 768px) and (min-height: 501px) {
    .hero-fridge + div {
        width: 100%;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
    }
    .main-points {
        display: flex;
        width: 100%;
    }
    /* плашка «Сориентируем…» — во всю ширину списка, от линии галочек до края;
       текст в ней по центру — короткие строки не оставляют пустоту справа */
    .main-points li span {
        width: auto;
        max-width: none;
        text-align: center;
    }
}
@media (min-width: 601px) and (max-width: 768px) and (min-height: 501px) {
    .main-header { font-size: 44px; }
    .main-points li { font-size: 17px; }
}

/* ===== ПЛАШКИ «15+ / 1 ГОД / 0 ₽» НА ПЛАНШЕТЕ И ТЕЛЕФОНЕ =====
   Как на компьютере — выглядывают слева из-за корпуса, только компактнее:
   видимая часть 76px (на телефоне 375px слева от холодильника ровно столько места). */
@media (max-width: 1024px) and (min-height: 501px) {
    /* ширина блока — ровно по холодильнику, чтобы он стоял по центру */
    .hero-fridge {
        width: var(--fw);
    }
    .main-stats {
        display: block;
    }
    .main-stat {
        width: calc(var(--fw) * 0.2 + 76px);
        padding: 8px calc(var(--fw) * 0.2) 8px 10px;
        border-radius: 12px 0 0 12px;
        box-shadow: -6px 8px 18px rgba(8, 20, 43, 0.25);
        text-align: left;
    }
    .main-stat b { font-size: 15px; }
    .main-stat span { font-size: 9px; margin-top: 3px; }
}
/* планшет: холодильник слева, текст справа — сдвигаем всё на ширину плашек */
@media (min-width: 769px) and (max-width: 1024px) and (min-height: 501px) {
    .main-conteiner {
        padding-left: calc(var(--gutter) + 76px);
    }
}

/* ===== УЗКИЙ НОУТБУК / ПЛАНШЕТ 769–1024px: холодильник слева, текст справа =====
   Заголовок 40px не помещался в правую колонку — «ХОЛОДИЛЬНИКОВ» срезалось краем экрана.
   Кегль плавно уменьшается с шириной; надпись сверху — в одну строку; снежинка — в нижний угол. */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-header { font-size: clamp(24px, 3.1vw, 38px); }
    .main-eyebrow {
        white-space: nowrap;
        font-size: 11px;
        letter-spacing: 0.5px;
        padding: 7px 12px;
    }
    .snowflake {
        top: auto;
        bottom: 24px;
        right: var(--gutter);
        width: 70px;
    }
}
/* самые узкие телефоны: надпись над заголовком в одну строку и в пределах отступов */
@media (max-width: 400px) {
    .main-eyebrow {
        font-size: 9.5px;
        letter-spacing: 0.04em;
        padding: 6px 10px;
    }
}
/* 769–900px: колонка текста узкая — надпись над заголовком может переноситься,
   иначе она распирала колонку и текст вылезал за правый отступ */
@media (min-width: 769px) and (max-width: 900px) and (min-height: 501px) {
    .main-eyebrow { white-space: normal; }
}

/* телефон и узкий планшет (холодильник над текстом): плашки торчат слева,
   поэтому центрируем не корпус, а всю группу «плашки + холодильник» —
   сдвигаем корпус вправо на половину видимой части плашек (76px / 2) */
@media (max-width: 768px) and (min-height: 501px) {
    .hero-fridge {
        left: 38px;
    }
}

/* ===== ПЛАШКИ КРУПНЕЕ НА ПЛАНШЕТЕ И ТЕЛЕФОНЕ =====
   Видимая часть шире, чтобы крупный текст помещался («диагностика» — самая длинная подпись).
   Сдвиг холодильника/отступ слева меняются вместе с видимой частью. */
@media (max-width: 1024px) and (min-height: 501px) {
    .main-stat {
        width: calc(var(--fw) * 0.2 + 94px);
        padding-top: 9px;
        padding-bottom: 9px;
        padding-left: 12px;
    }
    .main-stat b { font-size: 18px; }
    .main-stat span { font-size: 11px; margin-top: 4px; }
}
/* 769–1024px: холодильник слева, текст справа — отступ слева на видимую часть плашек */
@media (min-width: 769px) and (max-width: 1024px) and (min-height: 501px) {
    .main-conteiner { padding-left: calc(var(--gutter) + 94px); }
}
/* телефон: группа «плашки + холодильник» по центру — сдвиг на половину видимой части */
@media (max-width: 768px) and (min-height: 501px) {
    .hero-fridge { left: 32px; }
}