/*
 * Шапка, мобильное меню и окна связи — копия лендинга foodonaut.ru
 * (garage-app: landing/index.html, landing/js/main.js), 2026-11-03.
 * При изменении шапки на лендинге обновить и этот файл.
 */
/* ---------------- Site header (sticky, glass) ---------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    /* At top of page, header sits transparently over the dark hero.
       Scrolled state below paints the glass background. */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Light-on-dark — applies while .site-header is at the top of the page
   (over the dark hero). The is-scrolled state below resets to the
   light glass treatment. */
.site-header:not(.is-scrolled):not(.is-drawer-open) .site-header__nav a { color: rgba(255,255,255,0.72); }
.site-header:not(.is-scrolled):not(.is-drawer-open) .site-header__nav a:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-inverse);
}
.site-header:not(.is-scrolled):not(.is-drawer-open) .site-header__logo-img { filter: brightness(0) invert(1); }
.site-header:not(.is-scrolled):not(.is-drawer-open) .site-header__logo-text { color: var(--text-inverse); }
.site-header:not(.is-scrolled):not(.is-drawer-open) .site-header__logo-mark { color: var(--text-inverse); --mark-color: var(--text-inverse); }
.site-header:not(.is-scrolled):not(.is-drawer-open) .site-header__burger {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
}
.site-header:not(.is-scrolled):not(.is-drawer-open) .site-header__burger span { background: #fff; }
/* Open mobile drawer is a light (--bg-secondary) panel; paint the header
   in the same light/glass treatment so it doesn't stay dark over the hero
   while the white drawer is open. Matches the is-scrolled background. */
.site-header.is-scrolled,
.site-header.is-drawer-open {
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    border-bottom-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}
.site-header__bar {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}
.site-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    flex-shrink: 0;
    transition: opacity .15s ease;
}
.site-header__logo:hover { opacity: 0.85; }
.site-header__logo-img {
    height: 28px;
    width: auto;
    display: block;
}
@media (max-width: 640px) {
  .site-header__logo-img { height: 24px; }
}
.site-header__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.site-header__nav a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: background .15s, color .15s;
}
.site-header__nav a:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.site-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-md);
    background: var(--brand-gradient);
    color: var(--text-inverse);
    font-size: var(--font-size-base);
    font-weight: 600;
    flex-shrink: 0;
    /* Liquid-glass with brand-tinted soft drop, matching stack-icon hover. */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.32),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 8px 22px -8px rgba(24,81,172,0.55);
    transition: filter .15s, box-shadow .25s, transform .1s;
}
.site-header__cta:hover {
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 14px 30px -8px rgba(24,81,172,0.65);
}
.site-header__cta:active { transform: translateY(1px); }
/* Быстрый контакт: на десктопе показан только --demo («Получить демо»),
   --contact («Связаться») скрыта. На ≤767px они меняются местами
   (см. мобильный @media). */
.site-header__cta--contact {
    display: none;
    /* Этот вариант — <button>, а не <a>: обнуляем нативный border/appearance/
       шрифт, иначе UA-рамка ломает liquid-glass край inset-тенями. */
    border: 0;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
/* Quick-contact Telegram icon — compact round button sitting next to the CTA.
   Inherits the header's light-on-dark treatment via .site-header:not(.is-scrolled):not(.is-drawer-open). */
.site-header__tg, .site-header__max {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.site-header__tg svg, .site-header__max svg { width: 20px; height: 20px; }
/* Telegram glyph (viewBox 0 0 240 240) sits optically low-right inside its
   bounds; nudge it up-left so it reads centred in the round button. */
.site-header__tg svg { transform: translate(-1px, -1px); }
/* MAX button carries a "MAX" label, so it widens into a pill instead of a
   fixed 40px circle — twin of __tg otherwise. */
.site-header__max {
    width: auto;
    gap: 7px;
    padding: 0 13px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.site-header__tg:hover, .site-header__max:hover {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    background: var(--bg-tertiary);
}
.site-header__tg:active, .site-header__max:active { transform: translateY(1px); }
.site-header:not(.is-scrolled):not(.is-drawer-open) .site-header__tg,
.site-header:not(.is-scrolled):not(.is-drawer-open) .site-header__max {
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.08);
}
.site-header:not(.is-scrolled):not(.is-drawer-open) .site-header__tg:hover,
.site-header:not(.is-scrolled):not(.is-drawer-open) .site-header__max:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.16);
}
.site-header__burger {
    display: none;
    width: 40px; height: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s;
}
.site-header__burger:hover { border-color: var(--brand-primary); }
.site-header__burger span {
    width: 18px; height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
.site-header.is-drawer-open .site-header__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-drawer-open .site-header__burger span:nth-child(2) { opacity: 0; }
.site-header.is-drawer-open .site-header__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Mobile drawer */
.mobile-drawer {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--bg-secondary);
    z-index: 99;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
    border-bottom: 1px solid var(--border-color);
}
.mobile-drawer.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.mobile-drawer a {
    height: 52px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 500;
}
/* Лид-магнит в шторке — точка 4. Свои размеры для ссылок-каналов,
   иначе они наследуют height:52px/font-size-lg от .mobile-drawer a. */
.drawer-magnet {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding: 14px;
    background: var(--brand-primary-light);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, transparent);
    border-radius: var(--radius-md);
}
.drawer-magnet__thumb {
    flex: none;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--brand-primary);
}
.drawer-magnet__thumb svg { width: 22px; height: 22px; }
.drawer-magnet__body { flex: 1; min-width: 0; }
.drawer-magnet__title { font-weight: 700; color: var(--text-primary); font-size: var(--font-size-sm); line-height: 1.35; }
.drawer-magnet__sub { color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.4; margin-top: 2px; }
.drawer-magnet__channels { display: flex; gap: 8px; margin-top: 10px; }
.mobile-drawer .drawer-magnet__ch {
    height: 36px;
    padding: 0 12px;
    gap: 6px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--brand-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.drawer-magnet__ch svg { width: 14px; height: 14px; flex: none; }
.mobile-drawer a:hover { background: var(--bg-tertiary); }
.mobile-drawer .site-header__cta {
    height: 52px;
    justify-content: center;
    margin-top: 8px;
    color: var(--text-inverse);
    background: var(--brand-gradient);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.32),
        0 10px 26px -10px rgba(69,140,255,0.55);
}
.mobile-drawer .site-header__cta:hover {
    background: var(--brand-gradient);
    color: var(--text-inverse);
    filter: brightness(1.06);
}
/* No underline on any anchor in the landing — global, incl. :hover. Scoped
   resets missed links outside .lp (modals: demo-modal, contact-QR), where the
   UA default underlined them on hover. Apply site-wide so no anchor underlines. */
a, a:hover { text-decoration: none; }
.lp a, .site-header a, .mobile-drawer a, footer a { text-decoration: none; }
.lp a:hover, .site-header a:hover, .mobile-drawer a:hover, footer a:hover { text-decoration: none; }
/* Header collapses to the burger as soon as the desktop row (nav + TG + MAX
   pill + CTA) stops fitting — that happens well before 768px, so switch at
   the tablet breakpoint, not at 767. Kept separate from the 767 block below
   so the rest of the mobile layout (fonts, hero, cards) is unaffected. */
@media (max-width: 1023px) {
    .site-header__nav { display: none; }
    .site-header__burger { display: flex; }
    /* CTA «Получить демо» остаётся в шапке на всех ширинах — это главная
       конверсия; прятать её в бургер нельзя. Nav с flex:1 скрыт, поэтому
       правый блок прижимаем auto-полем логотипа. */
    .site-header__logo { margin-right: auto; }
}
@media (max-width: 767px) {
  /* Шапка: с gap 24px логотип + TG + MAX-пилюля + бургер шире экрана —
       бургер уезжал за край. Плотнее гэп/паддинги, логотип прижат влево.
       На телефоне приоритет CTA «Получить демо»: TG/MAX-иконки скрываются
       (мессенджеры остаются в FAQ-блоке и футере), кнопка компактнее. */
    .site-header__bar { padding: 12px 16px; gap: 10px; }
  .site-header__logo { margin-right: auto; min-width: 0; }
  .site-header__tg, .site-header__max { display: none; }
  .site-header__cta { height: 40px; padding: 0 14px; font-size: 14px; }
  /* На телефоне «Получить демо» уступает место кнопке «Связаться»
       (открывает поп-ап быстрого контакта). На десктопе — наоборот. */
    .site-header__cta--demo { display: none; }
  .site-header__cta--contact { display: inline-flex; }
}
/* ---------------- Header lockup ---------------- */
.site-header__logo { gap: 10px; }
.site-header__logo-mark {
    width: 32px; height: 32px;
    flex-shrink: 0;
    --mark-color: var(--text-primary);
    --mark-sparkle: var(--sparkle);
}
.site-header__logo-text {
    font-family: var(--font-family);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 32px; /* match SVG height for vertical centering */
}
@media (max-width: 640px) {
  .site-header__logo-mark { width: 28px; height: 28px; }
  .site-header__logo-text { font-size: 19px; }
}
/* Inline section CTA — compact, centred, sits under the resilience banner.
   Button reuses the canonical .site-header__cta liquid-glass recipe (brand
   gradient + brand-tinted soft drop), scaled up for a section-level CTA. */
/* Mobile — stack everything */
@media (max-width: 1023px) {
    .ecosystem { padding: 64px 16px 32px; }
    .ecosystem__head { margin-bottom: 40px; }
    .ecosystem__stage {
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ecosystem__svg { display: none; }
    .eco-node,
    .eco-node--hub-pos,
    .eco-node--social {
        position: static;
        width: auto;
        transform: none;
    }
    .eco-node--hub-pos:hover,
    .eco-node--social:hover { transform: translateY(-3px); }
    .eco-label { display: none; }
    .ecosystem__banner {
        margin-top: 40px;
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }
}
/* v2 lead form: launch-capacity note + contact-channel switcher + reply promise */
.lead-capacity {display:flex;gap:12px;align-items:center;margin:0 0 18px;padding:12px 14px;background:var(--brand-primary-light);border:1px solid color-mix(in srgb,var(--brand-primary) 18%,transparent);border-radius:var(--radius-md);}
/* =====================================================================
/* =====================================================================
   PILL-КНОПКИ — полностью округлые CTA (референсы)
   ===================================================================== */
.site-header__cta,.site-header__max,.site-header__tg,
.hero__btn,.hero__pill,
.price-card__cta,.sec-cta__btn,
.faq-split__tg,.faq-split__max,
.cta-block__grid button[type=submit],
.lead-card button[type=submit],
.calc__cta,.faq__more,.cookie-consent__accept { border-radius:var(--radius-full) !important; }
/* -------- Telegram-кнопка: pill + ровный глиф -------- */
.site-header__tg { width:auto !important; gap:7px; padding:0 13px; font-size:14px; font-weight:600; letter-spacing:.02em; }
.site-header__tg svg { transform:none !important; }
@media (max-width:1023px) {
  .site-header__tg-label { display:none; }
}
.site-header__cta {min-height:44px!important;height:44px!important;box-sizing:border-box;padding:0 20px!important;font-size:15px!important;font-weight:600!important;align-items:center;border-radius:9999px!important}
.hero__btn--primary,.calc__cta,.lead-card__submit,.price-card--featured .price-card__cta,.site-header__cta {box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.16)!important;border:0!important}
body:has(.lead-sheet.is-open) .msticky,body:has(.mobile-drawer.is-open) .msticky,body:has(.demo-modal.is-open) .msticky,body:has(.story-viewer.is-open) .msticky {display:none!important}

/* Окно QR-кодов Telegram и MAX */
.cqr-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(13, 20, 38, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 220ms ease;
}
.cqr-modal.is-open {
    display: flex;
    opacity: 1;
    animation: demoFadeIn 220ms ease;
}
.cqr-modal__card {
    position: relative;
    width: min(380px, 100%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 24px 64px -16px rgba(0,0,0,0.5);
    padding: 32px 28px 28px;
    text-align: center;
}
.cqr-modal__close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.cqr-modal__close:hover { color: var(--text-primary); border-color: var(--text-tertiary); }
.cqr-modal__close svg { width: 14px; height: 14px; }
.cqr-modal__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
}
.cqr-modal__sub {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 20px;
    line-height: 1.5;
}
.cqr-modal__qr {
    width: 220px;
    height: 220px;
    margin: 0 auto 20px;
    padding: 12px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 20px -8px rgba(0,0,0,0.3);
}
.cqr-modal__qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.cqr-modal__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 8px;
    padding: 13px 20px;
    border-radius: var(--radius-md);
    background: var(--brand-gradient, var(--brand-primary));
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-decoration: none;
    border: var(--border-primary-glass, 1px solid rgba(255,255,255,0.18));
    box-shadow: var(--shadow-primary, 0 8px 24px -8px rgba(69,140,255,0.5));
    transition: box-shadow .15s, transform .1s;
}
.cqr-modal__open:hover { box-shadow: var(--shadow-primary-hover, 0 12px 28px -8px rgba(69,140,255,0.6)); }
.cqr-modal__open:active { transform: translateY(1px); box-shadow: var(--shadow-primary-active, inset 0 2px 6px rgba(0,0,0,0.25)); }

/* Окно «Связаться» */
.qc-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(13, 20, 38, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 220ms ease;
}
.qc-modal.is-open { display: flex; opacity: 1; }
.qc-modal__card {
    width: min(400px, 100%);
    background: var(--bg-secondary);
    border-radius: 24px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.10), 0 30px 70px -20px rgba(15,23,42,0.45);
    padding: 28px 28px 24px;
    position: relative;
    transform: translateY(16px) scale(.985);
    opacity: 0;
    transition: transform 320ms cubic-bezier(.22,.61,.36,1), opacity 320ms cubic-bezier(.22,.61,.36,1);
}
.qc-modal.is-open .qc-modal__card { transform: translateY(0) scale(1); opacity: 1; }
.qc-modal__close {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s, color .15s, background .15s;
}
.qc-modal__close:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-primary-light); }
.qc-modal__close svg { width: 14px; height: 14px; }
.qc-modal__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 6px;
}
.qc-modal__sub {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 18px;
}
.qc-modal__field { margin-bottom: 14px; }
.qc-modal__field label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}
.qc-modal__input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    font-size: 16px; /* ≥16px — гасит iOS-автозум при фокусе */
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.qc-modal__input::placeholder { color: var(--text-tertiary); }
.qc-modal__input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(69,140,255,0.15);
}
.qc-modal.is-invalid .qc-modal__input { border-color: var(--error); }
.qc-modal__error {
    margin-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--error);
    display: none;
}
.qc-modal.is-invalid .qc-modal__error { display: block; }
.qc-modal__channels { display: grid; gap: 10px; margin-top: 4px; }
.qc-modal__channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    color: #fff;
    font-size: var(--font-size-lg);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: filter .15s, transform .1s, box-shadow .18s;
}
.qc-modal__channel svg { width: 22px; height: 22px; }
.qc-modal__channel:hover { filter: brightness(1.06); }
.qc-modal__channel:active { transform: translateY(1px); }
/* Фирменные цвета мессенджеров (сторонние сервисы). */
.qc-modal__channel--max { background: #2A6FF0; box-shadow: 0 8px 22px -8px rgba(42,111,240,0.55); }
.qc-modal__channel--telegram { background: #229ED9; box-shadow: 0 8px 22px -8px rgba(34,158,217,0.55); }
.qc-modal.is-invalid .qc-modal__channel { animation: qcShake .32s; }
@keyframes qcShake {
    10%, 90% { transform: translateX(-1px); }
    30%, 70% { transform: translateX(2px); }
    50% { transform: translateX(-2px); }
}
.qc-modal__legal {
    margin-top: 14px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    line-height: 1.5;
    text-align: center;
}
.qc-modal__legal a { color: var(--brand-primary); }
/* Шаги: «form» (перезвон + мессенджеры) → «done» (перезвоним вам). */
.qc-modal__step { display: none; }
.qc-modal__step.is-active { display: block; }
/* Кнопка «Перезвоните мне» — основной brand-CTA (liquid-glass). */
.qc-modal__callback {
    width: 100%;
    height: 52px;
    margin-top: 4px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-md);
    background: var(--brand-gradient);
    color: var(--text-inverse);
    font-size: var(--font-size-lg);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.32),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 8px 22px -8px rgba(24,81,172,0.55);
    transition: filter .15s, transform .1s, box-shadow .18s;
}
.qc-modal__callback svg { width: 18px; height: 18px; }
.qc-modal__callback:hover { filter: brightness(1.05); }
.qc-modal__callback:active { transform: translateY(1px); }
/* Разделитель «или напишите сразу» между перезвоном и мессенджерами. */
.qc-modal__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
}
.qc-modal__divider::before, .qc-modal__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}
/* Экран «Перезвоним вам». */
.qc-modal__done-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--success-bg);
    border: 1px solid color-mix(in srgb, var(--success) 22%, transparent);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
}
.qc-modal__done-icon svg { width: 26px; height: 26px; }
.qc-modal__title--center, .qc-modal__sub--center { text-align: center; }
/* Bottom-sheet на телефоне: карточка прижата к низу, во всю ширину. */
@media (max-width: 767px) {
    /* Bottom-sheet прижат к низу. Оверлей ОСТАЁТСЯ на весь экран (inset: 0):
       иначе затемнение обрывается по верхнему краю листа, и в его скруглённых
       углах просвечивает страница (лист при открытой клавиатуре занимает всю
       высоту оверлея).
       К кромке клавиатуры лист поднимает --qc-kb (её высота, считает JS через
       visualViewport). При закрытой клавиатуре --qc-kb = 0. */
    .qc-modal {
        align-items: flex-end;
        padding: 0 0 var(--qc-kb, 0px);
    }
    .qc-modal__card {
        width: 100%;
        border-radius: 24px 24px 0 0;
        /* Нижний паддинг = home-indicator; при открытой клавиатуре лист
           прижат к её кромке, поэтому safe-area внизу не нужна (JS обнуляет
           её через --qc-pad, чтобы не было лишнего зазора над клавиатурой). */
        padding: 24px 20px var(--qc-pad, calc(20px + env(safe-area-inset-bottom)));
        transform: translateY(100%);
        /* Лист не выше видимой зоны над клавиатурой; контент скроллится внутри. */
        max-height: calc(100% - var(--qc-kb, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .qc-modal.is-open .qc-modal__card { transform: translateY(0); }
    /* Запас у активного поля/кнопок, чтобы scrollIntoView не прятал их
       под верхний край листа или под клавиатуру. */
    .qc-modal__input, .qc-modal__callback, .qc-modal__channel {
        scroll-margin-top: 16px;
        scroll-margin-bottom: 16px;
    }
}