:root {
    --bg: #fffaf3;
    --soft: #eaf8f6;
    --text: #18333a;
    --muted: #668087;
    --accent: #ff7a59;
    --accent-2: #20b8a6;
    --card: #ffffff;
    --shadow: 0 18px 45px rgba(24, 51, 58, 0.12);
    --radius: 18px;
    --header-height: 76px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    overflow-x: hidden;
}

body {
    margin: 0;
    padding-top: var(--header-height);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

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

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

.container {
    width: min(100% - 48px, 1440px);
    margin-inline: auto;
}

@media (max-width: 800px) {
    .container {
        width: min(100% - 32px, 1440px);
    }
}

.section {
    padding: clamp(56px, 2vw, 110px) 0;
}

.soft {
    background: linear-gradient(135deg, var(--soft), #ffffff);
}

.narrow {
    max-width: 820px;
}

.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    background: rgba(255, 250, 243, 0.9);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 30px rgba(24, 51, 58, 0.06);
}

.header-inner {
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    gap: 18px;
}

.logo {
    position: relative;
    z-index: 65;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.logo img {
    display: block;
    width: 146px;
    height: 40px;
    object-fit: contain;
}

.logo span {
    color: var(--accent-2);
}

.title {
    line-height: 24px;
    min-height: 48px;
    font-size: 1.3rem;
    padding-top: 15px;
}

.title-block {
    display: grid;
    font-weight: bold;
}

.nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 65;
    width: min(88vw, 380px);
    height: 100dvh;
    padding: max(24px, env(safe-area-inset-top)) 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 22px 0 0 22px;
    box-shadow: -26px 0 60px rgba(24, 51, 58, 0.18);
    transform: translateX(110%);
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0.35s ease;
}

.nav.is-open {
    transform: translateX(0);
    visibility: visible;
}

.nav a:not(.logo):not(.mobile-phone) {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f7fbfa;
    font-weight: 800;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.nav a:not(.logo):not(.mobile-phone):hover {
    transform: translateX(4px);
    background: #e7fff7;
    color: #078675;
}

.menu-close {
    position: absolute;
    top: max(18px, env(safe-area-inset-top));
    right: 18px;
    z-index: 80;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 14px;
    background: #fff4e6;
    color: var(--text);
    font-size: 34px;
    line-height: 1;
    box-shadow: 0 12px 26px rgba(24, 51, 58, 0.12);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.menu-close:hover {
    transform: rotate(90deg) scale(1.04);
    background: #ffe2d6;
}

.mobile-menu-head {
    display: grid;
    gap: 8px;
    padding: 2px 56px 18px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid #e7efed;
}

.mobile-phone {
    color: var(--accent);
    font-weight: 900;
}

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(24, 51, 58, 0.42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.header-phone,
.header-cta {
    display: none;
}

.header-mobile-phone {
    min-height: 44px;
    margin-left: auto;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: clamp(12px, 3.5vw, 15px);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .header-inner {
        gap: 8px;
    }

    .header-mobile-phone {
        padding-inline: 10px;
    }
}

@media (max-width: 360px) {
    .site-header .logo {
        font-size: 20px;
    }

    .site-header .logo img {
        width: 120px;
        height: 33px;
    }

    .header-mobile-phone {
        padding-inline: 8px;
        font-size: 11px;
    }

    .site-header .burger {
        width: 42px;
        height: 42px;
    }
}

.burger {
    position: relative;
    z-index: 75;
    width: 46px;
    height: 46px;
    margin-left: 0;
    display: grid;
    place-content: center;
    gap: 5px;
    border: 0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.burger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 99px;
    background: var(--text);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger.is-open span:nth-child(2) {
    opacity: 0;
}

.burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 15px 24px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent), #ffb057);
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(255, 122, 89, 0.28);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 36px rgba(255, 122, 89, 0.36);
}

.btn-small {
    padding: 12px 18px;
}

.hero {
    background: radial-gradient(circle at 20% 10%, #ffffff 0 20%, transparent 35%), linear-gradient(160deg, #fff7df, #dff8f4);
}

.hero-copy {
    max-width: 820px;
    margin-bottom: 34px;
    margin-top: 34px;
}

.eyebrow {
    color: var(--accent-2);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 20px;
    font-size: clamp(42px, 8vw, 86px);
    line-height: 0.96;
    letter-spacing: -0.07em;
}

h2 {
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;
    letter-spacing: -0.055em;
}

h3 {
    font-size: 22px;
}

.hero-copy p:not(.eyebrow),
.about p,
.contact-card p {
    color: var(--muted);
    font-size: clamp(17px, 2.5vw, 22px);
    line-height: 1.6;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 28px;
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.product-card,
.benefit-card,
.review,
.promo-card,
.contact-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.product-card:hover,
.benefit-card:hover,
.review:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 55px rgba(24, 51, 58, 0.17);
}

.product-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
    background: #e5efef;
    min-height: 15rem;
    padding-top: 25px;
}

.product-image img {
    width: 100%;
    aspect-ratio: 640 / 430;
    object-fit: contain;
    transition: transform 0.45s ease;
}

.product-card:hover img {
    transform: scale(1.06);
}

.badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #e7fff7;
    color: #078675;
    font-weight: 900;
}

.product-body {
    padding: 18px;
}

.weight,
.delivery,
.price-row span {
    color: var(--muted);
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}

.price-row b {
    font-size: 26px;
}

.btn-card {
    width: 100%;
    margin-top: 8px;
}

.promo-grid,
.benefit-grid,
.review-grid,
.footer-grid {
    display: grid;
    gap: 20px;
}

.promo-card {
    min-height: 220px;
    padding: 28px;
}

.promo-card.accent {
    background: linear-gradient(135deg, var(--accent-2), #7be5d8);
    color: #ffffff;
}

.benefit-card,
.review {
    padding: 24px;
}

.faq-item {
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.faq-question {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
}

.faq-question span {
    transition: transform 0.25s ease;
}

.faq-item.is-open .faq-question span {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding: 0 20px 20px;
    color: var(--muted);
    line-height: 1.6;
}

.contact-card {
    padding: 24px;
    display: grid;
    gap: 24px;
    background: linear-gradient(135deg, #ffffff, #fff4e6);
}

.form {
    display: grid;
    gap: 14px;
}

.form label {
    display: grid;
    gap: 8px;
    font-weight: 800;
}

.form input,
.form textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid transparent;
    border-radius: 16px;
    background: #ffffff;
    font: inherit;
    outline: none;
}

.form input:focus,
.form textarea:focus {
    border-color: var(--accent-2);
}

.form .error {
    border-color: #f04438;
}

.form-message {
    min-height: 24px;
    font-weight: 800;
}

.footer {
    padding: 42px 0;
    background: #123038;
    color: #ffffff;
}

.footer-grid a {
    display: block;
    margin: 8px 0;
    color: #d8f4ef;
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (min-width: 560px) {
    .product-grid,
    .benefit-grid,
    .review-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .promo-grid,
    .contact-card,
    .footer-grid {
        grid-template-columns: 1.2fr 0.8fr;
    }

    .section-head {
        margin-bottom: 38px;
    }
}

@media (min-width: 1024px) {
    body.menu-open {
        overflow: auto;
    }

    .burger,
    .menu-close,
    .mobile-menu-head,
    .menu-overlay {
        display: none;
    }

    .nav {
        position: static;
        z-index: auto;
        width: auto;
        height: auto;
        padding: 0;
        margin-left: auto;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        overflow: visible;
        visibility: visible;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        font-size: 0.79rem;
    }

    .nav a:not(.logo):not(.mobile-phone) {
        min-height: auto;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    .nav a:not(.logo):not(.mobile-phone):hover {
        transform: translateY(-2px);
        background: transparent;
        color: var(--accent-2);
    }

    .header-phone,
    .header-cta {
        display: inline-flex;
    }

    .header-mobile-phone {
        display: none;
    }

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

    .benefit-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .review-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}





/* =========================
   HERO — ПЛЯЖНАЯ ТЕМАТИКА
========================= */

:root {
    --hero-dark: #15343b;
    --hero-text: #68828a;
    --hero-turquoise: #1bb6aa;
    --hero-orange: #ff835d;
    --hero-yellow: #ffb34f;
    --hero-white: #ffffff;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--hero-dark);
    background: #effbf7;
}




/* =========================================
   ПЛЯЖНЫЙ ПЕРВЫЙ ЭКРАН
========================================= */

* {
    box-sizing: border-box;
}

:root {
    --beach-dark: #12343b;
    --beach-text: #668089;
    --beach-accent: #18b3a7;
    --beach-orange: #ff7658;
    --beach-yellow: #ffae4b;
    --beach-bg: #eefaf6;
}

.beach-hero {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);

    width: 100%;
    min-height: 680px;

    overflow: hidden;

    background:
            radial-gradient(
                    circle at 15% 35%,
                    rgba(255, 255, 255, 0.95) 0%,
                    rgba(255, 255, 255, 0.35) 42%,
                    transparent 70%
            ),
            linear-gradient(
                    120deg,
                    #f8fff9 0%,
                    #effaf6 48%,
                    #dff4f1 100%
            );

    isolation: isolate;
}


/* =========================================
   ЛЕВАЯ ЧАСТЬ
========================================= */

.beach-hero__content {
    position: relative;
    z-index: 4;

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

    padding:
            80px
            50px
            120px
            max(6vw, 40px);
}

.beach-hero__label {
    margin-bottom: 24px;

    color: var(--beach-accent);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing: 4px;
    text-transform: uppercase;
}

.beach-hero__title {
    max-width: 720px;
    margin: 0 0 28px;

    color: var(--beach-dark);

    font-size: clamp(52px, 5.3vw, 86px);
    font-weight: 900;
    line-height: 0.98;

    letter-spacing: -4px;
}

.beach-hero__text {
    max-width: 650px;
    margin: 0 0 34px;

    color: var(--beach-text);

    font-size: clamp(19px, 1.55vw, 27px);
    font-weight: 400;
    line-height: 1.55;
}

.beach-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: 64px;
    padding: 0 30px;

    color: #ffffff;

    font-size: 18px;
    font-weight: 800;
    line-height: 1;

    text-decoration: none;

    border-radius: 20px;

    background:
            linear-gradient(
                    135deg,
                    var(--beach-orange),
                    var(--beach-yellow)
            );

    box-shadow:
            0 18px 35px rgba(255, 118, 88, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.35);

    transition:
            transform 0.25s ease,
            box-shadow 0.25s ease;
}

.beach-hero__button::after {
    content: "→";

    font-size: 24px;
    font-weight: 400;

    transition: transform 0.25s ease;
}

.beach-hero__button:hover {
    transform: translateY(-4px);

    box-shadow:
            0 24px 42px rgba(255, 118, 88, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.beach-hero__button:hover::after {
    transform: translateX(5px);
}


/* =========================================
   ПРАВАЯ ЧАСТЬ С ИЗОБРАЖЕНИЕМ
========================================= */

.beach-hero__picture {
    position: relative;
    z-index: 1;

    min-width: 0;
    min-height: 680px;

    overflow: hidden;
}

/*
Плавный переход между текстом и фотографией
*/
.beach-hero__picture::before {
    content: "";

    position: absolute;
    z-index: 2;

    top: 0;
    bottom: 0;
    left: 0;

    width: 230px;

    pointer-events: none;

    background:
            linear-gradient(
                    90deg,
                    var(--beach-bg) 0%,
                    rgba(238, 250, 246, 0.92) 18%,
                    rgba(238, 250, 246, 0.55) 48%,
                    rgba(238, 250, 246, 0) 100%
            );
}

/*
Небольшое затемнение справа,
чтобы фотография выглядела глубже
*/
.beach-hero__picture::after {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:
            linear-gradient(
                    180deg,
                    rgba(15, 60, 70, 0.03) 0%,
                    rgba(15, 60, 70, 0) 55%,
                    rgba(15, 60, 70, 0.12) 100%
            );
}

.beach-hero__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
    Основная настройка кадрирования.

    38% — показывает больше девушки.
    50% — центр изображения.
    65% — показывает больше баллона.
    */
    object-position: 38% center;
}


/* =========================================
   БЕЛАЯ ВОЛНА СНИЗУ
========================================= */

.beach-hero__wave {
    position: absolute;
    z-index: 5;

    left: -5%;
    bottom: -110px;

    width: 110%;
    height: 190px;

    pointer-events: none;

    background: rgba(255, 255, 255, 0.94);

    border-radius:
            50% 50% 0 0 /
        70% 70% 0 0;

    transform: rotate(-1deg);
}


/* =========================================
   ПЛАНШЕТ
========================================= */

@media (max-width: 1100px) {

    .beach-hero {
        grid-template-columns: minmax(0, 52%) minmax(0, 48%);
        min-height: 620px;
    }

    .beach-hero__content {
        padding:
                65px
                30px
                100px
                35px;
    }

    .beach-hero__picture {
        min-height: 620px;
    }

    .beach-hero__title {
        font-size: clamp(48px, 6vw, 68px);
        letter-spacing: -2.5px;
    }

    .beach-hero__text {
        font-size: 20px;
    }

    .beach-hero__picture::before {
        width: 150px;
    }

    .beach-hero__image {
        object-position: 42% center;
    }
}


/* =========================================
   МОБИЛЬНАЯ ВЕРСИЯ
========================================= */

@media (max-width: 800px) {

    .beach-hero {
        display: flex;
        flex-direction: column;

        min-height: auto;
    }

    .beach-hero__content {
        padding:
                55px
                22px
                40px;

        background:
                linear-gradient(
                        180deg,
                        #f8fff9 0%,
                        #eefaf6 100%
                );
    }

    .beach-hero__label {
        margin-bottom: 18px;

        font-size: 13px;
        letter-spacing: 3px;
    }

    .beach-hero__title {
        max-width: 650px;
        margin-bottom: 20px;

        font-size: clamp(44px, 11vw, 64px);
        line-height: 1;

        letter-spacing: -2px;
    }

    .beach-hero__text {
        margin-bottom: 28px;

        font-size: 19px;
        line-height: 1.5;
    }

    .beach-hero__picture {
        width: 100%;
        min-height: 0;
        height: 500px;
    }

    .beach-hero__picture::before {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;

        width: 100%;
        height: 110px;

        background:
                linear-gradient(
                        180deg,
                        #eefaf6 0%,
                        rgba(238, 250, 246, 0.7) 35%,
                        rgba(238, 250, 246, 0) 100%
                );
    }

    .beach-hero__image {
        object-position: 42% center;
    }

    .beach-hero__wave {
        bottom: -135px;
    }
}


/* =========================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ
========================================= */

@media (max-width: 480px) {

    .beach-hero__content {
        padding:
                42px
                18px
                32px;
    }

    .beach-hero__label {
        font-size: 12px;
        letter-spacing: 2.5px;
    }

    .beach-hero__title {
        font-size: 43px;
        letter-spacing: -1.5px;
    }

    .beach-hero__text {
        font-size: 17px;
    }

    .beach-hero__button {
        width: 100%;
        min-height: 60px;
        padding: 0 20px;
    }

    .beach-hero__picture {
        height: 390px;
    }

    .beach-hero__image {
        object-position: 45% center;
    }
}

/* =========================================
   HERO — MODERN VINTAGE POSTCARD
========================================= */

.beach-hero {
    --vintage-ink: #19393a;
    --vintage-paper: #f4ead4;
    --vintage-paper-light: #fffaf0;
    --vintage-coral: #dc6048;
    --vintage-mustard: #d7a73d;
    --vintage-teal: #2e7771;

    position: relative;
    display: grid;
    grid-template-columns: minmax(440px, 0.92fr) minmax(520px, 1.08fr);
    gap: clamp(18px, 2.2vw, 42px);
    width: min(calc(100% - 48px), 1480px);
    min-height: 690px;
    margin: clamp(22px, 3vw, 52px) auto clamp(58px, 7vw, 110px);
    padding: clamp(18px, 2vw, 30px);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(25, 57, 58, 0.26);
    border-radius: 34px;
    background:
        repeating-linear-gradient(0deg, rgba(25, 57, 58, 0.025) 0 1px, transparent 1px 4px),
        radial-gradient(circle at 8% 10%, rgba(255, 255, 255, 0.85), transparent 32%),
        var(--vintage-paper);
    box-shadow:
        0 28px 70px rgba(49, 48, 38, 0.16),
        inset 0 0 0 8px rgba(255, 250, 240, 0.72);
}

.beach-hero::before {
    content: "Доставка 24/7";
    position: absolute;
    z-index: 5;
    top: 28px;
    right: -57px;
    width: 260px;
    padding: 9px 0;
    color: var(--vintage-paper-light);
    font: 700 10px/1.2 Arial, sans-serif;
    letter-spacing: 2px;
    text-align: center;
    background: var(--vintage-coral);
    transform: rotate(45deg);
    box-shadow: 0 5px 15px rgba(82, 43, 31, 0.2);
}

.beach-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 11px;
    pointer-events: none;
    border: 1px dashed rgba(25, 57, 58, 0.25);
    border-radius: 25px;
}

.beach-hero__content {
    position: relative;
    z-index: 4;
    justify-content: center;
    padding: clamp(70px, 7vw, 108px) clamp(26px, 4.5vw, 72px);
}

.beach-hero__content::before {
    content: "N₂O";
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin-bottom: 28px;
    color: var(--vintage-coral);
    font: 700 22px/1 Georgia, "Times New Roman", serif;
    border: 2px solid currentColor;
    border-radius: 50%;
    outline: 1px dashed currentColor;
    outline-offset: 5px;
    transform: rotate(-7deg);
}

.beach-hero__label {
    position: absolute;
    top: clamp(32px, 3vw, 48px);
    left: clamp(26px, 4.5vw, 72px);
    margin: 0;
    color: var(--vintage-teal);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3.2px;
}

.beach-hero__title {
    max-width: 680px;
    margin: 0 0 26px;
    color: var(--vintage-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(52px, 5vw, 78px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -3px;
    text-wrap: balance;
}

.beach-hero__title::after {
    content: "";
    display: block;
    width: 92px;
    height: 5px;
    margin-top: 27px;
    border-radius: 99px;
    background: var(--vintage-mustard);
    box-shadow: 25px 0 0 var(--vintage-paper-light);
}

.beach-hero__text {
    max-width: 590px;
    margin: 0 0 34px;
    color: #566c68;
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.65;
}

.beach-hero__button {
    min-height: 58px;
    padding: 0 26px;
    color: var(--vintage-paper-light);
    font-size: 16px;
    letter-spacing: 0.3px;
    border: 1px solid var(--vintage-ink);
    border-radius: 4px;
    background: var(--vintage-ink);
    box-shadow: 7px 7px 0 var(--vintage-mustard);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.beach-hero__button::after {
    content: "↗";
    font-size: 20px;
}

.beach-hero__button:hover {
    background: var(--vintage-teal);
    transform: translate(3px, 3px);
    box-shadow: 4px 4px 0 var(--vintage-mustard);
}

.beach-hero__picture {
    position: relative;
    z-index: 2;
    min-height: 630px;
    overflow: hidden;
    border: 10px solid var(--vintage-paper-light);
    border-radius: 24px;
    box-shadow:
        0 16px 35px rgba(44, 53, 45, 0.18),
        0 0 0 1px rgba(25, 57, 58, 0.2);
    transform: rotate(1.1deg);
}

.beach-hero__picture::before {
    content: "Закись • Азота • Москва";
    z-index: 4;
    top: auto;
    right: 22px;
    bottom: 22px;
    left: auto;
    width: auto;
    height: auto;
    padding: 10px 14px 8px;
    color: var(--vintage-paper-light);
    font: 700 11px/1 Arial, sans-serif;
    letter-spacing: 2px;
    border: 1px solid rgba(255, 250, 240, 0.7);
    border-radius: 2px;
    background: rgba(25, 57, 58, 0.72);
    backdrop-filter: blur(8px);
}

.beach-hero__picture::after {
    z-index: 3;
    background:
        linear-gradient(180deg, rgba(215, 167, 61, 0.07), transparent 38%, rgba(61, 40, 23, 0.2)),
        radial-gradient(circle at 50% 40%, transparent 48%, rgba(44, 33, 20, 0.2) 120%);
    mix-blend-mode: multiply;
}

.beach-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 43% center;
    filter: saturate(0.84) sepia(0.12) contrast(1.04);
    transform: scale(1.015);
}

.beach-hero__wave {
    display: none;
}

@media (max-width: 1100px) {
    .beach-hero {
        grid-template-columns: minmax(360px, 0.9fr) minmax(430px, 1.1fr);
        gap: 18px;
        min-height: 610px;
    }

    .beach-hero__content {
        padding: 72px 34px 58px;
    }

    .beach-hero__label {
        top: 30px;
        left: 34px;
    }

    .beach-hero__content::before {
        width: 58px;
        height: 58px;
        margin-bottom: 24px;
        font-size: 19px;
    }

    .beach-hero__title {
        font-size: clamp(44px, 5.4vw, 62px);
        letter-spacing: -2px;
    }

    .beach-hero__picture {
        min-height: 550px;
    }
}

@media (max-width: 800px) {
    .beach-hero {
        display: flex;
        flex-direction: column;
        width: min(calc(100% - 28px), 680px);
        min-height: auto;
        padding: 14px;
        border-radius: 25px;
    }

    .beach-hero::before {
        top: 30px;
        right: -80px;
    }

    .beach-hero::after {
        inset: 7px;
        border-radius: 19px;
    }

    .beach-hero__content {
        padding: 74px 24px 36px;
        background: transparent;
    }

    .beach-hero__label {
        top: 28px;
        left: 24px;
        max-width: 230px;
        font-size: 11px;
        letter-spacing: 2.4px;
    }

    .beach-hero__content::before {
        width: 54px;
        height: 54px;
        margin-bottom: 22px;
    }

    .beach-hero__title {
        font-size: clamp(42px, 10.5vw, 62px);
        line-height: 1;
    }

    .beach-hero__text {
        font-size: 17px;
        line-height: 1.55;
    }

    .beach-hero__picture {
        order: 2;
        width: 100%;
        height: clamp(390px, 115vw, 580px);
        min-height: 0;
        border-width: 7px;
        border-radius: 18px;
        transform: none;
    }

    .beach-hero__picture::before {
        top: auto;
        right: 15px;
        bottom: 15px;
        left: auto;
        width: auto;
        height: auto;
        background: rgba(25, 57, 58, 0.72);
    }

    .beach-hero__image {
        object-position: 43% center;
    }
}

@media (max-width: 480px) {
    .beach-hero {
        width: calc(100% - 20px);
        margin-top: 14px;
        margin-bottom: 48px;
    }

    .beach-hero__content {
        padding: 68px 16px 32px;
    }

    .beach-hero__label {
        left: 16px;
        letter-spacing: 1.8px;
    }

    .beach-hero__title {
        font-size: clamp(38px, 12vw, 52px);
        letter-spacing: -1.5px;
    }

    .beach-hero__title::after {
        margin-top: 22px;
    }

    .beach-hero__button {
        width: 100%;
    }

    .beach-hero__picture {
        height: 390px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .beach-hero__button,
    .beach-hero__button::after {
        transition: none;
    }
}

/* AZOT24: ночной космический режим */
:root {
    --bg: #0d0e0d;
    --soft: #121512;
    --text: #f4f5ef;
    --muted: #afb4aa;
    --accent: #9cff00;
    --accent-2: #9cff00;
    --card: #151815;
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.52);
    --radius: 4px;
}

body {
    background: #0d0e0d;
    background-image: radial-gradient(circle at 92% 5%, rgba(156, 255, 0, 0.11), transparent 23%), linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
    color: var(--text);
}

.site-header { background: rgba(10, 11, 10, .88); border-bottom: 1px solid rgba(156, 255, 0, .22); box-shadow: none; }
.logo, h1, h2, h3 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-weight: 900; text-transform: uppercase; }
.logo { letter-spacing: .08em; }
.logo span, .eyebrow, .mobile-phone { color: var(--accent); }
.nav { background: #101210; border-left: 1px solid rgba(156,255,0,.28); }
.nav a:not(.logo):not(.mobile-phone) { background: #171a17; color: #e9eee5; border-left: 2px solid transparent; }
.nav a:not(.logo):not(.mobile-phone):hover { background: #1c211a; color: var(--accent); border-left-color: var(--accent); }
.burger { background: #181c17; border: 1px solid rgba(156,255,0,.4); box-shadow: none; }
.burger span { background: var(--accent); }
.hero, .soft { background: transparent; }
.section { padding-block: clamp(54px, 7vw, 112px); }
.hero-copy p:not(.eyebrow), .about p, .contact-card p, .weight, .delivery, .price-row span, .faq-answer p { color: var(--muted); }

.btn, .beach-hero__button {
    border-radius: 0; background: var(--accent); color: #0c0e0b; box-shadow: 5px 5px 0 #4d6700;
    text-transform: uppercase; letter-spacing: .06em;
}
.btn:hover, .beach-hero__button:hover { background: #c2ff4a; box-shadow: 8px 8px 0 #4d6700; }

.product-card, .benefit-card, .review, .promo-card, .contact-card, .faq-item {
    background: linear-gradient(145deg, #191d18, #101210); border: 1px solid rgba(240, 255, 226, .12); border-radius: 3px; box-shadow: var(--shadow);
}
.product-card:hover, .benefit-card:hover, .review:hover { border-color: rgba(156,255,0,.68); box-shadow: 0 0 0 1px rgba(156,255,0,.16), var(--shadow); }
.product-image { background: #090a09; border-bottom: 1px solid rgba(156,255,0,.18); }
.badge { border-radius: 0; background: var(--accent); color: #0c0e0b; }
.promo-card.accent { background: #9cff00; color: #0d0e0d; }
.promo-card.accent p { color: #27301f; }

.beach-hero {
    position: relative; isolation: isolate; min-height: min(720px, 86vh); margin-top: clamp(34px, 7vw, 88px);
    padding: clamp(76px, 10vw, 150px) max(28px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; overflow: hidden;
    background: #080908;
    border: 0;
}
.beach-hero::before, .beach-hero::after, .beach-hero__picture, .beach-hero__wave { display: none; }
.beach-hero__content { position: relative; z-index: 2; max-width: min(680px, 65vw); padding: 0; }
.beach-hero__content::before { display: none; }
.beach-hero__label { color: var(--accent); border: 1px solid rgba(156,255,0,.5); background: rgba(11,13,10,.8); border-radius: 0; padding: 8px 12px; }
.beach-hero__title { color: #f5f7f0; text-shadow: none; font-size: clamp(48px, 6.4vw, 98px); }
.beach-hero__title::after { content: ""; display: block; width: 88px; height: 6px; margin-top: 28px; background: var(--accent); }
.beach-hero__text { color: #d0d6ca; max-width: 570px; }
.form input, .form textarea { background: #0c0e0c; border: 1px solid #394034; color: var(--text); border-radius: 2px; }
.form input:focus, .form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(156,255,0,.13); }
.faq-question { color: var(--text); }
.footer { background: #070807; border-top: 1px solid rgba(156,255,0,.35); }
.footer-grid a { color: #c7d7bc; }

@media (max-width: 767px) {
    .beach-hero { min-height: 660px; align-items: flex-start; }
    .beach-hero__content { max-width: 100%; padding-right: 0; }
}

/* Финальная компоновка hero: без перекрытия заголовка и метки. */
.beach-hero {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    gap: 0 !important;
    margin-inline: 0 !important;
    border-radius: 0 !important;
}

.beach-hero__content {
    display: block !important;
    width: 100% !important;
    max-width: min(620px, 100%) !important;
}

.beach-hero__label {
    position: static !important;
    display: inline-block !important;
    margin: 0 0 22px !important;
    font-family: Inter, Arial, sans-serif !important;
    line-height: 1.2 !important;
}

.beach-hero__title {
    max-width: 620px !important;
    margin: 0 0 26px !important;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif !important;
    font-size: clamp(42px, 6vw, 78px) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    letter-spacing: .01em !important;
    overflow-wrap: normal !important;
    text-wrap: wrap !important;
}

@media (max-width: 767px) {
    .beach-hero { padding: 64px 24px 310px !important; }
    .beach-hero__title { font-size: clamp(42px, 12vw, 64px) !important; }
    .beach-hero__label { margin-bottom: 18px !important; font-size: 11px !important; letter-spacing: .18em !important; }
}

/* Карточки каталога: действие всегда на одной линии. */
.product-card {
    display: flex;
    flex-direction: column;
}

.product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.product-body .btn-card {
    margin-top: auto;
}

/* Никаких рамок вокруг космического героя. */
.beach-hero {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.beach-hero::before,
.beach-hero::after,
.beach-hero__content::before {
    content: none !important;
    display: none !important;
}

/* Палитра: графит и приглушённый красный вместо кислотного зелёного. */
:root {
    --accent: #d74747;
    --accent-2: #d74747;
}

body {
    background-image: radial-gradient(circle at 92% 5%, rgba(215, 71, 71, .11), transparent 23%), linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
}

.site-header { border-bottom-color: rgba(215, 71, 71, .28); }
.nav { border-left-color: rgba(215, 71, 71, .32); }
.nav a:not(.logo):not(.mobile-phone):hover { background: #231818; color: #f06a6a; border-left-color: var(--accent); }
.burger { border-color: rgba(215, 71, 71, .55); }
.product-card:hover, .benefit-card:hover, .review:hover { border-color: rgba(215, 71, 71, .74); box-shadow: 0 0 0 1px rgba(215,71,71,.14), var(--shadow); }
.product-image { border-bottom-color: rgba(215,71,71,.24); }

.btn, .beach-hero__button {
    background: var(--accent);
    color: #fffafa;
    box-shadow: 5px 5px 0 #681d23;
}

.btn:hover, .beach-hero__button:hover { background: #ee6464; box-shadow: 8px 8px 0 #681d23; }
.badge, .promo-card.accent { background: var(--accent); color: #fffafa; }
.promo-card.accent p { color: #ffe3e3; }

.beach-hero {
    background-image: none;
    border-color: rgba(215,71,71,.32);
}

.beach-hero__label { border-color: rgba(215,71,71,.58); }
.beach-hero__title::after { background: var(--accent); }
.form input:focus, .form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(215,71,71,.14); }
.footer { border-top-color: rgba(215,71,71,.4); }

@media (max-width: 767px) {
    .beach-hero { background-image: none; }
}

/* Возвращаем фирменный неоново-зелёный космический режим. */
:root {
    --accent: #9cff00;
    --accent-2: #9cff00;
}

body {
    background-image: radial-gradient(circle at 92% 5%, rgba(156, 255, 0, .11), transparent 23%), linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
}

.site-header { border-bottom-color: rgba(156,255,0,.22); }
.nav { border-left-color: rgba(156,255,0,.28); }
.nav a:not(.logo):not(.mobile-phone):hover { background: #1c211a; color: var(--accent); border-left-color: var(--accent); }
.burger { border-color: rgba(156,255,0,.4); }
.product-card:hover, .benefit-card:hover, .review:hover { border-color: rgba(156,255,0,.68); box-shadow: 0 0 0 1px rgba(156,255,0,.16), var(--shadow); }
.product-image { border-bottom-color: rgba(156,255,0,.18); }
.badge, .promo-card.accent { background: var(--accent); color: #0a0c08; }
.promo-card.accent p { color: #27301f; }

.btn, .beach-hero__button {
    position: relative;
    overflow: hidden;
    border: 1px solid #c8ff69;
    border-radius: 7px;
    background: linear-gradient(135deg, #c4ff57 0%, #9cff00 46%, #7fe000 100%);
    color: #090b08;
    box-shadow: 0 7px 0 #3d6500, 0 12px 26px rgba(100, 204, 0, .18), inset 0 1px 0 rgba(255,255,255,.66);
}

.btn::before, .beach-hero__button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
    transform: translateX(-115%);
    transition: transform .45s ease;
}

.btn:hover, .beach-hero__button:hover {
    background: linear-gradient(135deg, #d7ff85, #aaff13 48%, #87ec00);
    box-shadow: 0 4px 0 #3d6500, 0 14px 28px rgba(100, 204, 0, .27), inset 0 1px 0 rgba(255,255,255,.7);
    transform: translateY(3px);
}

.btn:hover::before, .beach-hero__button:hover::before { transform: translateX(115%); }

.beach-hero {
    background-image: none;
    border-color: rgba(156,255,0,.32);
}

.beach-hero__label { border-color: rgba(156,255,0,.55); }
.beach-hero__title::after { background: var(--accent); }
.form input:focus, .form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(156,255,0,.13); }
.footer { border-top-color: rgba(156,255,0,.35); }

@media (max-width: 767px) {
    .beach-hero { background-image: none; }
}

/* Мягкое растворение hero-иллюстрации в фоне страницы. */
.beach-hero {
    margin-top: 0 !important;
}

.beach-hero::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    left: 0;
    height: clamp(180px, 16vw, 280px);
    pointer-events: none;
    border: 0 !important;
    border-radius: 0 !important;
    background-image:
        linear-gradient(180deg, #11180d 0%, rgba(16, 23, 13, .98) 18%, rgba(13, 17, 12, .78) 48%, rgba(13, 14, 13, .18) 82%, transparent 100%),
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
}

@media (max-width: 767px) {
    .beach-hero::after { height: 180px; }
}

/* Мобильная шапка: телефон строго по центру экрана. */
@media (max-width: 767px) {
    .header-inner {
        position: relative;
    }

    .site-header .burger {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .header-mobile-phone {
        position: absolute;
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
    }
}

/* На десктопе используем ту же кнопку телефона, что и в мобильной шапке. */
@media (min-width: 1024px) {
    .header-phone {
        display: none;
    }

    .header-mobile-phone {
        display: inline-flex;
        margin-left: 18px;
        font-size: 15px;
    }
}

/* Нейтральная чёрная плитка фона: цвет остаётся только в акцентах. */
body {
    background-color: #080908;
    background-image:
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 44px 44px;
}

.beach-hero::after {
    background-image:
        linear-gradient(180deg, #080908 0%, rgba(8, 9, 8, .86) 18%, rgba(8, 9, 8, .57) 48%, rgba(8, 9, 8, .10) 82%, transparent 100%),
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
}

/* Нижний край баннера растворяется в основную сетку страницы. */
.beach-hero::before {
    content: "" !important;
    position: absolute;
    z-index: 3;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    display: block !important;
    width: auto;
    height: clamp(170px, 16vw, 310px);
    margin: 0 !important;
    pointer-events: none;
    transform: none !important;
    rotate: none !important;
    translate: none !important;
    scale: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    background-color: transparent !important;
    background-image:
        linear-gradient(180deg, transparent 0%, rgba(8, 9, 8, .34) 30%, rgba(8, 9, 8, .88) 77%, #080908 100%),
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
}

/* Белая нижняя граница шапки. */
.site-header {
    border-bottom-color: rgba(255, 255, 255, .88);
}

/* Текущий раздел меню: салатовый текст и компактный индикатор. */
.nav a:not(.logo):not(.mobile-phone).is-current {
    position: relative;
    color: #9cff00;
}

.nav a:not(.logo):not(.mobile-phone).is-current::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    background: #9cff00;
    box-shadow: 0 0 10px rgba(156, 255, 0, .75);
}

@media (max-width: 1023px) {
    .nav a:not(.logo):not(.mobile-phone).is-current {
        background: #1c211a;
        border-left-color: #9cff00;
    }

    .nav a:not(.logo):not(.mobile-phone).is-current::after {
        display: none;
    }
}

/* Живой индикатор под заголовком. */
@keyframes hero-indicator-drift {
    from { transform: translateX(0); }
    to { transform: translateX(82px); }
}

.beach-hero__title::after {
    animation: hero-indicator-drift .85s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    .beach-hero__title::after {
        animation: none;
    }
}

/* Полная навигация в подвале. */
.footer-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    font-size: .79rem;
    font-weight: 800;
}

.footer-menu h3 {
    display: none;
}

.footer-menu a {
    display: inline;
    margin: 0;
    color: #e9eee5;
    transition: color .2s ease, transform .2s ease;
}

.footer-menu a:hover {
    color: #9cff00;
    transform: translateY(-2px);
}

@media (min-width: 1024px) {
    .footer-grid {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .footer-menu {
        flex: initial;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 20px;
        line-height: normal;
        white-space: nowrap;
        order: 2;
    }

    .footer-grid > div {
        order: 3;
        margin-left: auto;
        white-space: nowrap;
    }

    .footer-menu a {
        display: flex;
        align-items: center;
        min-height: auto;
        padding: 0;
    }
}

/* Единая сетка для навигации в шапке и подвале. */
@media (min-width: 1200px) {
    .header-inner,
    .footer-grid {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr) 198px;
        align-items: center;
        gap: 18px;
    }

    .header-inner .nav,
    .footer-menu {
        grid-column: 2;
        justify-self: end;
        margin-left: 0;
    }

    .header-mobile-phone,
    .footer-grid > div {
        grid-column: 3;
        justify-self: end;
        margin-left: 0;
    }
}

.footer-menu a.is-current {
    position: relative;
    color: #9cff00;
}

.footer-menu a.is-current::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    background: #9cff00;
    box-shadow: 0 0 10px rgba(156, 255, 0, .75);
}

/* Карточка товара: единая линия цены и доставки. */
.product-body .title {
    min-height: 63px;
}

.product-body .delivery {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin: 14px 0 18px;
    padding: 8px 12px;
    color: #c8cec2;
    text-align: center;
    border: 1px solid rgba(230, 255, 210, .16);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .24));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 8px 18px rgba(0, 0, 0, .16);
}

.product-body .delivery span {
    margin-left: 5px;
    color: #9cff00;
    font-weight: 800;
}

.product-body .weight {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 32px;
    margin-bottom: 10px;
    padding: 6px 10px;
    color: #d7ddd0;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.1;
    border: 1px solid rgba(230, 255, 210, .17);
    border-left: 3px solid #9cff00;
    border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(156, 255, 0, .28), rgba(156, 255, 0, .05)) 0 0 / 0% 100% no-repeat,
        linear-gradient(90deg, rgba(156, 255, 0, .08), rgba(255, 255, 255, .025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    animation: weight-battery-charge 4.2s ease-in-out infinite;
}

.product-body .weight::after {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(156, 255, 0, .9);
    content: '';
    animation: weight-battery-light 4.2s ease-in-out infinite;
}

@keyframes weight-battery-charge {
    0%, 10% { background-size: 0% 100%, auto; }
    58%, 74% { background-size: 100% 100%, auto; }
    100% { background-size: 0% 100%, auto; }
}

@keyframes weight-battery-light {
    0%, 10%, 100% { opacity: .22; transform: scale(.75); }
    58%, 74% { opacity: 1; transform: scale(1.2); }
}

.product-body .price-row span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
    color: #d8ddd3;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.product-body .price-row span::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: #9cff00;
    box-shadow: 0 0 8px rgba(156, 255, 0, .8);
}

/* Живые космические эффекты первого экрана. */
.beach-hero .hero-fx {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.hero-fx--stars {
    inset: 0;
    opacity: .55;
    background-image:
        radial-gradient(circle at 8% 18%, #fff 0 1px, transparent 1.8px),
        radial-gradient(circle at 24% 66%, rgba(156, 255, 0, .9) 0 1px, transparent 1.8px),
        radial-gradient(circle at 51% 28%, #fff 0 1px, transparent 1.7px),
        radial-gradient(circle at 76% 17%, rgba(156, 255, 0, .8) 0 1.2px, transparent 2px),
        radial-gradient(circle at 91% 55%, #fff 0 1px, transparent 1.7px);
    animation: hero-stars-flicker 2.8s ease-in-out infinite alternate;
}

.hero-fx--beam {
    top: -30%;
    right: 10%;
    width: 15%;
    height: 160%;
    opacity: .24;
    transform: rotate(20deg);
    background: linear-gradient(90deg, transparent, rgba(156, 255, 0, .7), transparent);
    filter: blur(7px);
    animation: hero-beam-sweep 3.6s ease-in-out infinite alternate;
}

.hero-fx--scan {
    right: 0;
    bottom: 10%;
    left: 0;
    height: 1px;
    opacity: .7;
    background: linear-gradient(90deg, transparent, rgba(156, 255, 0, .95), transparent);
    box-shadow: 0 0 14px rgba(156, 255, 0, .65);
    animation: hero-scanline 4.4s linear infinite;
}

@keyframes hero-stars-flicker {
    from { opacity: .28; transform: translateY(0); }
    to { opacity: .68; transform: translateY(-6px); }
}

@keyframes hero-beam-sweep {
    from { translate: -120px 0; opacity: .08; }
    to { translate: 170px 0; opacity: .34; }
}

@keyframes hero-scanline {
    from { transform: translateY(0); opacity: .1; }
    20% { opacity: .8; }
    to { transform: translateY(-520px); opacity: .05; }
}

@media (prefers-reduced-motion: reduce) {
    .beach-hero .hero-fx {
        animation: none;
    }
}

/* Космическое поле каталога. */
.hero#catalog {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 82% 16%, rgba(123, 255, 0, .18), transparent 26%),
        radial-gradient(ellipse at 12% 72%, rgba(62, 100, 28, .2), transparent 31%),
        linear-gradient(90deg, rgba(8, 9, 8, .32), rgba(8, 9, 8, .12) 55%, rgba(8, 9, 8, .24));
}

.hero#catalog > .container {
    position: relative;
    z-index: 2;
}

.hero#catalog .catalog-transition {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    height: clamp(160px, 16vw, 300px);
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 9, 8, .38) 36%, #080908 100%);
}

.hero#catalog::before,
.hero#catalog::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.hero#catalog::before {
    inset: 0;
    opacity: .8;
    background-image:
        radial-gradient(circle at 5% 15%, #fff 0 1px, transparent 1.8px),
        radial-gradient(circle at 16% 42%, rgba(156,255,0,.9) 0 1px, transparent 1.7px),
        radial-gradient(circle at 31% 8%, #fff 0 1px, transparent 1.8px),
        radial-gradient(circle at 48% 58%, #fff 0 1px, transparent 1.7px),
        radial-gradient(circle at 63% 24%, rgba(156,255,0,.85) 0 1px, transparent 1.8px),
        radial-gradient(circle at 77% 66%, #fff 0 1px, transparent 1.7px),
        radial-gradient(circle at 91% 36%, #fff 0 1px, transparent 1.8px);
    animation: catalog-stars-flicker 3.2s ease-in-out infinite alternate;
}

.hero#catalog::after {
    top: -70%;
    right: 16%;
    width: 22%;
    height: 220%;
    opacity: .46;
    transform: rotate(28deg);
    background: linear-gradient(90deg, transparent, rgba(156,255,0,.7), transparent);
    filter: blur(10px);
    animation: catalog-hyperspace 5s ease-in-out infinite alternate;
}

.hero#catalog .hero__sun,
.hero#catalog .hero__bubble {
    position: absolute;
    z-index: 0;
    display: block;
    pointer-events: none;
    border-radius: 50%;
}

.hero#catalog .hero__sun {
    top: 16%;
    right: -150px;
    width: 430px;
    height: 430px;
    opacity: .5;
    background: radial-gradient(circle, rgba(156,255,0,.36) 0%, rgba(93,178,0,.13) 31%, transparent 69%);
    filter: blur(3px);
    animation: catalog-nebula-pulse 4.6s ease-in-out infinite alternate;
}

.hero#catalog .hero__bubble {
    bottom: 8%;
    left: -90px;
    width: 260px;
    height: 260px;
    opacity: .3;
    border: 1px solid rgba(230,255,210,.26);
    background: radial-gradient(circle at 36% 31%, rgba(255,255,255,.16), rgba(156,255,0,.07) 26%, rgba(0,0,0,.1) 54%, transparent 70%);
    box-shadow: 0 0 70px rgba(156,255,0,.13), inset -24px -18px 35px rgba(0,0,0,.42);
    animation: catalog-orbit 13s linear infinite;
}

.hero#catalog .first-grid::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 10%;
    right: -24%;
    width: 64%;
    height: 1px;
    pointer-events: none;
    opacity: .55;
    transform: rotate(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), rgba(156,255,0,.95), transparent);
    box-shadow: 0 0 16px rgba(156,255,0,.7), 0 0 34px rgba(156,255,0,.35);
    animation: catalog-comet 4.8s ease-in-out infinite;
}

@keyframes catalog-stars-flicker {
    from { opacity: .35; transform: translateY(0); }
    to { opacity: .9; transform: translateY(-12px); }
}

@keyframes catalog-hyperspace {
    from { translate: -160px 0; opacity: .08; }
    to { translate: 230px 0; opacity: .36; }
}

@keyframes catalog-nebula-pulse {
    from { scale: .85; opacity: .18; }
    to { scale: 1.16; opacity: .48; }
}

@keyframes catalog-orbit {
    to { transform: rotate(360deg); }
}

@keyframes catalog-comet {
    0%, 100% { translate: 38% -70px; opacity: 0; }
    18% { opacity: .65; }
    52% { translate: -118% 370px; opacity: .82; }
    72% { opacity: 0; }
}

@media (min-width: 1024px) {
    .hero#catalog {
        background-position: center, center, center, 62% center;
    }

    .hero#catalog::before {
        opacity: 1;
    }

    .hero#catalog .hero__sun {
        opacity: .62;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero#catalog::before,
    .hero#catalog::after,
    .hero#catalog .hero__sun,
    .hero#catalog .hero__bubble,
    .hero#catalog .first-grid::after {
        animation: none;
    }
}

/* Фоны подключаются через Image::render(), а не CSS url(). */
.beach-hero {
    background: #080908 !important;
}

.beach-hero__background,
.catalog-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.beach-hero__background picture,
.beach-hero__background-image,
.catalog-background picture,
.catalog-background-image {
    display: block;
    width: 100%;
    height: 100%;
}

.beach-hero__background-image,
.catalog-background-image {
    object-fit: cover;
}

.beach-hero__background-image {
    object-position: center;
}

/* Горящие линзы тёмного генерала: эффект расположен поверх hero-иллюстрации. */
.beach-hero__general-eyes {
    position: absolute;
    z-index: 1;
    top: 25.8%;
    left: 72.05%;
    width: 27px;
    height: 9px;
    transform: rotate(-3deg);
    filter: drop-shadow(0 0 5px rgba(255, 26, 26, .96));
    animation: general-eyes-burn 1.7s ease-in-out infinite alternate;
}

.beach-hero__general-eyes i {
    position: absolute;
    top: 1px;
    display: block;
    width: 10px;
    height: 5px;
    background: #ff2424;
    border-radius: 70% 30% 60% 35%;
    box-shadow: 0 0 3px #fff1e8, 0 0 9px #ff2020, 0 0 17px rgba(255, 0, 0, .72);
}

.beach-hero__general-eyes i:first-child {
    left: 1px;
    transform: skewX(-18deg);
}

.beach-hero__general-eyes i:last-child {
    right: 1px;
    transform: skewX(18deg) scaleX(-1);
}

@keyframes general-eyes-burn {
    from { opacity: .74; filter: drop-shadow(0 0 3px rgba(255, 24, 24, .68)); }
    to { opacity: 1; filter: drop-shadow(0 0 9px rgba(255, 32, 32, 1)); }
}

@media (max-width: 767px) {
    .beach-hero__general-eyes {
        top: 28%;
        left: 86.5%;
        transform: translateX(-50%) scale(.68) rotate(-3deg);
    }
}

/* В узком окне кадр фоновой иллюстрации смещается вправо, поэтому линзы
   привязаны к лицу генерала, а не к прежней desktop-координате. */
@media (max-width: 900px) {
    .beach-hero__general-eyes {
        top: 20.5%;
        left: 90.5%;
        transform: translateX(-50%) scale(.68) rotate(-3deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .beach-hero__general-eyes { animation: none; }
}

.catalog-background-image {
    object-position: 62% center;
}

.hero#catalog {
    background:
        radial-gradient(ellipse at 82% 16%, rgba(123, 255, 0, .18), transparent 26%),
        radial-gradient(ellipse at 12% 72%, rgba(62, 100, 28, .2), transparent 31%),
        linear-gradient(90deg, rgba(8, 9, 8, .32), rgba(8, 9, 8, .12) 55%, rgba(8, 9, 8, .24));
}

@media (max-width: 767px) {
    .beach-hero__background-image {
        object-position: 64% center;
    }
}

/* Карточки товаров пропускают общий фон страницы. */
.product-card {
    background: transparent;
    backdrop-filter: none;
}

.product-image,
.product-body {
    background: transparent;
}

.product-image {
    border-bottom-color: rgba(156, 255, 0, .28);
}

/* Материал под главным баннером. */
.seo-content {
    position: relative;
    overflow: hidden;
}

.seo-content::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(115deg, rgba(156, 255, 0, .06), transparent 34%, rgba(255, 255, 255, .025));
}

.seo-content__body {
    position: relative;
    display: grid;
    gap: 20px;
    padding: clamp(24px, 4vw, 52px);
    border: 1px solid rgba(226, 236, 220, .18);
    background: rgba(9, 12, 8, .72);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.seo-content__body h3 {
    margin: 20px 0 -4px;
    color: var(--text);
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.12;
}

.seo-content__body p,
.seo-content__body li {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.72;
}

.seo-content__body p,
.seo-content__body ul,
.seo-content__body ol,
.seo-content__body h3 {
    margin: 0;
}

.seo-content__body ul,
.seo-content__body ol {
    display: grid;
    gap: 10px;
    padding-left: 24px;
}

.seo-content__body li::marker {
    color: var(--accent);
    font-weight: 800;
}

.seo-content__body strong {
    color: var(--text);
}

.seo-content__spoiler {
    display: grid;
    gap: 20px;
    margin-top: 4px;
}

.seo-content__spoiler summary {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    cursor: pointer;
    color: var(--accent);
    font-weight: 800;
    list-style: none;
}

.seo-content__spoiler summary::-webkit-details-marker {
    display: none;
}

.seo-content__spoiler summary::after {
    margin-left: 10px;
    content: '+';
    font-size: 20px;
    line-height: 1;
}

.seo-content__spoiler[open] summary::after {
    content: '−';
}

.seo-note {
    margin: 4px 0;
    padding: 18px 20px;
    color: #e5ebdf;
    line-height: 1.6;
    border-left: 3px solid var(--accent);
    background: linear-gradient(90deg, rgba(156, 255, 0, .12), rgba(156, 255, 0, .02));
}

/* Статус наличия в карточке товара. */
.product-image .badge {
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 10px;
    border: 1px solid rgba(168, 255, 74, .54);
    border-radius: 999px;
    background: rgba(7, 10, 6, .78);
    color: #eff8e9;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
}

.product-image .badge::before {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(156, 255, 0, .16), 0 0 12px rgba(156, 255, 0, .84);
    animation: availability-indicator 3.2s ease-in-out infinite;
    content: "";
}

@keyframes availability-indicator {
    0%, 100% {
        opacity: .48;
        box-shadow: 0 0 0 3px rgba(156, 255, 0, .09), 0 0 7px rgba(156, 255, 0, .35);
        transform: scale(.88);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 0 5px rgba(156, 255, 0, .2), 0 0 16px rgba(156, 255, 0, .95);
        transform: scale(1.08);
    }
}

/* Единая предметная подача аксессуаров и упаковки. */
.product-image {
    isolation: isolate;
    min-height: 0;
    padding-top: 0;
    aspect-ratio: 640 / 430;
    background:
        radial-gradient(circle at 50% 76%, rgba(156, 255, 0, .18), transparent 32%),
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .055), transparent 48%),
        #050705;
}

.product-image::before {
    display: none;
}

.product-image img,
.product-image picture {
    position: relative;
    z-index: 1;
}

.product-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.product-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .45));
}

.product-image .badge {
    z-index: 2;
}

.product-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.product-card__link:focus-visible,
.product-title-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.product-title-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.product-title-link:hover {
    color: var(--accent);
}

.product-page {
    padding-top: clamp(40px, 7vw, 100px);
    padding-bottom: clamp(64px, 9vw, 130px);
}

.site-breadcrumbs {
    position: relative;
    z-index: 3;
    border-bottom: 1px solid rgba(227, 239, 220, .13);
    background: rgba(5, 7, 5, .94);
}

.site-breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: 13px;
    list-style: none;
}

.site-breadcrumbs a {
    color: var(--accent);
    text-decoration: none;
}

.site-breadcrumbs a:hover {
    color: var(--text);
}

.product-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 26px;
    color: var(--muted);
    font-size: 14px;
}

.product-breadcrumbs a {
    color: var(--accent);
    text-decoration: none;
}

.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    overflow: hidden;
    border: 1px solid rgba(226, 236, 220, .18);
    background: rgba(8, 10, 7, .8);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.product-detail__media {
    display: grid;
    min-height: 460px;
    place-items: center;
    padding: clamp(24px, 5vw, 70px);
    background: radial-gradient(circle at 50% 72%, rgba(156, 255, 0, .18), transparent 34%), #050705;
}

.product-detail__media picture,
.product-detail__media img {
    width: min(100%, 640px);
}

.product-detail__placeholder {
    width: min(64%, 300px);
    aspect-ratio: 1;
    border: 1px solid rgba(156, 255, 0, .38);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .18), transparent 8%), radial-gradient(circle, rgba(156, 255, 0, .18), rgba(5, 7, 5, .2) 62%);
    box-shadow: 0 0 0 26px rgba(156, 255, 0, .035), 0 28px 42px rgba(0, 0, 0, .42);
}

.product-detail__media img {
    display: block;
    aspect-ratio: 640 / 430;
    object-fit: contain;
    filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .52));
}

.product-detail__info {
    align-self: center;
    padding: clamp(28px, 5vw, 64px);
}

.product-detail__info h1 {
    margin: 12px 0 30px;
    color: var(--text);
    font-size: clamp(34px, 4vw, 60px);
    line-height: .98;
}

.product-detail__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    border: 1px solid rgba(226, 236, 220, .15);
    background: rgba(226, 236, 220, .15);
}

.product-detail__specs div {
    padding: 16px;
    background: rgba(8, 10, 7, .96);
}

.product-detail__specs dt {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 13px;
}

.product-detail__specs dd {
    margin: 0;
    color: var(--text);
    font-weight: 800;
}

.product-detail__text {
    margin: 24px 0;
    color: var(--muted);
    line-height: 1.6;
}

.product-detail__buy {
    display: inline-flex;
}

.product-detail__prices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.product-price {
    position: relative;
    overflow: hidden;
    padding: 16px 18px;
    border: 1px solid rgba(231, 245, 221, .18);
    background: rgba(7, 10, 6, .86);
}

.product-price::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 2px;
    background: var(--accent);
    content: '';
}

.product-price span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.product-price strong {
    color: var(--text);
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1;
}

.product-price--replacement strong {
    color: var(--accent);
}

.product-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.product-detail__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 24px;
    border: 1px solid rgba(156, 255, 0, .52);
    color: var(--text);
    font-weight: 800;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.product-detail__secondary:hover {
    background: rgba(156, 255, 0, .14);
    color: var(--accent);
}

/* Акционные комплекты */
.promo-grid--offers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.promo-offer {
    position: relative;
    isolation: isolate;
    min-height: 420px;
    overflow: hidden;
    padding: clamp(26px, 3vw, 44px);
    border: 1px solid rgba(156, 255, 0, .42);
    background:
        radial-gradient(circle at 84% 22%, rgba(156, 255, 0, .2), transparent 22%),
        linear-gradient(140deg, #151b13 0%, #0a0d09 58%, #11190d 100%);
    box-shadow: inset 0 0 45px rgba(156, 255, 0, .04), 0 22px 45px rgba(0, 0, 0, .28);
    animation: promo-frame-glow 2.8s ease-in-out infinite;
}

.promo-offer::before,
.promo-offer::after {
    position: absolute;
    z-index: -1;
    content: '';
    pointer-events: none;
}

.promo-offer::before {
    inset: 0;
    opacity: .45;
    background-image: linear-gradient(rgba(156, 255, 0, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(156, 255, 0, .13) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
}

.promo-offer::after {
    right: -92px;
    bottom: -110px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(156, 255, 0, .34);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(156, 255, 0, .025), 0 0 70px rgba(156, 255, 0, .14);
    animation: promo-orbit 8s linear infinite;
}

.promo-offer--trio {
    background:
        radial-gradient(circle at 76% 18%, rgba(187, 255, 83, .24), transparent 22%),
        linear-gradient(140deg, #17200f 0%, #080b07 60%, #10190c 100%);
}

.promo-offer__copy {
    position: relative;
    z-index: 3;
    max-width: 56%;
}

.promo-offer__copy .eyebrow {
    margin-bottom: 14px;
}

.promo-offer__copy h3 {
    margin: 0;
    color: var(--text);
    font-size: clamp(38px, 4vw, 64px);
    line-height: .92;
    text-shadow: 3px 0 0 rgba(156, 255, 0, .18);
}

.promo-offer__copy p:not(.eyebrow) {
    max-width: 320px;
    margin: 24px 0;
    color: var(--muted);
    line-height: 1.45;
}

.promo-offer__scan {
    position: absolute;
    z-index: 2;
    top: -10%;
    bottom: -10%;
    width: 80px;
    opacity: .64;
    background: linear-gradient(90deg, transparent, rgba(211, 255, 143, .7), transparent);
    transform: skewX(-20deg) translateX(-520px);
    animation: promo-scan 3.6s ease-in-out infinite;
    pointer-events: none;
}

.promo-offer__visual {
    position: absolute;
    z-index: 1;
    top: auto;
    right: 18px;
    bottom: 16px;
    width: min(42%, 250px);
    height: 220px;
    filter: drop-shadow(0 24px 20px rgba(0, 0, 0, .56));
}

.promo-offer__copy .btn {
    position: relative;
    z-index: 4;
    margin-top: 8px;
    white-space: nowrap;
}

.promo-offer__visual img {
    position: absolute;
    bottom: 0;
    width: 44%;
    height: auto;
    object-fit: contain;
    transform-origin: 50% 100%;
    will-change: transform, filter;
}

.promo-offer__visual--two img:nth-of-type(1) {
    left: 10%;
    transform: rotate(-10deg);
    animation: promo-cylinder-left 2.4s ease-in-out infinite;
}

.promo-offer__visual--two img:nth-of-type(2) {
    right: 8%;
    transform: rotate(10deg);
    animation: promo-cylinder-right 2.8s ease-in-out infinite .18s;
}

.promo-offer__visual--three img {
    width: 36%;
}

.promo-offer__visual--three img:nth-of-type(1) {
    left: 0;
    transform: rotate(-13deg) scale(.86);
    animation: promo-cylinder-left 2.6s ease-in-out infinite .1s;
}

.promo-offer__visual--three img:nth-of-type(2) {
    left: 32%;
    z-index: 2;
    transform: translateY(-7px);
    animation: promo-cylinder-center 2.3s ease-in-out infinite;
}

.promo-offer__visual--three img:nth-of-type(3) {
    right: 0;
    transform: rotate(13deg) scale(.86);
    animation: promo-cylinder-right 2.7s ease-in-out infinite .25s;
}

.promo-offer__orb {
    position: absolute;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 18px 5px rgba(156, 255, 0, .72);
}

.promo-offer__orb--one {
    top: 19%;
    left: 13%;
    width: 6px;
    height: 6px;
    animation: promo-spark 1.8s ease-in-out infinite;
}

.promo-offer__orb--two {
    top: 8%;
    right: 12%;
    width: 4px;
    height: 4px;
    animation: promo-spark 1.6s ease-in-out infinite .65s;
}

.promo-offer__price {
    position: absolute;
    z-index: 4;
    right: clamp(20px, 3vw, 42px);
    bottom: clamp(22px, 3vw, 38px);
    min-width: 175px;
    padding: 12px 14px 10px;
    border: 1px solid rgba(156, 255, 0, .52);
    background: rgba(5, 8, 4, .82);
    box-shadow: 0 0 26px rgba(156, 255, 0, .18);
    text-align: right;
    animation: promo-price-pulse 2.2s ease-in-out infinite;
}

.promo-offer__price span {
    display: block;
    margin-bottom: 2px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.promo-offer__price strong {
    color: var(--text);
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(42px, 5vw, 74px);
    font-weight: 900;
    letter-spacing: .015em;
    line-height: .8;
}

.promo-offer__price small {
    color: var(--accent);
    font-family: Inter, Arial, sans-serif;
    font-size: .4em;
    vertical-align: top;
}

.promo-offer:hover .promo-offer__visual img {
    filter: brightness(1.2) drop-shadow(0 0 13px rgba(156, 255, 0, .38));
}

@keyframes promo-frame-glow {
    0%, 100% { border-color: rgba(156, 255, 0, .36); box-shadow: inset 0 0 45px rgba(156, 255, 0, .04), 0 22px 45px rgba(0, 0, 0, .28); }
    50% { border-color: rgba(205, 255, 130, .85); box-shadow: inset 0 0 55px rgba(156, 255, 0, .1), 0 0 30px rgba(156, 255, 0, .13), 0 22px 45px rgba(0, 0, 0, .28); }
}

@keyframes promo-scan {
    0%, 18% { transform: skewX(-20deg) translateX(-520px); opacity: 0; }
    28% { opacity: .64; }
    62% { transform: skewX(-20deg) translateX(760px); opacity: .64; }
    70%, 100% { transform: skewX(-20deg) translateX(760px); opacity: 0; }
}

@keyframes promo-orbit { to { transform: rotate(360deg); } }
@keyframes promo-cylinder-left { 50% { transform: translate(-6px, -15px) rotate(-5deg) scale(1.04); } }
@keyframes promo-cylinder-right { 50% { transform: translate(7px, -20px) rotate(5deg) scale(1.04); } }
@keyframes promo-cylinder-center { 50% { transform: translateY(-24px) scale(1.06); } }
@keyframes promo-spark { 50% { opacity: .2; transform: scale(2.6); } }
@keyframes promo-price-pulse { 50% { transform: translateY(-3px); box-shadow: 0 0 38px rgba(156, 255, 0, .4); } }

@media (max-width: 900px) {
    .promo-grid--offers {
        grid-template-columns: 1fr;
    }

    .promo-offer__copy {
        max-width: 60%;
    }
}

@media (max-width: 560px) {
    .promo-offer {
        min-height: 500px;
    }

    .promo-offer__copy {
        max-width: 100%;
    }

    .promo-offer__copy h3 {
        font-size: clamp(39px, 12vw, 59px);
    }

    .promo-offer__visual {
        top: auto;
        right: 22px;
        bottom: 86px;
        width: 48%;
        opacity: .82;
    }

    .promo-offer__price {
        left: 26px;
        right: auto;
        bottom: 22px;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .promo-offer,
    .promo-offer__scan,
    .promo-offer__visual img,
    .promo-offer__orb,
    .promo-offer__price,
    .product-image .badge::before {
        animation: none !important;
    }
}

.product-related {
    margin-top: clamp(64px, 9vw, 120px);
}

.product-related .section-heading {
    margin-bottom: 28px;
}

@media (max-width: 800px) {
    .product-detail {
        grid-template-columns: 1fr;
    }

    .product-detail__media {
        min-height: 330px;
    }

    .product-detail__prices {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .product-image .badge {
        top: 12px;
        left: 12px;
        padding: 7px 10px 7px 9px;
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    .seo-content__body {
        padding: 22px 18px;
    }

    .seo-content__body p,
    .seo-content__body li {
        font-size: 16px;
    }
}