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

        :root {
            /* Theme tokens (overridden per theme) */
            --t: #C4847A;          /* primary */
            --t-dark: #8B5B55;     /* primary dark */
            --t-light: #E8B4A0;    /* primary light / accent */
            --t-bg: #FDF6F0;       /* page background */
            --t-bg-tint: #FBF0E8;  /* tinted card/section bg */
            --t-border: #F0DDD4;
            --t-border-light: #F8EBE4;
            --t-badge-bg: #FDEAE4;
            --t-shadow: rgba(196,132,122,0.15);

            /* Fixed — WhatsApp green, used only as icon glyph colour inside white hero pills */
            --wa-shadow: rgba(37,211,102,0.25);

            /* Order button — catalog cards, calculator */
            --order-green: #146C3A;
            --order-green-dark: #0F5C30;
            --order-green-shadow: rgba(20,108,58,0.25);

            /* Neutral */
            --text: #1A1A1A;
            --text-s: #5A5A5A;
            --text-m: #717171;
            --white: #FFFFFF;
            --danger: #C62828;
            --danger-bg: #FFEBEE;
            --footer-bg: #1A1A1A;

            /* Structural */
            --radius: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
            --shadow-md: 0 4px 16px var(--t-shadow);
            --font-serif: 'Cormorant Garamond', Georgia, serif;
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        /* шапка липкая, поэтому переход по якорю тормозим на её высоту —
           иначе заголовок секции оказывается под ней */
        html { scroll-behavior: smooth; scroll-padding-top: 76px; }
        body {
            font-family: var(--font-sans); color: var(--text);
            background: var(--t-bg); line-height: 1.6; -webkit-font-smoothing: antialiased;
        }
        .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
        img { max-width: 100%; display: block; }
        a { text-decoration: none; color: inherit; }

        /* ====== HEADER ====== */
        .header {
            position: sticky; top: 0; z-index: 100;
            background: color-mix(in srgb, var(--t-bg) 92%, transparent);
            backdrop-filter: blur(12px); border-bottom: 1px solid var(--t-border-light);
        }
        .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
        .logo-group { display: flex; align-items: baseline; gap: 12px; }
        .logo { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: inherit; text-decoration: none; }
        .logo span { color: var(--t-dark); }
        .logo-sub { font-size: 12px; color: var(--text-m); }
        .nav-toggle { display: none; }
        .nav { display: flex; gap: 28px; align-items: center; }
        .nav a { font-size: 14px; font-weight: 500; color: var(--text-s); transition: color 0.2s; }
        .nav a:hover { color: var(--text); }
        .header-right { display: flex; align-items: center; gap: 16px; }
        .header-cta {
            display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
            padding: 11px 22px; background: var(--text); color: var(--white);
            border-radius: 999px; font-size: 14px; font-weight: 700; transition: all 0.2s;
        }
        .header-cta:hover { background: #000; transform: translateY(-1px); }

        /* ====== HERO ====== */
        /* Кремовая плашка с нижней границей — блок отделяется от «Как работает».
           Коралл остаётся только в акцентах: слово WhatsApp, иконки, круг маскота */
        .hero {
            padding: 56px 0 72px; position: relative; overflow: hidden;
            background: var(--t-bg-tint); border-bottom: 1px solid var(--t-border);
        }
        .hero-grid {
            display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: center;
        }
        .hero h1 {
            font-family: var(--font-serif); font-size: 56px; font-weight: 600;
            line-height: 1.08; letter-spacing: -0.5px; margin-bottom: 20px; color: var(--text);
            text-wrap: pretty;
        }
        .hero h1 em { font-style: normal; color: var(--t-dark); }
        .hero-sub {
            font-size: 18px; color: var(--text-s); line-height: 1.6;
            margin-bottom: 32px; max-width: 480px; text-wrap: pretty;
        }
        .hero-sub strong { color: var(--text); }
        .hero-buttons { display: flex; gap: 12px; align-items: center; margin-bottom: 28px; flex-wrap: wrap; }
        /* WhatsApp — зелёная, как «Заказать» в каталоге */
        .hero-btn {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 16px 26px; background: var(--order-green); color: var(--white);
            border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1.2;
            white-space: nowrap; box-shadow: 0 4px 16px var(--order-green-shadow);
            transition: transform .2s, box-shadow .2s, background .2s;
        }
        .hero-btn:hover { background: var(--order-green-dark); transform: translateY(-1px); box-shadow: 0 2px 8px var(--order-green-shadow); }
        .hero-btn-icon { display: inline-flex; }
        .hero-btn-icon svg { width: 20px; height: 20px; }
        .hero-btn-icon--wa { color: var(--white); }
        .hero-trust { display: flex; gap: 24px; flex-wrap: wrap; }
        .hero-trust-item { font-size: 14px; color: var(--text-s); display: flex; align-items: center; gap: 8px; }
        .hero-trust-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--t-dark); }

        /* Маскот на персиковом круге: полупрозрачный белый ореол WebP
           на светлом фоне иначе не читается */
        .hero-visual {
            position: relative; height: 460px;
            display: flex; align-items: center; justify-content: center;
        }
        /* круг и кольцо — фон: ::after идёт последним потомком и без z-index
           рисовался бы поверх маскота и плашки, перечёркивая их дугой */
        .hero-visual::before {
            content: ''; position: absolute; z-index: 0;
            width: 420px; height: 420px; border-radius: 50%;
            background: #FBDCC6; /* на тон плотнее --t-badge-bg, чтобы круг читался на кремовой плашке */
        }
        .hero-visual::after {
            content: ''; position: absolute; z-index: 0;
            width: 460px; height: 460px; border-radius: 50%;
            border: 1.5px solid var(--t-light); opacity: .45;
        }
        .hero-mascot {
            width: 380px; max-width: 100%; height: auto; display: block;
            position: relative; z-index: 1;
            filter: drop-shadow(0 18px 34px rgba(40,20,12,0.18));
        }
        .hero-badge {
            position: absolute; z-index: 2; left: 8px; bottom: 44px;
            display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px;
            background: var(--white); border-radius: 999px; border: 1px solid var(--t-border);
            box-shadow: 0 10px 24px rgba(40,20,12,0.14);
            font-size: 14px; font-weight: 600; white-space: nowrap;
        }
        .hero-badge-icon {
            width: 30px; height: 30px; border-radius: 50%; background: var(--t-badge-bg);
            display: flex; align-items: center; justify-content: center; color: var(--t-dark);
        }
        .hero-badge-icon svg { width: 16px; height: 16px; }

        /* Order CTA — catalog cards + calculator, dark green */
        .btn-wa {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 18px 36px; background: var(--order-green); color: var(--white);
            border-radius: var(--radius); font-size: 16px; font-weight: 600;
            border: none; cursor: pointer; transition: all 0.2s;
            box-shadow: 0 4px 16px var(--order-green-shadow);
        }
        .btn-wa:hover {
            background: var(--order-green-dark); transform: translateY(-1px);
            box-shadow: 0 2px 8px var(--order-green-shadow);
        }
        .btn-wa--large {
            padding: 14px 32px; font-size: 15px; border-radius: var(--radius);
        }

        /* ====== HOW IT WORKS ====== */
        .how-it-works { padding: 40px 0 80px; }
        .section-label {
            font-size: 13px; font-weight: 600; text-transform: uppercase;
            letter-spacing: 1px; color: var(--t-dark); margin-bottom: 12px;
        }
        .section-title {
            font-family: var(--font-serif); font-size: 38px; font-weight: 600;
            letter-spacing: -0.3px; line-height: 1.15; margin-bottom: 12px;
        }
        .section-title span { color: inherit; }
        .section-desc { font-size: 15px; color: var(--text-s); margin-bottom: 48px; max-width: 520px; }
        .hiw-grid {
            display: grid; grid-template-columns: 1fr 320px;
            grid-template-rows: auto 1fr;
            column-gap: 56px; row-gap: 24px; align-items: stretch;
        }
        .hiw-title { grid-column: 1; grid-row: 1; margin-bottom: 0; }
        .steps-timeline { grid-column: 1; grid-row: 2; }
        .hiw-grid .video-preview { grid-column: 2; grid-row: 1 / 3; height: 100%; }
        .steps-timeline { position: relative; }
        .step-tl { display: flex; gap: 20px; position: relative; padding-bottom: 32px; }
        .step-tl:last-child { padding-bottom: 0; }
        .step-tl::before {
            content: ''; position: absolute; left: 17px; top: 40px; bottom: 0;
            width: 2px; background: var(--t-border);
        }
        .step-tl:last-child::before { display: none; }
        .step-tl-num {
            width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
            border: 2px solid var(--t); background: var(--white);
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; font-weight: 700; color: var(--t); z-index: 1;
        }
        .step-tl-content h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
        .step-tl-content p { font-size: 14px; color: var(--text-s); line-height: 1.6; }
        /* Дополнение внутри шага таймлайна: обычный абзац, акцент только на ключевой фразе */
        .step-tl-content .step-tl-note { margin-top: 12px; }
        .step-tl-content .step-tl-note strong { color: var(--t-dark); font-weight: 600; }
        /* Video preview poster (trigger for modal) — shadow + subtle coral border */
        .video-preview {
            position: relative; display: block; width: 320px; max-width: 100%;
            margin: 0 auto; height: 100%; min-height: 420px;
            padding: 0; cursor: pointer; background: var(--t-bg-tint);
            border: 0; border-radius: var(--radius-xl); overflow: hidden;
            box-shadow:
                0 1px 3px rgba(0,0,0,0.04),
                0 14px 32px rgba(40,20,12,0.10),
                0 0 0 1px rgba(232,112,74,0.18);
            transition: transform .25s, box-shadow .25s;
        }
        .video-preview:hover {
            transform: translateY(-3px);
            box-shadow:
                0 2px 6px rgba(0,0,0,0.06),
                0 22px 44px rgba(40,20,12,0.16),
                0 0 0 1px rgba(232,112,74,0.28);
        }
        .video-poster-img {
            position: absolute; inset: 0; width: 100%; height: 100%;
            object-fit: cover; object-position: center; display: block;
            transition: transform .5s cubic-bezier(.22,1,.36,1);
        }
        .video-preview:hover .video-poster-img { transform: scale(1.04); }
        .video-preview::after {
            content: ''; position: absolute; inset: 0; pointer-events: none;
            background: radial-gradient(circle at 50% 50%, transparent 38%, rgba(40,20,12,.10) 100%);
            opacity: 0; transition: opacity .4s;
        }
        .video-preview:hover::after { opacity: 1; }
        .video-watch-pill {
            position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2;
            display: flex; align-items: center; justify-content: center; gap: 12px;
            padding: 10px 18px 10px 10px; border-radius: 999px;
            background: rgba(26,16,12,0.82); color: #fff;
            font-size: 15px; font-weight: 700; line-height: 1.2;
            transition: transform .3s cubic-bezier(.34,1.56,.64,1);
        }
        .video-preview:hover .video-watch-pill { transform: scale(1.03); }
        .video-watch-icon {
            width: 40px; height: 40px; min-width: 40px; border-radius: 50%;
            background: #fff; display: flex; align-items: center; justify-content: center;
        }
        .video-watch-icon svg { width: 20px; height: 20px; color: var(--t); margin-left: 3px; }

        /* Video modal */
        .video-modal {
            position: fixed; inset: 0; z-index: 1000;
            background: rgba(15,10,8,.92); backdrop-filter: blur(6px);
            display: none; align-items: center; justify-content: center; padding: 24px;
        }
        .video-modal.open { display: flex; animation: modalFade .25s ease; }
        @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
        .video-modal-frame {
            position: relative; width: auto; height: 90vh; aspect-ratio: 9 / 16;
            max-width: 100%; border-radius: var(--radius-lg); overflow: hidden;
            background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.5);
        }
        .video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
        .video-modal-close {
            position: absolute; top: 20px; right: 24px; z-index: 1001;
            width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
            background: rgba(255,255,255,.14); color: #fff;
            display: flex; align-items: center; justify-content: center; transition: background .2s;
        }
        .video-modal-close:hover { background: rgba(255,255,255,.28); }
        .video-modal-close svg { width: 22px; height: 22px; }

        /* ====== PROTECTION ====== */
        .protection { padding: 0 0 80px; }
        .protection-header { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 20px; align-items: center; margin-bottom: 24px; }
        .protection-header-text { }
        .protection-header-text .section-label { margin-bottom: 8px; }
        .protection-header-text .section-title { margin-bottom: 8px; }
        .protection-header-text .section-desc { margin-bottom: 0; }
        .protection-maskot { margin-top: -20px; }
        .protection-maskot img { width: 100%; height: auto; display: block; }
        .protection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .protection-card {
            background: var(--white); border: 1px solid var(--t-border);
            border-radius: var(--radius-lg); padding: 28px; display: flex; gap: 16px;
            transition: all 0.25s;
        }
        .protection-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
        .protection-num {
            width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
            background: var(--t-badge-bg); color: var(--t-dark);
            display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
        }
        .protection-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
        .protection-card p { font-size: 14px; color: var(--text-s); line-height: 1.5; }

        /* ====== NO-REFUND ====== */
        .no-refund { padding: 0 0 80px; }
        .no-refund-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 24px; }
        .no-refund-title { font-family: var(--font-serif); font-size: 30px; font-weight: 600; margin-bottom: 12px; }
        .no-refund-desc { font-size: 14px; color: var(--text-s); line-height: 1.6; }
        .no-refund-cases { display: flex; flex-direction: column; gap: 16px; }
        .no-refund-case {
            display: flex; gap: 12px; align-items: flex-start;
            padding: 16px; background: var(--danger-bg); border-radius: var(--radius);
            border-left: 3px solid var(--danger);
        }
        .no-refund-case-icon { min-width: 24px; display: flex; align-items: center; justify-content: center; }
        .no-refund-case-icon svg { width: 20px; height: 20px; color: var(--danger); stroke-width: 1.5; }
        .no-refund-case h3 { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
        .no-refund-case p { font-size: 14px; color: var(--text-s); line-height: 1.4; }
        .no-refund-tip {
            background: var(--t-dark); color: var(--white);
            padding: 18px 28px; border-radius: var(--radius);
            font-size: 15px; line-height: 1.5; display: flex; align-items: center; gap: 12px;
        }
        .no-refund-tip-icon { min-width: 24px; display: flex; align-items: center; }
        .no-refund-tip-icon svg { width: 20px; height: 20px; color: var(--white); stroke-width: 1.5; }

        /* ====== MODEL ====== */
        .model { padding: 0 0 80px; }
        .model-lead { font-size: 15px; color: var(--text-s); line-height: 1.7; max-width: 640px; margin-bottom: 40px; }
        .model-chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .model-step {
            position: relative; background: var(--white); border: 1px solid var(--t-border);
            border-radius: var(--radius-lg); padding: 26px 24px; transition: all 0.25s;
        }
        .model-step:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
        /* стрелка-связка: звенья вытекают одно из другого */
        .model-step:not(:last-child)::after {
            content: ''; position: absolute; top: 50%; right: -24px;
            width: 24px; height: 18px; transform: translateY(-50%);
            background-color: var(--t);
            -webkit-mask: no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
            mask: no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
        }
        .model-step-ic {
            width: 42px; height: 42px; border-radius: 12px; background: var(--t-badge-bg);
            display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
        }
        .model-step-ic svg { width: 21px; height: 21px; color: var(--t-dark); stroke-width: 1.6; }
        .model-step h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
        .model-step p { font-size: 14px; color: var(--text-s); line-height: 1.6; }
        .model-note { margin-top: 28px; font-size: 15px; color: var(--text-s); line-height: 1.6; }
        .model-note strong { color: var(--t-dark); font-weight: 600; }

        /* ====== FLOWERS ====== */
        .flowers {
            padding: 64px 0 80px; background: var(--t-bg-tint);
            border-top: 1px solid var(--t-border);
        }
        /* Шапка витрины: заголовок слева, карточка «О ценах» справа */
        .flowers-head {
            display: grid; grid-template-columns: 1fr 380px;
            gap: 20px 56px; align-items: center; margin-bottom: 44px;
        }
        .flowers-head .section-label { margin-bottom: 12px; }
        .flowers-head .section-title { margin-bottom: 0; max-width: 620px; }
        .flowers-head .section-desc { margin: 14px 0 0; max-width: 560px; }
        .price-card {
            background: var(--white); border: 1px solid var(--t-border);
            border-radius: var(--radius-lg); padding: 22px 24px;
            display: flex; flex-direction: column; gap: 12px;
        }
        .price-card-label {
            display: flex; align-items: center; gap: 9px;
            font-size: 12px; font-weight: 700; letter-spacing: 1px;
            text-transform: uppercase; color: var(--t-dark);
        }
        .price-card-label svg { width: 20px; height: 20px; color: var(--t); }
        .price-card-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); font-weight: 600; }
        .price-card-note {
            display: block; margin-top: 10px;
            color: var(--text-s); font-size: 15px; font-weight: 400;
        }
        .flower-group { margin-bottom: 40px; }
        .flower-group:last-child { margin-bottom: 0; }
        .flower-group h3 { font-size: 20px; font-weight: 600; margin-bottom: 16px; }
        /* «Нет в наличии» и лишние фасовки ставит js/app.js по каталогу CRM */
        .flower-out {
            display: inline-block; margin: -6px 0 14px; padding: 4px 12px; border-radius: 999px;
            background: var(--white); border: 1px solid var(--t-border);
            color: var(--t-dark); font-size: 13px; font-weight: 600;
        }
        .flower-group.is-out .flower-wa, .flower-group.is-out .calc-wa,
        .flower-card.is-off, .seg-btn.is-off { display: none; }
                /* Лента фасовок: прокручивается вбок, поэтому число карточек не ограничено */
        /* переключатель фасовок собирается скриптом и нужен только на мобильных */
        .flower-seg { display: none; }
        .flower-rail { position: relative; }
        .flower-row {
            display: flex; gap: 20px; overflow-x: auto;
            scroll-snap-type: x mandatory; scroll-behavior: smooth;
            padding-bottom: 6px; scrollbar-width: thin; cursor: grab;
        }
        .flower-row.is-dragging,
        .photo-modal-slides.is-dragging {
            cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none;
        }
        .flower-card { flex: 0 0 240px; scroll-snap-align: start; }
        /* конец ленты не совпадает с сеткой карточек, поэтому последней
           даём собственную точку прилипания — иначе прокрутка откатывается назад */
        .flower-card:last-child { scroll-snap-align: end; }
        .rail-btn {
            position: absolute; top: 150px; transform: translateY(-50%); z-index: 2;
            width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
            border: 1px solid var(--t-border); background: var(--white);
            box-shadow: var(--shadow-sm); transition: opacity 0.2s, box-shadow 0.2s;
            display: flex; align-items: center; justify-content: center;
        }
        .rail-btn:hover { box-shadow: var(--shadow-md); }
        .rail-btn[disabled] { opacity: 0; pointer-events: none; }
        .rail-btn svg { width: 18px; height: 18px; color: var(--t-dark); }
        .rail-prev { left: -18px; }
        .rail-next { right: -18px; }
        .flower-card {
            background: var(--white); border: 1px solid var(--t-border);
            border-radius: var(--radius-lg); overflow: hidden; transition: all 0.25s;
        }
        .flower-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
        /* фасовка или калькулятор, выбранные ссылкой ?qty=; на мобайле выбор видно по кнопке */
        @media (min-width: 769px) {
            .flower-card.is-picked, .calc.is-picked { border-color: var(--t); box-shadow: inset 0 0 0 1px var(--t), var(--shadow-md); }
        }
        .flower-photo {
            /* 4:5 — фото 2:3 подрезается на 17% по высоте, букет занимает больше кадра;
               коллажи 4:5 при этом входят целиком, без обрезки */
            aspect-ratio: 4 / 5; background: var(--t-bg-tint); position: relative;
            display: flex; align-items: center; justify-content: center; overflow: hidden;
        }
        .flower-photo.is-zoomable { cursor: zoom-in; }
        /* лента слайдов: горизонтальный свайп листает фото товара */
        .flower-slides {
            display: flex; width: 100%; height: 100%;
            overflow-x: auto; scroll-snap-type: x mandatory;
            overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .flower-slides::-webkit-scrollbar { display: none; }
        .flower-slides img {
            flex: 0 0 100%; width: 100%; height: 100%;
            object-fit: cover; object-position: center 38%; scroll-snap-align: center;
        }
        .flower-dots {
            position: absolute; left: 0; right: 0; bottom: 10px;
            display: flex; justify-content: center; gap: 6px; pointer-events: none;
        }
        .flower-dots i {
            width: 6px; height: 6px; border-radius: 50%;
            background: rgba(255,255,255,0.55); box-shadow: 0 0 3px rgba(0,0,0,0.25);
            transition: width 0.2s, background 0.2s;
        }
        .flower-dots i.on { width: 16px; border-radius: 3px; background: #fff; }

        /* Просмотр фото на весь экран */
        .photo-modal {
            position: fixed; inset: 0; z-index: 1000;
            background: rgba(15,10,8,0.94); backdrop-filter: blur(6px);
            display: none; align-items: center; justify-content: center;
            padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
        }
        .photo-modal.open { display: flex; animation: modalFade 0.25s ease; }
        .photo-modal-fig {
            margin: 0; display: flex; flex-direction: column; align-items: center;
            gap: 10px; max-width: 100%; max-height: 100%;
        }
        .photo-modal-slides {
            display: flex; width: min(100%, 560px);
            overflow-x: auto; scroll-snap-type: x mandatory;
            overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab;
        }
        .photo-modal-slides::-webkit-scrollbar { display: none; }
        .photo-modal-slides img {
            flex: 0 0 100%; width: 100%; height: auto; max-height: 76vh;
            object-fit: contain; scroll-snap-align: center; border-radius: var(--radius);
        }
        /* в галерее лежит весь сорт — до двух десятков кадров, столько точек
           читались бы как «тут очень много фото», поэтому просто счётчик */
        .photo-modal-count {
            color: rgba(255,255,255,0.65); font-size: 13px;
            font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
        }
        .photo-modal-nav {
            position: absolute; top: 50%; transform: translateY(-50%); z-index: 1001;
            width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
            background: rgba(255,255,255,0.16); color: #fff;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.2s, opacity 0.2s;
        }
        .photo-modal-nav:hover { background: rgba(255,255,255,0.3); }
        .photo-modal-nav[disabled] { opacity: 0; pointer-events: none; }
        .photo-modal-nav svg { width: 24px; height: 24px; }
        .photo-modal-prev { left: 10px; }
        .photo-modal-next { right: 10px; }
        .photo-modal-caption {
            flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px;
            color: rgba(255,255,255,0.55); font-size: 13px; line-height: 1.2; white-space: nowrap;
        }
        .photo-modal-caption b { color: #fff; font-weight: 700; font-size: 16px; }
        .photo-modal-close {
            position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 1001;
            width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
            background: rgba(255,255,255,0.16); color: #fff;
            display: flex; align-items: center; justify-content: center; transition: background 0.2s;
        }
        .photo-modal-close:hover { background: rgba(255,255,255,0.3); }
        .photo-modal-close svg { width: 22px; height: 22px; }
        .flower-photo img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
        .flower-photo svg { width: 38px; height: 38px; color: var(--t-light); opacity: 0.9; }
        .flower-info {
            padding: 14px 16px 16px; display: flex; align-items: center;
            justify-content: space-between; gap: 10px;
        }
        .flower-meta { min-width: 0; }
        /* компактная кнопка: правило идёт после базового .btn-wa и выигрывает специфичностью */
        .btn-wa.flower-wa {
            flex: 0 0 auto; padding: 10px 13px; font-size: 13px;
            gap: 6px; border-radius: 10px; box-shadow: none;
        }
        .btn-wa.flower-wa:hover { box-shadow: 0 2px 8px var(--wa-shadow); }
        .btn-wa.flower-wa svg { width: 17px; height: 17px; }
        .flower-qty { font-size: 13px; color: var(--text-m); margin-bottom: 2px; }
        .flower-price { font-size: 18px; font-weight: 700; color: var(--text); }

        /* Калькулятор букета */
        /* подпись, количество, итог и кнопка — одной строкой */
        .calc {
            margin-top: 28px; background: var(--white); border: 1px solid var(--t-border);
            border-radius: var(--radius-lg); padding: 14px 20px;
            display: flex; align-items: center; gap: 18px;
        }
        .calc-cap { font-size: 14px; color: var(--text-s); white-space: nowrap; }
        .calc-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; flex: 1; }
        .calc-stepper { display: flex; align-items: center; gap: 10px; }
        /* знаки нарисованы SVG, а не набраны текстом: глиф «+» центрируется
           по базовой линии шрифта и в круге сидел бы пары пикселей ниже центра */
        .calc-btn {
            width: 44px; height: 44px; min-width: 44px; border-radius: 50%;
            border: 1.5px solid var(--t-border); background: var(--white);
            color: var(--t-dark); cursor: pointer; transition: all 0.2s;
            display: flex; align-items: center; justify-content: center;
        }
        .calc-btn svg { width: 18px; height: 18px; display: block; }
        .calc-btn:hover:not(:disabled) { border-color: var(--t); color: var(--t); }
        .calc-btn:disabled { opacity: 0.35; cursor: not-allowed; }
        .calc-input {
            width: 88px; height: 44px; text-align: center; font-family: inherit;
            font-size: 18px; font-weight: 700; color: var(--text);
            border: 1.5px solid var(--t-border); border-radius: var(--radius); background: var(--white);
            -moz-appearance: textfield;
        }
        .calc-input::-webkit-outer-spin-button,
        .calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .calc-input:focus { outline: 2px solid var(--t); outline-offset: 1px; }
        .calc-unit { font-size: 14px; color: var(--text-m); }
        .calc-total { margin-left: auto; display: flex; align-items: baseline; gap: 10px; }
        .calc-total-label { font-size: 13px; color: var(--text-m); margin-bottom: 0; }
        .calc-total-value {
            font-family: var(--font-sans); font-size: 24px; font-weight: 700;
            font-variant-numeric: tabular-nums;
            color: var(--text); line-height: 1.1; white-space: nowrap;
        }

        /* ====== FOOTER ====== */
        .footer { background: var(--footer-bg); color: rgba(255,255,255,0.7); padding: 48px 0 32px; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
        .footer-logo { font-size: 22px; font-weight: 700; color: white; margin-bottom: 12px; }
        .footer-logo span { color: var(--t-light); }
        .footer-desc { font-size: 14px; line-height: 1.6; max-width: 300px; }
        .footer h3 { color: white; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
        .footer-links { list-style: none; display: flex; flex-direction: column; gap: 4px; }
        .footer .accent { color: var(--t-light); font-weight: 600; }
        .footer-links a { display: inline-block; padding: 5px 0; font-size: 14px;
            color: rgba(255,255,255,0.6); transition: color 0.2s; }
        .footer-links a:hover { color: white; }
        .footer-seo {
            font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.5;
            margin-bottom: 20px; max-width: 600px;
        }
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px;
            display: flex; align-items: center; justify-content: space-between; font-size: 13px;
        }

        /* ====== ТЕМА ====== */

        /* Коралловый Закат */
        :root { --t:#E8704A; --t-dark:#B84A28; --t-light:#F4A868; --t-bg:#FFF8F4; --t-bg-tint:#FFF0E8; --t-border:#F0DCD0; --t-border-light:#F8EDE4; --t-badge-bg:#FDE8D8; --t-shadow:rgba(232,112,74,0.12); }

        /* ====== RESPONSIVE ====== */
        @media (max-width: 1024px) {
            .hero-grid { grid-template-columns: 1fr; gap: 24px; }
            .hero h1 { font-size: 44px; }
            .hero-visual { height: 380px; }
            .hero-visual::before { width: 340px; height: 340px; }
            .hero-visual::after { width: 380px; height: 380px; }
            .hero-mascot { width: 300px; }
            .hiw-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 40px; }
            .hiw-title, .steps-timeline, .hiw-grid .video-preview { grid-column: auto; grid-row: auto; }
            .video-preview { min-height: 0; aspect-ratio: 9 / 16; }
        }
        @media (max-width: 768px) {
            /* в строку с логотипом и языками навигация не помещается,
               поэтому на телефоне она уезжает под кнопку-бургер */
            .nav-toggle {
                /* в разметке кнопка стоит до языков, а на экране должна быть у края */
                order: 4; display: flex; align-items: center; justify-content: center;
                width: 44px; height: 44px; margin-right: -12px;
                border: 0; background: none; cursor: pointer; color: var(--text);
            }
            .nav-toggle-bars { position: relative; display: block; width: 20px; height: 14px; }
            .nav-toggle-bars i {
                position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
                background: currentColor; transition: transform 0.2s, opacity 0.2s;
            }
            .nav-toggle-bars i:nth-child(1) { top: 0; }
            .nav-toggle-bars i:nth-child(2) { top: 6px; }
            .nav-toggle-bars i:nth-child(3) { top: 12px; }
            .is-nav-open .nav-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
            .is-nav-open .nav-toggle-bars i:nth-child(2) { opacity: 0; }
            .is-nav-open .nav-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

            .nav {
                position: absolute; left: 0; right: 0; top: 100%;
                flex-direction: column; align-items: stretch; gap: 0;
                background: var(--t-bg); border-bottom: 1px solid var(--t-border);
                box-shadow: var(--shadow-md); padding: 2px 0 6px;
                /* прячем видимостью, а не display — иначе раскрытие не анимируется */
                visibility: hidden; opacity: 0; transform: translateY(-6px);
                transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
            }
            .is-nav-open .nav { visibility: visible; opacity: 1; transform: none; }
            .nav a { padding: 14px 24px; font-size: 15px; color: var(--text); }
            .nav a + a { border-top: 1px solid var(--t-border-light); }
            .nav a:active { background: var(--t-bg-tint); }
            /* языки и CTA лежат в .header-right, поэтому к краю прижимаем обёртку */
            .header-right { margin-left: auto; margin-right: 8px; }
            .lang-btn { padding: 4px 10px; }
            .header-cta { display: none; }
            .logo-sub { display: none; }

            .hero { padding: 8px 0 36px; }
            .hero-grid { gap: 8px; }
            /* круг с маскотом идёт первым, во всю ширину экрана */
            .hero-visual { order: -1; height: 280px; margin: 0 -24px; }
            .hero-visual::before { width: 260px; height: 260px; }
            .hero-visual::after { width: 296px; height: 296px; }
            .hero-mascot { width: 240px; filter: drop-shadow(0 14px 28px rgba(40,20,12,0.18)); }
            .hero-badge { left: 24px; bottom: 18px; padding: 8px 12px 8px 8px; font-size: 13px; }
            .hero-badge-icon { width: 26px; height: 26px; }
            .hero-badge-icon svg { width: 14px; height: 14px; }

            .hero h1 { font-size: 38px; margin-bottom: 14px; }
            .hero-sub { font-size: 16px; line-height: 1.55; margin-bottom: 22px; }
            .hero-buttons { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 0; }
            .hero-buttons .hero-btn { width: 100%; justify-content: center; }
            /* скорость ответа переехала в бейдж на круге, гарантия остаётся на десктопе */
            .hero-trust { display: none; }
            .section-title { font-size: 28px; }
            .protection-header { grid-template-columns: 1fr; text-align: center; }
            .protection-maskot { width: 280px; margin: 0 auto; display: flex; justify-content: center; }
            .protection-grid { grid-template-columns: 1fr; }
            .no-refund-grid { grid-template-columns: 1fr; gap: 24px; }
            .calc { padding: 18px; flex-direction: column; align-items: stretch; gap: 12px; }
            .calc-cap { white-space: normal; }
            .calc-row { gap: 14px; }
            .calc-total { margin-left: 0; width: 100%; }
            .calc-total-value { font-size: 24px; }
            .calc .btn-wa { width: 100%; justify-content: center; padding: 14px 24px; }
            .model-chain { grid-template-columns: 1fr; gap: 32px; }
            .model-step:not(:last-child)::after {
                top: auto; bottom: -26px; right: 50%; transform: translateX(50%) rotate(90deg);
            }
            .flowers { padding: 40px 0 64px; }
            .flowers-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; align-items: start; }
            /* Один сорт — одна карточка: карточкой становится сама группа, а фото,
               цена и кнопка активной фасовки встраиваются в неё через display: contents.
               Порядок внутри карточки: фото → название → переключатель → калькулятор
               → цена и кнопка. Вся раскладка висит на классе .is-segmented, который
               ставит скрипт: если app.js не загрузится, группа останется обычной
               лентой, а не рассыплется на отдельные фото и подписи. */
            .flower-group.is-segmented {
                display: flex; flex-direction: column; gap: 12px; padding: 0 14px 16px;
                background: var(--white); border: 1px solid var(--t-border);
                border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px;
            }
            .flower-group.is-segmented h3 { order: 2; font-size: 17px; line-height: 1.3; margin: 0; }
            .flower-group.is-segmented .flower-out {
                order: 2; align-self: flex-start; margin: -4px 0 0; border: 0; background: var(--t-bg-tint);
            }
            .flower-group.is-segmented .flower-rail,
            .flower-group.is-segmented .flower-row { display: contents; }
            .flower-group.is-segmented .flower-card { display: none; }
            .flower-group.is-segmented .flower-card.is-active { display: contents; }
            .flower-card:hover { transform: none; box-shadow: none; }
            .rail-btn { display: none; }

            /* переключатель фасовок: 1 · 15 · 25 · 35 · 51 · Своё */
            .flower-seg {
                order: 3; display: flex; gap: 4px; padding: 4px; margin: 0;
                background: var(--t-bg-tint); border-radius: var(--radius);
            }
            .seg-btn {
                flex: 1; height: 40px; min-width: 0; border: 0; border-radius: 9px;
                background: transparent; color: var(--text-s);
                font: 700 14px/1 var(--font-sans); cursor: pointer; transition: background 0.2s, color 0.2s;
            }
            .seg-btn.is-on { background: var(--t-dark); color: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

            /* фото во всю ширину карточки; карточка одна — вложенный горизонтальный
               скролл больше не конфликтует, свайп по фото снова включён */
            .flower-group.is-segmented .flower-photo { order: 1; margin: 0 -14px; }
            .flower-photo { aspect-ratio: 1 / 1; }
            .flower-slides { overflow-x: auto; }
            /* почти все фото 2:3 и кадрируются по букету, но пара кадров —
               коллажи 4:5: в квадрате у них срезался нижний ряд с подписями,
               поэтому такие показываем целиком, на фоне карточки */
            .flower-slides img.is-wide { object-fit: contain; background: var(--t-bg-tint); }
            .flower-group.is-segmented .flower-info { order: 5; padding: 0; }
            .flower-price { font-size: 22px; }
            .btn-wa.flower-wa {
                height: 48px; padding: 0 18px; font-size: 15px; border-radius: var(--radius);
                gap: 8px; box-shadow: 0 4px 16px var(--order-green-shadow);
            }
            .btn-wa.flower-wa svg { width: 20px; height: 20px; }

            /* калькулятор появляется по кнопке «Своё» внутри той же карточки
               и заменяет собой строку цены и кнопки фасовки */
            .flower-group.is-segmented .calc {
                order: 4; display: none; margin: 0; padding: 0;
                border: 0; border-radius: 0; background: transparent;
            }
            .flower-group.is-segmented.is-custom .calc { display: flex; }
            .flower-group.is-segmented.is-custom .flower-info { display: none; }
            .flower-group h3 { font-size: 18px; }
            .footer-grid { grid-template-columns: 1fr; gap: 32px; }
            .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
        }

        /* ====== LANGUAGE SWITCHER ====== */
        .lang-switcher { display: flex; padding: 3px; border-radius: 999px; background: var(--t-bg-tint); }
        .lang-btn {
            position: relative; padding: 5px 12px; border-radius: 999px; border: 0;
            background: transparent; color: var(--text-s); font-size: 12px; font-weight: 600;
            cursor: pointer; transition: all 0.2s; text-transform: uppercase;
        }
        /* невидимая зона нажатия до 44px — сама кнопка ниже */
        .lang-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%;
            height: 44px; transform: translateY(-50%); }
        .lang-btn.active { background: var(--white); color: var(--t-dark); font-weight: 700; box-shadow: var(--shadow-sm); }
        .lang-btn:hover:not(.active) { color: var(--text); }