/* «Воздушная» кнопка (06.10.2026, выбор владельца: контур по референсу Grok).
   Подложка — SVG images/bloom-button/fill-air-grok.svg (генератор scripts/make-air-button.cjs): пастельный
   розово-персиковый переход, три полупрозрачные оболочки с белыми краями, размытая сердцевина, ореол.
   Подложка лежит в ::before под текстом (z -1 внутри собственного stacking context кнопки). */
:root {
  /* Компактные кнопки — цвета сердцевины воздушной кнопки. */
  --bloom-fill:
    radial-gradient(90% 130% at 22% 12%, rgba(255, 214, 226, 0.65) 0%, transparent 48%),
    linear-gradient(115deg, #ef769c 0%, #f2818e 50%, #f99a6c 100%);
  --bloom-glow: rgba(239, 118, 156, 0.40);
  --bloom-text-shadow: 0 1px 2px rgba(196, 72, 104, 0.55), 0 0 14px rgba(232, 110, 135, 0.45);
}

/* Полный вариант: главные CTA первого экрана, секций, баннера акции и /compatibility. */
html[data-scheme] :is(.hero__cta-btn, .btn--primary.btn--lg, .cta-gradient__btn, .compat-inline-cta__btn, .compat-cta__btn) {
  position: relative;
  z-index: 0;
  background: transparent !important;
  border: none;
  border-radius: 999px;
  padding: 36px 66px;
  color: #fff !important;
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  max-width: none;
  text-shadow: var(--bloom-text-shadow);
  box-shadow: none !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
html[data-scheme] :is(.hero__cta-btn, .btn--primary.btn--lg, .cta-gradient__btn, .compat-inline-cta__btn, .compat-cta__btn)::before {
  content: '';
  position: absolute;
  inset: -20px -32px;
  z-index: -1;
  background: url('../images/bloom-button/fill-air-grok.svg') center / 100% 100% no-repeat;
  pointer-events: none;
  transition: filter 0.35s ease;
}
html[data-scheme] :is(.hero__cta-btn, .btn--primary.btn--lg, .cta-gradient__btn, .compat-inline-cta__btn, .compat-cta__btn)::after { content: none; }
html[data-scheme] :is(.hero__cta-btn, .btn--primary.btn--lg, .cta-gradient__btn, .compat-inline-cta__btn, .compat-cta__btn):hover {
  transform: translateY(-2px) scale(1.02);
  color: #fff !important;
}
html[data-scheme] :is(.hero__cta-btn, .btn--primary.btn--lg, .cta-gradient__btn, .compat-inline-cta__btn, .compat-cta__btn):hover::before { filter: saturate(1.12) brightness(1.03); }
html[data-scheme] :is(.hero__cta-btn, .btn--primary.btn--lg, .cta-gradient__btn, .compat-inline-cta__btn, .compat-cta__btn):active { transform: scale(0.98); }
html[data-scheme] :is(.hero__cta-btn, .btn--primary.btn--lg, .cta-gradient__btn, .compat-inline-cta__btn, .compat-cta__btn):focus-visible { outline: 3px solid #f2818e; outline-offset: 18px; }

/* Длинные подписи (/compatibility) — в две строки по центру: иначе капля вытягивается в «косточку». */
html[data-scheme] :is(.compat-inline-cta__btn.compat-inline-cta__btn, .compat-cta__btn.compat-cta__btn) {
  white-space: normal; max-width: 320px; text-align: center; line-height: 1.3;
}
/* У кнопки середины /compatibility есть значок ✨ — шире, чтобы подпись шла в две строки. */
html[data-scheme] .compat-inline-cta__btn.compat-inline-cta__btn { max-width: 420px; }

/* Кнопка первого экрана всегда по ширине текста: старое правило responsive.css растягивало её на 100%. */
html[data-scheme] :is(.hero__cta-btn, .hero__cta-btn.hero__cta-btn) { width: auto; align-self: flex-start; }
/* Оболочки выступают за кнопку — на узких экранах отступ от края, чтобы контейнер первого экрана их не обрезал. */
@media (max-width: 768px) {
  html[data-scheme] :is(.hero__cta-btn, .hero__cta-btn.hero__cta-btn) { margin-left: 18px; }
}

/* Главная кнопка первого экрана на десктопе: крупный текст, подложка компактнее (07.10 — «кнопку чуть меньше, надпись та же»). */
@media (min-width: 601px) {
  html[data-scheme] :is(.hero__cta-btn, .hero__cta-btn.hero__cta-btn) { padding: 32px 62px; font-size: 21px; }
  html[data-scheme] :is(.hero__cta-btn, .hero__cta-btn.hero__cta-btn)::before { inset: -18px -28px; }
  /* «Три шага» — чуть меньше остальных кнопок секций. */
  html[data-scheme] #how-it-works .btn--primary.btn--lg { padding: 30px 56px; }
  html[data-scheme] #how-it-works .btn--primary.btn--lg::before { inset: -16px -26px; }
}
@media (max-width: 600px) {
  html[data-scheme] :is(.hero__cta-btn, .btn--primary.btn--lg, .cta-gradient__btn, .compat-inline-cta__btn, .compat-cta__btn) { padding: 28px 38px; font-size: 17px; }
  html[data-scheme] :is(.hero__cta-btn, .btn--primary.btn--lg, .cta-gradient__btn, .compat-inline-cta__btn, .compat-cta__btn)::before { inset: -14px -16px; }
  html[data-scheme] :is(.compat-inline-cta__btn.compat-inline-cta__btn, .compat-cta__btn.compat-cta__btn) { max-width: 250px; }
}

/* Компактный вариант: остальные основные кнопки (тарифы, подарок, «Посмотреть демо») — капсула в цветах сердцевины.
   Зелёные «регистрационные» кнопки с inline-цветом не трогаем. */
html[data-scheme] .btn--primary:not(.btn--lg):not(.hero__cta-btn):not([style*="10b981"]),
html[data-scheme] .btn--bloom-soft {
  background: var(--bloom-fill) !important;
  color: #fff !important;
  border: none;
  border-radius: 999px;
  text-shadow: var(--bloom-text-shadow);
  box-shadow: 0 12px 26px -12px var(--bloom-glow), inset 0 1px 4px rgba(255, 255, 255, 0.5) !important;
}

/* Светлые карточки-приглашения вокруг кнопки-бутона (06.10.2026):
   баннер «6 месяцев Premium» на главной и финальная карточка /compatibility вместо кислотных градиентов. */
html[data-scheme] :is(.cta-gradient, .compat-cta__card) {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(55% 75% at 88% 8%, rgba(243, 145, 88, 0.20) 0%, transparent 62%),
    radial-gradient(55% 80% at 8% 100%, rgba(223, 58, 106, 0.14) 0%, transparent 62%),
    linear-gradient(160deg, #fffaf7 0%, #fdf0ec 100%);
  border: 1px solid #f4dcd8;
  box-shadow: 0 30px 60px -36px rgba(176, 60, 90, 0.35);
  color: #2b2230;
}
html[data-scheme] .cta-gradient { max-width: 1120px; width: calc(100% - 32px); margin: 0 auto; border-radius: 32px; padding: 84px 24px 92px; }
html[data-scheme] .compat-cta__card { border-radius: 32px; padding: 64px 40px 72px; }
html[data-scheme] .cta-gradient__circle { display: none; }
html[data-scheme] :is(.cta-gradient__title, .compat-cta__title) { color: #2b2230; }
html[data-scheme] :is(.cta-gradient__subtitle, .compat-cta__text) { color: #6b6170; margin-bottom: 40px; }
html[data-scheme] .cta-gradient__subtitle strong { color: #2b2230; }
html[data-scheme] .cta-gradient__badge { background: #fff; border: 1px solid #f4dcd8; color: #b23a5e; box-shadow: 0 6px 16px -10px rgba(176, 60, 90, 0.4); }
html[data-scheme] .cta-gradient__pulse { background: #df3a6a; box-shadow: 0 0 0 0 rgba(223, 58, 106, 0.5); }
@media (max-width: 600px) {
  html[data-scheme] .cta-gradient { width: calc(100% - 24px); border-radius: 24px; padding: 64px 20px 72px; }
  html[data-scheme] .compat-cta__card { border-radius: 24px; padding: 48px 20px 56px; }
}
html[data-theme="dark"][data-scheme] :is(.cta-gradient, .compat-cta__card) {
  background:
    radial-gradient(55% 75% at 88% 8%, rgba(243, 145, 88, 0.16) 0%, transparent 62%),
    linear-gradient(160deg, #2a2129 0%, #33232f 100%);
  border-color: #4a3443;
  color: #f6ece8;
}
html[data-theme="dark"][data-scheme] :is(.cta-gradient__title, .compat-cta__title, .cta-gradient__subtitle strong) { color: #f6ece8; }
html[data-theme="dark"][data-scheme] :is(.cta-gradient__subtitle, .compat-cta__text) { color: #cdbfc6; }

/* Тёплый фон секции «Три шага» (07.10.2026) — в тон светлым карточкам-приглашениям. */
html[data-scheme] .section--warm {
  background:
    radial-gradient(45% 60% at 92% 0%, rgba(243, 145, 88, 0.10) 0%, transparent 70%),
    radial-gradient(45% 60% at 6% 100%, rgba(223, 58, 106, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, #fdf8f5 0%, #fbf0eb 100%);
}
html[data-theme="dark"][data-scheme] .section--warm {
  background:
    radial-gradient(45% 60% at 92% 0%, rgba(243, 145, 88, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, #1f1a20 0%, #261d24 100%);
}

/* Иконка блока «Поделитесь заботой»: светлая «жемчужина» с контуром подарка в цветах кнопки вместо красной плашки. */
.gift-icon {
  width: 76px; height: 76px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(70% 70% at 30% 25%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(150deg, #fff6f2 0%, #fde4e4 100%);
  border: 1px solid #f6d9d6;
  box-shadow: 0 14px 30px -14px rgba(226, 102, 143, 0.45), inset 0 -4px 10px rgba(242, 138, 92, 0.10);
}
html[data-theme="dark"] .gift-icon {
  background: radial-gradient(70% 70% at 30% 25%, rgba(255, 255, 255, 0.10) 0%, transparent 70%), linear-gradient(150deg, #33232f 0%, #2a2129 100%);
  border-color: #4a3443;
}