/* core/v1 public stylesheet — Phase 1D.1 section-by-section.
   База: сетка 2 (плотность блоков, чередующиеся цветные секции, gradient-
   карточки, accent CTA с пульсом). Современная типографика и таймеры —
   из сетки 3. Без декоративных blob/orb-фонов. */

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

:root {
  /* Текст */
  --c-text: #0f172a;
  --c-text-muted: #64748b;
  --c-text-faint: #94a3b8;

  /* Фоны */
  --c-white: #ffffff;
  --c-bg: var(--c-white);
  --c-bg-soft: #f5f7fb;
  --c-bg-tint: #eef2f9;

  /* Линии и тени */
  --c-border: #e5e7eb;
  --c-border-strong: #cbd5e1;
  --c-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --c-shadow-sm: 0 4px 12px rgba(15, 23, 42, .06);
  --c-shadow:    0 12px 28px rgba(15, 23, 42, .10);
  --c-shadow-lg: 0 22px 50px rgba(15, 23, 42, .14);
  --c-shadow-primary: 0 12px 30px rgba(var(--c-primary-rgb), .25);
  --c-shadow-accent:  0 12px 30px rgba(var(--c-accent-rgb), .30);

  /* Бренд (hex + RGB триплеты для использования с rgba()) */
  --c-primary: #1f3a8a;
  --c-primary-rgb: 31, 58, 138;
  --c-primary-dark: #16276b;
  --c-primary-soft:    rgba(var(--c-primary-rgb), .08);
  --c-primary-soft-2:  rgba(var(--c-primary-rgb), .14);

  --c-accent: #22c55e;
  --c-accent-rgb: 34, 197, 94;
  --c-accent-dark: #16a34a;
  --c-accent-soft:    rgba(var(--c-accent-rgb), .12);
  --c-accent-soft-2:  rgba(var(--c-accent-rgb), .22);

  /* Семантические */
  --c-warning: #f59e0b;
  --c-warning-rgb: 245, 158, 11;
  --c-warning-soft: rgba(var(--c-warning-rgb), .14);
  --c-warning-text: #b45309;
  --c-danger: #dc2626;

  /* Нейтральные с альфой (slate-400 / white) — отдельные триплеты */
  --c-neutral-rgb: 148, 163, 184;
  --c-white-rgb:   255, 255, 255;

  /* Градиентные фоны секций — повторяют логику setka2 (bg-primary-opacity,
     bg-primary-accent-gradient-10, bg-primary-dark-gradient) */
  --bg-primary-opacity: linear-gradient(180deg, rgba(var(--c-primary-rgb), .04), rgba(var(--c-primary-rgb), .08));
  --bg-accent-opacity:  linear-gradient(180deg, rgba(var(--c-accent-rgb), .04),  rgba(var(--c-accent-rgb), .10));
  --bg-primary-accent-gradient-10: linear-gradient(135deg, rgba(var(--c-primary-rgb), .07), rgba(var(--c-accent-rgb), .10));
  --bg-accent-primary-gradient-10: linear-gradient(135deg, rgba(var(--c-accent-rgb), .10), rgba(var(--c-primary-rgb), .07));
  --bg-primary-dark-gradient:  linear-gradient(135deg, var(--c-primary), #0b1d4d);
  --bg-accent-bright-gradient: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
  --bg-primary-bright-gradient: linear-gradient(135deg, var(--c-primary), #3b6cf5);

  /* Радиусы */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* Контейнер */
  --container: 1200px;
  --header-height: 66px;
}

html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  padding: 0;
  color: var(--c-text);
  background: var(--c-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PT Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* mobile-first: запрещаем горизонтальный overflow на уровне документа,
     чтобы случайные long-tokens / wide-grids не давали прокрутку вправо
     на 360–430px устройствах. */
  overflow-x: hidden;
  max-width: 100%;
}
body { padding-top: var(--header-height); }
/* Главный контейнер тоже не должен «вылезать»: учёт padding не должен
   превращаться в горизонтальную ленту на iPhone SE / iPhone 12 mini. */
img, svg, video, table, pre, code { max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  letter-spacing: 0;
  font-weight: 800;
  color: var(--c-text);
}

p { margin: 0; }
img, svg { max-width: 100%; display: block; }
a { color: var(--c-primary); text-decoration: none; transition: color .15s ease; }
a:hover { text-decoration: none; }
.muted { color: var(--c-text-muted); }
.faint { color: var(--c-text-faint); }
.text-accent { color: var(--c-accent-dark); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}
.container--narrow { max-width: 820px; }

/* ---------- Section spacing & backgrounds ---------- */

.section { padding: 3rem 0; }
@media (min-width: 768px) { .section { padding: 4rem 0; } }
.section--white   { background: var(--c-white); }
.section--soft    { background: var(--c-bg-soft); }
.section--primary { background: var(--bg-primary-opacity); }
.section--accent  { background: var(--bg-accent-opacity); }
.section--gradient { background: var(--bg-primary-accent-gradient-10); }
.section--dark    { background: var(--bg-primary-dark-gradient); color: var(--c-white); }
.section--dark h2,
.section--dark h3 { color: var(--c-white); }

.section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.2rem;
}
.section__title {
  font-size: clamp(1.6rem, 1rem + 1.8vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 .55rem;
}
.section__title em { font-style: normal; color: var(--c-accent); }
.section__title em.primary { color: var(--c-primary); }
.section__sub { color: var(--c-text-muted); font-size: 1.02rem; margin: 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 12px;
  border: 0;
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .005em;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
  white-space: nowrap;
  position: relative;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--c-primary-soft-2); outline-offset: 2px; }
.btn svg { width: 18px; height: 18px; }

.btn--cta    { background: var(--bg-accent-bright-gradient); color: var(--c-white); box-shadow: var(--c-shadow-accent); }
.btn--cta:hover  { filter: brightness(1.04); box-shadow: 0 16px 36px rgba(var(--c-accent-rgb), .35); }
.btn--primary { background: var(--bg-primary-bright-gradient); color: var(--c-white); box-shadow: var(--c-shadow-primary); }
.btn--primary:hover { filter: brightness(1.04); }
.btn--ghost {
  background: var(--c-white);
  color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
  box-shadow: var(--c-shadow-xs);
}
.btn--ghost:hover { background: var(--c-primary-soft); }
.btn--ghost-light {
  background: rgba(var(--c-white-rgb), .12);
  color: var(--c-white);
  border: 1.5px solid rgba(var(--c-white-rgb), .4);
}
.btn--ghost-light:hover { background: rgba(var(--c-white-rgb), .18); }
.btn--white {
  background: var(--c-white);
  color: var(--c-primary);
}
.btn--white:hover { color: var(--c-primary-dark); }
.btn--lg { min-height: 56px; padding: 16px 28px; font-size: 1.05rem; border-radius: 14px; }
.btn--xl { min-height: 60px; padding: 18px 32px; font-size: 1.1rem; border-radius: 16px; }
.btn--block { width: 100%; }

@keyframes btnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb), .55); }
  70%  { box-shadow: 0 0 0 16px rgba(var(--c-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb), 0); }
}
.btn--pulse { animation: btnPulse 2s ease-out infinite; }
.btn--pulse:hover { animation-play-state: paused; }

/* Inline chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 4px 10px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
}
.chip--accent { background: var(--c-accent-soft); color: var(--c-accent-dark); }
.chip--warning { background: var(--c-warning-soft); color: var(--c-warning-text); }
.chip--dot::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(var(--c-accent-rgb), .18);
}

/* ---------- Header / nav ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(var(--c-white-rgb), .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(.55rem, 1vw, 1rem);
  padding: 12px 16px;
  min-height: 66px;
  min-width: 0;
}
.site-header__badge {
  display: none;
  align-items: center;
  min-height: 34px;
  max-width: 260px;
  padding: 7px 12px;
  border: 1px solid rgba(var(--c-accent-rgb), .28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--c-accent-rgb), .15), rgba(var(--c-primary-rgb), .08));
  color: var(--c-primary);
  font-weight: 850;
  font-size: .82rem;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(var(--c-primary-rgb), .08);
}
@media (min-width: 960px) {
  .site-header__badge { display: inline-flex; }
}
/* Brand logo (Phase 1D.3): единый partial views/partials/logo.php */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--c-text);
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
  line-height: 1.1;
  min-width: 0;
  max-width: 100%;
}
.brand-logo:hover { text-decoration: none; }
.brand-logo__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .02em;
  box-shadow: var(--c-shadow-sm);
  flex-shrink: 0;
}
.brand-logo__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(var(--c-white-rgb), .25), transparent 60%);
  pointer-events: none;
}
.brand-logo__mark-text { position: relative; z-index: 1; }
.brand-logo__image {
  width: clamp(132px, 18vw, 178px);
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}
.brand-logo__image img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.brand-logo__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
}
.brand-logo__text {
  display: block;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--c-primary);
  line-height: .98;
}
.brand-logo__subtext {
  display: block;
  margin-top: 2px;
  color: var(--c-text-muted);
  font-size: .48em;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.brand-logo--header {
  font-size: 1.04rem;
  flex: 0 0 auto;
  max-width: none;
}
.brand-logo--header.brand-logo--long { font-size: .92rem; }
.brand-logo--header.brand-logo--very-long { font-size: .83rem; }
.brand-logo--footer {
  color: var(--c-white);
  font-size: 1.1rem;
  margin-bottom: .8rem;
}
.brand-logo--footer .brand-logo__mark { background: linear-gradient(135deg, var(--c-accent), var(--c-primary)); }

@media (max-width: 1220px) {
  .brand-logo--header { font-size: .98rem; }
  .brand-logo--header.brand-logo--long { font-size: .86rem; }
  .brand-logo--header.brand-logo--very-long { font-size: .72rem; }
  .site-header__badge { max-width: 210px; font-size: .74rem; padding-inline: 9px; }
  .site-nav__list a { padding-inline: 8px; }
}
@media (max-width: 1100px) {
  .brand-logo--header { font-size: 1rem; }
  .brand-logo--header.brand-logo--long { font-size: .9rem; }
  .brand-logo--header.brand-logo--very-long { font-size: .78rem; }
}
@media (max-width: 520px) {
  .brand-logo--header { gap: .5rem; font-size: .94rem; }
  .brand-logo--header.brand-logo--long { font-size: .82rem; }
  .brand-logo--header.brand-logo--very-long { font-size: .68rem; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
}
.site-nav__list {
  display: none;
  align-items: center;
  gap: .1rem;
  list-style: none;
  margin: 0 .5rem 0 0;
  padding: 0;
}
.site-nav__list a {
  color: var(--c-text-muted);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: .95rem;
  transition: color .15s ease, background .15s ease;
}
.site-nav__list a:hover  { color: var(--c-primary); background: var(--c-primary-soft); }
.site-nav__list a[aria-current="page"] { color: var(--c-primary); background: var(--c-primary-soft); }
@media (min-width: 1100px) { .site-nav__list { display: inline-flex; } }

.site-nav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  border-radius: 11px;
  cursor: pointer;
  margin-left: .25rem;
  transition: background .15s ease;
}
.site-nav__burger:hover { background: var(--c-bg-soft); }
@media (min-width: 1100px) { .site-nav__burger { display: none; } }
.site-nav__burger span { display: block; width: 18px; height: 2px; background: var(--c-text); position: relative; }
.site-nav__burger span::before,
.site-nav__burger span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--c-text);
}
.site-nav__burger span::before { top: -6px; }
.site-nav__burger span::after  { top:  6px; }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--c-border);
  background: var(--c-white);
  padding: 8px 16px 18px;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu[data-open="true"] { display: block; }
.mobile-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  color: var(--c-text);
  font-weight: 500;
  font-size: 1rem;
  border-bottom: 1px dashed var(--c-border);
}
.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu a[aria-current="page"] { color: var(--c-primary); }
.mobile-menu a::after {
  content: "→";
  color: var(--c-text-faint);
  font-weight: 400;
}
/* Сбрасываем nav-стили на CTA-кнопке в мобильном меню — иначе ей наследуется
   justify-content:space-between и dashed-borderBottom от .mobile-menu a, и
   она выглядит как «сломанный» nav-item. Возвращаем нормальный btn-вид. */
.mobile-menu .btn {
  margin-top: 14px;
  justify-content: center;
  border-bottom: 0;
  padding: 14px 24px;
  font-weight: 700;
  color: #fff;
}
.mobile-menu .btn::after { content: none; }
.mobile-menu .btn:hover,
.mobile-menu .btn:focus,
.mobile-menu .btn:active { color: #fff; background: var(--c-accent-dark); }
.mobile-menu .btn[aria-current="page"] { color: #fff; }

/* ---------- Hero ---------- */

/* Hero (Phase 1D.3): mobile-first, full-bleed карточки на узких экранах,
   уменьшенные ~в 2 раза вертикальные отступы относительно 1D.2. */
.hero {
  background: var(--bg-primary-accent-gradient-10);
  border-bottom: 1px solid var(--c-border);
  position: relative;
  padding: 1.2rem 0 1.4rem;
}
@media (min-width: 720px)  { .hero { padding: 1.6rem 0 1.8rem; } }
@media (min-width: 1000px) { .hero { padding: 2rem 0 2.2rem; } }

/* Container hero — на мобильном без боковых padding, чтобы карточка
   занимала всю ширину экрана. На планшете/десктопе возвращаются обычные
   отступы контейнера. */
.hero__container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
}
@media (min-width: 720px) { .hero__container { padding: 0 16px; } }

.hero__panel {
  background: var(--c-white);
  border-radius: 0;
  padding: 1.2rem 1rem 1.4rem;
  box-shadow: var(--c-shadow);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}
@media (min-width: 720px) {
  .hero__panel {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--c-shadow-lg);
    padding: 1.8rem 1.6rem;
  }
}
@media (min-width: 1000px) {
  .hero__panel {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 1fr);
    gap: 2.4rem;
    padding: 2.2rem 2rem;
  }
}

.hero__title {
  margin: .6rem 0 1rem;
  font-size: clamp(1.7rem, 1rem + 3vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: 0;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__title-brand { color: var(--c-primary); }
.hero__mobile-badge { margin-bottom: .15rem; }
@media (min-width: 960px) {
  .hero__mobile-badge { display: none; }
}

.hero__offer {
  font-size: clamp(1.1rem, .95rem + 1vw, 1.5rem);
  margin-bottom: .8rem;
  color: var(--c-primary);
  line-height: 1.3;
}
.hero__offer-accent { color: var(--c-accent); }

.hero__timer {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem;
  background: var(--c-white);
  border: 1px dashed var(--c-border-strong);
  border-radius: 999px;
  font-size: .9rem;
  color: var(--c-text);
  margin: .2rem 0 1.2rem;
}
.hero__timer-accent { color: var(--c-accent); font-weight: 800; }

.hero__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: .5rem;
}
@media (min-width: 520px) { .hero__features { grid-template-columns: 1fr 1fr; } }
.hero__feature { display: flex; gap: .8rem; align-items: flex-start; }
.hero__feature-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero__feature-icon svg { width: 22px; height: 22px; }
.hero__feature h3 { font-size: 1rem; margin: 0 0 .15rem; font-weight: 700; }
.hero__feature p { font-size: .9rem; color: var(--c-text-muted); }

.hero__after-features {
  margin-top: 1.3rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--c-border);
  font-size: .92rem;
  color: var(--c-text-muted);
}
.hero__quiz-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .6rem;
  color: var(--c-accent-dark);
  font-weight: 600;
}

/* ---------- Calculator card ---------- */

.calc {
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--c-accent-rgb), .22), transparent 15rem),
    linear-gradient(155deg, rgba(var(--c-white-rgb), .96), rgba(var(--c-primary-rgb), .105) 58%, rgba(var(--c-accent-rgb), .09));
  border: 1px solid rgba(var(--c-primary-rgb), .2);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: 0 18px 48px rgba(var(--c-primary-rgb), .16);
}
@media (min-width: 720px) { .calc { padding: 1.15rem; } }
.calc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: .85rem;
}
.calc__toggle label {
  flex: 1;
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  color: var(--c-text-muted);
  padding: 8px 6px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  position: relative;
  user-select: none;
  white-space: nowrap;
  min-width: 0;
}
@media (max-width: 380px) {
  .calc__toggle label { font-size: .82rem; padding: 8px 4px; }
}
.calc__toggle input { position: absolute; opacity: 0; pointer-events: none; }
.calc__toggle input:checked + span {
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  display: block;
  margin: -8px -6px;
  padding: 8px 6px;
  border-radius: 999px;
}
.calc__toggle label:has(input:checked) { color: var(--c-white); }

.calc__field { margin-bottom: .78rem; }
.calc__field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .35rem;
}
.calc__field-label { font-size: .9rem; color: var(--c-primary); font-weight: 700; }
.calc__field-value {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--c-text);
}
.calc__field-value--muted {
  font-size: .8rem;
  font-weight: 500;
  color: var(--c-muted, #6b7280);
}
.calc__field--phone {
  margin: .95rem 0 .9rem;
  padding: .85rem;
  border: 1px solid rgba(var(--c-accent-rgb), .34);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(var(--c-accent-rgb), .13), rgba(var(--c-primary-rgb), .07)),
    var(--c-white);
  box-shadow: 0 12px 30px rgba(var(--c-accent-rgb), .12);
}
.calc__phone-label {
  display: grid;
  gap: .15rem;
  margin-bottom: .55rem;
}
.calc__phone-label span {
  color: var(--c-primary);
  font-weight: 850;
  font-size: 1rem;
}
.calc__phone-label strong {
  color: var(--c-text-muted);
  font-weight: 600;
  font-size: .78rem;
  line-height: 1.35;
}
.calc__consent {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-top: .55rem;
  color: var(--c-text-muted);
  font-size: .82rem;
  line-height: 1.35;
}
.calc__consent input {
  width: 18px;
  height: 18px;
  margin: .05rem 0 0;
  flex: 0 0 18px;
  accent-color: var(--c-accent);
}
.calc__consent a {
  color: var(--c-primary);
  font-weight: 750;
}
.calc__phone-input {
  width: 100%;
  font-size: 1.25rem;
  padding: .82rem 1rem;
  border: 2px solid rgba(var(--c-accent-rgb), .35);
  border-radius: 14px;
  background: var(--c-white);
  color: var(--c-text);
  letter-spacing: .025em;
  font-weight: 800;
  transition: border-color .15s ease;
}
.calc__phone-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .12);
}
.calc__phone-hint {
  display: block;
  margin-top: .35rem;
  font-size: .75rem;
  line-height: 1.4;
}
.calc input[type=range] {
  width: 100%;
  height: 5px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  border-radius: 999px;
  outline: none;
}
.calc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  background: var(--c-white);
  border: 3px solid var(--c-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--c-shadow-sm);
}
.calc input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--c-white);
  border: 3px solid var(--c-primary);
  border-radius: 50%;
  cursor: pointer;
}
.calc__range-meta {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--c-text-faint);
  margin-top: .35rem;
}

.calc__result {
  background: var(--c-white);
  border-radius: var(--radius);
  padding: .78rem .85rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin: .7rem 0 .9rem;
  border: 1px solid var(--c-border);
}
.calc__result-cell { display: flex; flex-direction: column; gap: 2px; }
.calc__result-cell + .calc__result-cell { border-left: 1px solid var(--c-border); padding-left: .8rem; }
.calc__result-label { font-size: .78rem; color: var(--c-text-muted); }
.calc__result-value { font-size: .98rem; font-weight: 850; color: var(--c-primary); line-height: 1.1; }
.calc__result-value--accent { color: var(--c-accent-dark); }
.calc__result-date {
  display: block;
  font-size: .72rem;
  color: var(--c-accent-dark);
  font-weight: 500;
}

.calc__cta { width: 100%; }
.calc__note { margin-top: .7rem; font-size: .8rem; color: var(--c-text-muted); }
.calc__note a { color: var(--c-accent-dark); font-weight: 600; }

.showcase-processing {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 30% 20%, rgba(var(--c-accent-rgb), .22), transparent 32%),
    linear-gradient(135deg, rgba(var(--c-primary-rgb), .94), rgba(7, 18, 45, .96));
  color: var(--c-white);
}
.showcase-processing__card {
  width: min(520px, 100%);
  border-radius: 24px;
  padding: 1.5rem;
  background: rgba(var(--c-white-rgb), .11);
  border: 1px solid rgba(var(--c-white-rgb), .22);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}
.showcase-processing__timer {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: conic-gradient(var(--c-accent), rgba(var(--c-white-rgb), .18));
}
.showcase-processing__timer span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(7, 18, 45, .94);
  font-size: 1.55rem;
  font-weight: 900;
}
.showcase-processing h2 { margin: 0; text-align: center; color: var(--c-white); }
.showcase-processing p { margin: .45rem 0 1rem; text-align: center; color: rgba(var(--c-white-rgb), .82); }
.showcase-processing ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.showcase-processing li {
  padding: .72rem .8rem;
  border-radius: 14px;
  background: rgba(var(--c-white-rgb), .1);
  color: rgba(var(--c-white-rgb), .75);
  font-weight: 700;
}
.showcase-processing li.is-active {
  background: rgba(var(--c-accent-rgb), .26);
  color: var(--c-white);
}
.showcase-processing li.is-done::before { content: "✓ "; color: var(--c-accent); }
.showcase-processing small {
  display: block;
  margin-top: 1rem;
  text-align: center;
  color: rgba(var(--c-white-rgb), .72);
}

.showcase-process {
  padding: clamp(1.4rem, 3vw, 2.8rem) 0 3.2rem;
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--c-accent-rgb), .16), transparent 28rem),
    linear-gradient(180deg, rgba(var(--c-primary-rgb), .08), rgba(var(--c-white-rgb), 1) 58%),
    var(--c-white);
}
.showcase-process__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 1.05rem;
  align-items: stretch;
}
.showcase-process__main,
.showcase-process__card {
  border: 1px solid rgba(var(--c-primary-rgb), .13);
  border-radius: var(--radius);
  background: var(--c-white);
  box-shadow: 0 14px 34px rgba(var(--c-primary-rgb), .09);
}
.showcase-process__main {
  padding: clamp(1.15rem, 2.6vw, 2rem);
  background:
    linear-gradient(135deg, rgba(var(--c-white-rgb), 1), rgba(var(--c-accent-rgb), .07)),
    var(--c-white);
}
.showcase-process__main h1 {
  margin: .25rem 0 .55rem;
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  line-height: 1.08;
}
.showcase-process__main p {
  max-width: 680px;
  color: var(--c-text-muted);
  margin: 0 0 .9rem;
}
.showcase-process__request {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .65rem;
  border-radius: 999px;
  background: rgba(var(--c-primary-rgb), .08);
  color: var(--c-primary);
}
.showcase-process__request span { color: var(--c-text-muted); font-size: .82rem; }
.showcase-process__request strong { font-weight: 900; }
.showcase-process__bar {
  height: 10px;
  margin-top: 1.1rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--c-neutral-rgb), .14);
}
.showcase-process__bar span {
  display: block;
  width: 14%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  transition: width .35s ease;
}
.showcase-process__status {
  margin-top: .65rem !important;
  font-weight: 750;
  color: var(--c-primary) !important;
}
.showcase-process__trust {
  margin-top: .9rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.showcase-process__trust div {
  padding: .78rem .85rem;
  border-radius: 12px;
  background: rgba(var(--c-white-rgb), .78);
  border: 1px solid rgba(var(--c-primary-rgb), .09);
}
.showcase-process__trust strong {
  display: block;
  color: var(--c-text);
  font-weight: 900;
  margin-bottom: .18rem;
}
.showcase-process__trust span {
  display: block;
  color: var(--c-text-muted);
  font-size: .84rem;
  line-height: 1.35;
}
.showcase-process__card {
  padding: 1rem;
  display: grid;
  gap: .85rem;
  align-content: start;
}
.showcase-process__card h2 { margin: 0; font-size: 1rem; }
.showcase-process__timer {
  width: 78px;
  height: 78px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, var(--c-white) 54%, transparent 55%),
    conic-gradient(var(--c-accent), rgba(var(--c-primary-rgb), .18));
  color: var(--c-primary);
}
.showcase-process__timer span { font-size: 1.4rem; font-weight: 950; line-height: 1; }
.showcase-process__timer small { font-size: .68rem; color: var(--c-text-muted); margin-left: .12rem; }
.showcase-process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .48rem;
}
.showcase-process__steps li {
  padding: .64rem .72rem;
  border-radius: 10px;
  background: rgba(var(--c-neutral-rgb), .08);
  color: var(--c-text-muted);
  font-weight: 750;
  font-size: .9rem;
}
.showcase-process__steps li.is-active {
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.showcase-process__steps li.is-done::before {
  content: "✓ ";
  color: var(--c-accent-dark);
}
.showcase-process__safe {
  margin: 0;
  font-size: .83rem;
  line-height: 1.35;
  color: var(--c-text-muted);
}

@media (max-width: 760px) {
  .showcase-process { padding: 1rem 0 2.2rem; }
  .showcase-process__grid { grid-template-columns: 1fr; gap: .75rem; }
  .showcase-process__main,
  .showcase-process__card { padding: 1rem; }
  .showcase-process__trust { grid-template-columns: 1fr; gap: .5rem; }
}

/* ---------- Trust strip ---------- */

.trust-strip {
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 0;
}
@media (min-width: 720px) { .trust-strip__inner { grid-template-columns: repeat(4, 1fr); } }
.trust-strip__cell {
  text-align: center;
  padding: 1.1rem 1rem;
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.trust-strip__cell:nth-child(2n) { border-right: 0; }
@media (min-width: 720px) {
  .trust-strip__cell { border-bottom: 0; border-right: 1px solid var(--c-border); }
  .trust-strip__cell:last-child { border-right: 0; }
  .trust-strip__cell:nth-child(2n) { border-right: 1px solid var(--c-border); }
  .trust-strip__cell:last-child { border-right: 0; }
}
.trust-strip__value {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0;
}
.trust-strip__label { font-size: .82rem; color: var(--c-text-muted); margin-top: .15rem; }

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--bg-primary-accent-gradient-10);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  position: relative;
  box-shadow: var(--c-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-height: 220px;
}
.step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .35rem;
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-primary-bright-gradient);
  color: var(--c-white);
  font-weight: 800;
  font-size: 1.25rem;
  box-shadow: var(--c-shadow-primary);
}
.step__icon { width: 52px; height: 52px; color: var(--c-accent-dark); opacity: .85; }
.step__icon svg { width: 100%; height: 100%; }
.step__title { font-size: 1.15rem; color: var(--c-primary); margin-bottom: .15rem; }
.step__text { color: var(--c-text-muted); font-size: .95rem; flex: 1; }
.step__cta { margin-top: .8rem; align-self: flex-start; }

/* ---------- Quiz ---------- */

.quiz {
  max-width: 820px;
  margin: 0 auto;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 1.6rem 1.3rem 1.8rem;
  box-shadow: var(--c-shadow);
}
@media (min-width: 720px) { .quiz { padding: 2rem 2rem 2.2rem; } }

.quiz__progress {
  height: 8px;
  background: var(--c-bg-tint);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1.4rem;
}
.quiz__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  width: 0%;
  transition: width .35s ease;
}
.quiz__step { display: none; }
.quiz__step[data-active="true"] { display: block; }
.quiz__meta-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}
.quiz__step-tag {
  display: inline-flex;
  align-items: center;
  font-size: .76rem;
  font-weight: 700;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.quiz__step-tag--neutral {
  color: var(--c-text-muted);
  background: var(--c-bg-soft);
}
.quiz__question {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.4rem);
  margin-bottom: 1rem;
  color: var(--c-primary);
  font-weight: 800;
  line-height: 1.25;
}
.quiz__answers {
  display: grid;
  gap: .55rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .quiz__answers { grid-template-columns: repeat(2, 1fr); } }
.quiz__answer {
  border: 2px solid var(--c-border);
  background: var(--c-white);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  color: var(--c-text);
  min-height: 56px;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.quiz__answer:hover,
.quiz__answer:focus-visible {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  transform: translateY(-1px);
  box-shadow: var(--c-shadow-sm);
}

.quiz__loading {
  text-align: center;
  padding: 1.6rem 1rem 1.2rem;
}
.quiz__spinner {
  display: inline-flex;
  gap: .55rem;
  margin-bottom: 1.2rem;
}
.quiz__spinner span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  opacity: .35;
  animation: quizPulse 1.2s ease-in-out infinite;
}
.quiz__spinner span:nth-child(2) { animation-delay: .18s; }
.quiz__spinner span:nth-child(3) { animation-delay: .36s; }
@keyframes quizPulse {
  0%, 80%, 100% { opacity: .35; transform: scale(1); }
  40%           { opacity: 1;   transform: scale(1.35); }
}
.quiz__loading-title { color: var(--c-primary); font-weight: 700; font-size: 1.1rem; margin-bottom: .35rem; }
.quiz__loading-sub { font-size: .9rem; }

.quiz__result {
  text-align: center;
  background: var(--bg-primary-dark-gradient);
  color: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.2rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.quiz__result-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 5px 12px;
  background: var(--bg-accent-bright-gradient);
  color: var(--c-white);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .8rem;
  box-shadow: var(--c-shadow-accent);
}
.quiz__result-badge svg { color: var(--c-white); }
.quiz__result-title {
  color: var(--c-white);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.4rem);
  margin-bottom: 1.2rem;
  line-height: 1.3;
}
.quiz__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-bottom: 1.1rem;
}
@media (min-width: 600px) { .quiz__metrics { grid-template-columns: repeat(4, 1fr); } }
.quiz__metric {
  background: rgba(var(--c-white-rgb), .08);
  border: 1px solid rgba(var(--c-white-rgb), .12);
  border-radius: 12px;
  padding: .65rem .7rem;
  text-align: center;
}
.quiz__metric-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(var(--c-white-rgb), .65);
}
.quiz__metric-value {
  font-size: .98rem;
  font-weight: 800;
  margin-top: 2px;
  color: var(--c-white);
}
.quiz__countdown {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(var(--c-white-rgb), .12);
  border: 1px dashed rgba(var(--c-white-rgb), .35);
  font-size: .88rem;
  margin-bottom: 1rem;
}
.quiz__countdown b { font-variant-numeric: tabular-nums; }
.quiz__result-foot {
  font-size: .78rem;
  color: rgba(var(--c-white-rgb), .75);
  margin-top: .7rem;
}

/* ---------- Quiz section: messenger + live feed ---------- */

.quiz-section {
  background:
    radial-gradient(circle at 12% 12%, rgba(var(--c-accent-rgb), .12), transparent 22rem),
    radial-gradient(circle at 88% 90%, rgba(var(--c-primary-rgb), .10), transparent 26rem),
    linear-gradient(135deg, rgba(var(--c-primary-rgb), .045), rgba(var(--c-accent-rgb), .09));
}
.quiz-section--messenger { padding-block: 2.6rem; }
.quiz-section__head { margin-bottom: 1.4rem; max-width: 720px; }
.quiz-section__head .section__title { margin-bottom: .55rem; }
.quiz-section__head .section__sub { color: var(--c-text-muted); }

.quiz-grid--messenger {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: stretch;
}
@media (min-width: 920px) {
  .quiz-grid--messenger {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .8fr);
    gap: 1.4rem;
  }
}

/* ----- Messenger chat column ----- */
.quiz--messenger {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 560px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-white);
  border: 1px solid rgba(var(--c-primary-rgb), .14);
  box-shadow: var(--c-shadow);
}

.quiz-chat__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .85rem 1rem;
  background: var(--bg-primary-bright-gradient, linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)));
  color: var(--c-white);
}
.quiz-chat__consultant {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--c-white-rgb), .18);
  border: 1px solid rgba(var(--c-white-rgb), .35);
}
.quiz-chat__consultant img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(15, 23, 42, .25));
}
.quiz-chat__pulse {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 2px solid var(--c-white);
  box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb), .65);
  animation: quiz-pulse 2.2s ease-out infinite;
}
@keyframes quiz-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb), .55); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--c-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb), 0); }
}
.quiz-chat__title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-white);
  line-height: 1.15;
}
.quiz-chat__title .quiz-chat__presence {
  margin: .15rem 0 0;
  font-size: .78rem;
  color: rgba(var(--c-white-rgb), .82);
}
.quiz-chat__status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .55rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--c-white);
  background: rgba(var(--c-white-rgb), .18);
  border-radius: 999px;
  border: 1px solid rgba(var(--c-white-rgb), .25);
}
.quiz-chat__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), .25);
}

.quiz-chat__progress {
  height: 4px;
  background: rgba(var(--c-primary-rgb), .08);
  overflow: hidden;
}
.quiz-chat__progress-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.quiz-chat__body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(var(--c-primary-rgb), .03), rgba(var(--c-accent-rgb), .04)),
    var(--c-bg-soft);
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.quiz-chat__msg {
  display: flex;
  width: 100%;
}
/* The class-based `display: flex` above wins over the UA's `[hidden]
   { display: none }` rule on specificity, so we need an explicit override
   for both .quiz-chat__msg and .quiz-chat__step. Otherwise the typing
   bubble and pending steps stay visible all the time. */
.quiz-chat__msg[hidden],
.quiz-chat__step[hidden],
.quiz-chat__bubble[hidden],
[data-quiz-user-reply][hidden] {
  display: none !important;
}
.quiz-chat__msg--bot { justify-content: flex-start; }
.quiz-chat__msg--user { justify-content: flex-end; }
.quiz-chat__msg--bot,
.quiz-chat__msg--user {
  animation: quiz-bubble-in .32s cubic-bezier(.22, 1, .36, 1);
}
@keyframes quiz-bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quiz-chat__bubble {
  position: relative;
  display: inline-block;
  max-width: min(85%, 460px);
  padding: .68rem .88rem;
  background: var(--c-white);
  border: 1px solid rgba(var(--c-primary-rgb), .1);
  border-radius: 16px 16px 16px 4px;
  box-shadow: var(--c-shadow-xs);
  color: var(--c-text);
  font-size: .92rem;
  line-height: 1.4;
}
.quiz-chat__bubble p { margin: 0; }
.quiz-chat__bubble--user {
  background: var(--bg-primary-bright-gradient, linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)));
  color: var(--c-white);
  border-color: transparent;
  border-radius: 16px 16px 4px 16px;
}
.quiz-chat__bubble--small {
  padding: .42rem .68rem;
  font-size: .82rem;
  color: var(--c-text-muted);
  background: rgba(var(--c-primary-rgb), .04);
}
.quiz-chat__bubble--question {
  padding: .72rem .9rem;
  background: var(--c-white);
  border-color: rgba(var(--c-primary-rgb), .18);
  box-shadow: var(--c-shadow-sm);
}
.quiz-chat__tag {
  display: inline-block;
  padding: .14rem .42rem;
  margin-bottom: .35rem;
  border-radius: 999px;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.quiz-chat__question {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.3;
}

/* Typing indicator */
.quiz-chat__bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .55rem .75rem;
}
.quiz-chat__bubble--typing span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-primary);
  opacity: .55;
  animation: quiz-typing-dot 1.1s ease-in-out infinite;
}
.quiz-chat__bubble--typing span:nth-child(2) { animation-delay: .18s; }
.quiz-chat__bubble--typing span:nth-child(3) { animation-delay: .36s; }
@keyframes quiz-typing-dot {
  0%, 100% { transform: translateY(0); opacity: .4; }
  40%      { transform: translateY(-4px); opacity: 1; }
}

/* Steps — hidden by default, shown when data-quiz-active="true" */
.quiz-chat__step {
  display: none;
  flex-direction: column;
  gap: .55rem;
}
.quiz-chat__step[data-quiz-active="true"] { display: flex; }
.quiz-chat__step[data-quiz-completed="true"] .quiz-chat__input { display: none; }
.quiz-chat__step[data-quiz-active="true"] .quiz-chat__input { display: flex; }

.quiz-chat__input {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-left: 32px;
  padding: .68rem;
  background: rgba(var(--c-white-rgb), .96);
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  border-radius: 14px;
  box-shadow: var(--c-shadow-xs);
}
.quiz-chat__input--chips {
  flex-direction: row;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: .2rem 0 .2rem 32px;
  gap: .4rem;
}

.quiz-chat__chip {
  display: inline-flex;
  align-items: center;
  padding: .5rem .85rem;
  min-height: 38px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--c-primary);
  background: var(--c-white);
  border: 1px solid rgba(var(--c-primary-rgb), .25);
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .12s;
}
.quiz-chat__chip:hover,
.quiz-chat__chip:focus-visible {
  background: rgba(var(--c-accent-rgb), .14);
  border-color: var(--c-accent);
  color: var(--c-accent-dark);
  outline: none;
}
.quiz-chat__chip:active { transform: scale(.97); }

.quiz-chat__confirm {
  min-height: 44px;
  font-size: .92rem;
}

/* Range slider inside chat */
.quiz-range {
  display: grid;
  gap: .4rem;
}
.quiz-range__value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
.quiz-range__value span,
.quiz-range__limits {
  color: var(--c-text-muted);
  font-size: .76rem;
}
.quiz-range__value strong {
  color: var(--c-primary);
  font-size: 1.14rem;
}
/* Range slider — та же техника, что и в калькуляторе: вся линия покрашена
   gradient primary→accent, без разделения на filled/unfilled. Иначе системный
   фон даёт чёрный на desktop-Chrome и белый на iOS-Safari (поведение
   accent-color: только filled-часть кастомная). */
.quiz-range input[type="range"] {
  width: 100%;
  height: 5px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  border-radius: 999px;
  outline: none;
}
.quiz-range input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  background: transparent;
  border-radius: 999px;
}
.quiz-range input[type="range"]::-moz-range-track {
  height: 5px;
  background: transparent;
  border-radius: 999px;
}
.quiz-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6.5px;
  background: var(--c-white);
  border: 3px solid var(--c-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--c-shadow-sm);
}
.quiz-range input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--c-white);
  border: 3px solid var(--c-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--c-shadow-sm);
}
.quiz-range input[type="range"]:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}
.quiz-range__limits {
  display: flex;
  justify-content: space-between;
}

/* Result card */
.quiz-chat__result {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  max-width: min(94%, 480px);
  padding: 1rem;
  border-radius: 16px 16px 16px 4px;
  background: var(--bg-primary-bright-gradient, linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)));
  color: var(--c-white);
  border: 0;
}
.quiz-chat__badge {
  display: inline-block;
  width: fit-content;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: rgba(var(--c-white-rgb), .18);
  color: var(--c-white);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.quiz-chat__result-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--c-white);
}
.quiz-chat__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: 0;
}
@media (min-width: 520px) { .quiz-chat__metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.quiz-chat__metrics > div {
  padding: .55rem .6rem;
  background: rgba(var(--c-white-rgb), .12);
  border-radius: 10px;
  border: 1px solid rgba(var(--c-white-rgb), .14);
}
.quiz-chat__metrics dt {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(var(--c-white-rgb), .72);
}
.quiz-chat__metrics dd {
  margin: .12rem 0 0;
  font-size: .85rem;
  font-weight: 800;
  color: var(--c-white);
}
.quiz-chat__countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .75rem;
  background: rgba(var(--c-accent-rgb), .22);
  border: 1px solid rgba(var(--c-accent-rgb), .42);
  border-radius: 12px;
  font-size: .82rem;
}
.quiz-chat__countdown strong {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
}
.quiz-chat__cta {
  margin-top: .25rem;
}

/* ----- Live feed column ----- */
.quiz-live {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
  padding: 1.1rem;
  border-radius: var(--radius-lg);
  background: var(--c-white);
  border: 1px solid rgba(var(--c-primary-rgb), .14);
  box-shadow: var(--c-shadow);
  overflow: hidden;
}
.quiz-live::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 18rem;
  height: 18rem;
  background: radial-gradient(circle, rgba(var(--c-accent-rgb), .14), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.quiz-live > * { position: relative; z-index: 1; }

.quiz-live__head {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.quiz-live__chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: fit-content;
  padding: .22rem .58rem;
  border-radius: 999px;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* quiz-live__chip overrides the generic chip; suppress the default dot
   from chip-style ::before so we don't paint two dots side-by-side. */
.quiz-live__chip::before { content: none; }
.quiz-live__pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb), .65);
  animation: quiz-pulse 2s ease-out infinite;
}
.quiz-live__head h3 {
  margin: 0;
  color: var(--c-primary);
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.25;
}
.quiz-live__head p {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .85rem;
}

.quiz-live__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.quiz-live__stat {
  padding: .65rem .55rem;
  border-radius: 12px;
  background: rgba(var(--c-primary-rgb), .045);
  border: 1px solid rgba(var(--c-primary-rgb), .08);
  text-align: center;
}
.quiz-live__stat strong {
  display: block;
  font-size: 1.18rem;
  font-weight: 900;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  transition: transform .25s ease, color .35s ease;
}
.quiz-live__stat strong.is-bumped {
  transform: scale(1.12);
  color: var(--c-accent-dark);
}
.quiz-live__stat span {
  display: block;
  margin-top: .15rem;
  color: var(--c-text-muted);
  font-size: .7rem;
  line-height: 1.2;
}

.quiz-live__list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.quiz-live__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  padding: .65rem .72rem;
  background: var(--c-white);
  border: 1px solid rgba(var(--c-primary-rgb), .1);
  border-radius: 12px;
  box-shadow: var(--c-shadow-xs);
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.quiz-live__row.is-active {
  background: linear-gradient(135deg, rgba(var(--c-accent-rgb), .12), rgba(var(--c-primary-rgb), .04));
  border-color: rgba(var(--c-accent-rgb), .35);
}
.quiz-live__row.is-new {
  animation: quiz-live-pop .9s ease-out;
  border-color: rgba(var(--c-accent-rgb), .65);
  box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), .18), var(--c-shadow-sm);
}
@keyframes quiz-live-pop {
  0%   { transform: translateY(-8px) scale(.97); opacity: 0; background: rgba(var(--c-accent-rgb), .22); }
  40%  { transform: translateY(0) scale(1.02); opacity: 1; background: rgba(var(--c-accent-rgb), .18); }
  100% { transform: translateY(0) scale(1); opacity: 1; background: var(--c-white); }
}
.quiz-live__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--c-white);
  background: var(--bg-primary-bright-gradient, linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)));
  font-weight: 900;
  font-size: .9rem;
}
.quiz-live__who { min-width: 0; }
.quiz-live__who strong {
  display: block;
  color: var(--c-text);
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quiz-live__where {
  display: block;
  color: var(--c-text-muted);
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quiz-live__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
}
.quiz-live__status {
  display: inline-block;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: .7rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .02em;
}
.quiz-live__status--approved {
  color: var(--c-accent-dark);
  background: var(--c-accent-soft);
}
.quiz-live__status--review {
  color: var(--c-warning-text);
  background: var(--c-warning-soft);
}
.quiz-live__status--delivery {
  color: var(--c-primary);
  background: var(--c-primary-soft);
}
.quiz-live__ago {
  font-size: .68rem;
  color: var(--c-text-faint);
  font-variant-numeric: tabular-nums;
}

/* In-progress status badges (review/delivery) get bouncing dots inline
   to mirror the messenger-style "typing" indicator. Approved stays static. */
.quiz-live__status-dots {
  display: inline-flex;
  gap: 2px;
  margin-right: 5px;
  vertical-align: middle;
  line-height: 0;
}
.quiz-live__status-dots span {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  animation: quiz-status-dot 1.1s ease-in-out infinite;
}
.quiz-live__status-dots span:nth-child(2) { animation-delay: .18s; }
.quiz-live__status-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes quiz-status-dot {
  0%, 100% { transform: translateY(0); opacity: .4; }
  40%      { transform: translateY(-2px); opacity: 1; }
}

.quiz-live__cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .72rem .8rem;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(var(--c-primary-rgb), .08), rgba(var(--c-accent-rgb), .12));
  border: 1px solid rgba(var(--c-primary-rgb), .12);
}
.quiz-live__cta-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.quiz-live__cta-fact {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .55rem;
  background: var(--c-white);
  border: 1px solid rgba(var(--c-primary-rgb), .1);
  border-radius: 10px;
  box-shadow: var(--c-shadow-xs);
  min-width: 0;
}
.quiz-live__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-primary-bright-gradient, linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)));
  color: var(--c-white);
  flex-shrink: 0;
}
.quiz-live__cta-icon svg { width: 16px; height: 16px; display: block; }
.quiz-live__cta-fact--accent .quiz-live__cta-icon {
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
}
.quiz-live__cta-fact-text { min-width: 0; }
.quiz-live__cta-fact-text strong {
  display: block;
  font-size: .92rem;
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quiz-live__cta-fact-text span {
  display: block;
  margin-top: 1px;
  font-size: .68rem;
  color: var(--c-text-muted);
  line-height: 1.2;
}

.quiz-live__btn {
  position: relative;
  margin: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}
.quiz-live__btn-text {
  position: relative;
  z-index: 1;
}
.quiz-live__btn-arrow {
  position: relative;
  z-index: 1;
  transition: transform .25s ease;
}
.quiz-live__btn:hover .quiz-live__btn-arrow { transform: translateX(4px); }
/* Periodic shine pass across the CTA — subtle, no layout impact. */
.quiz-live__btn-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 255, 255, .32) 50%,
    transparent 70%);
  transform: translateX(-110%);
  pointer-events: none;
  animation: quiz-live-btn-shine 4.2s ease-in-out infinite;
}
@keyframes quiz-live-btn-shine {
  0%, 22%  { transform: translateX(-110%); }
  55%      { transform: translateX(110%); }
  100%     { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-live__btn-shine,
  .quiz-live__status-dots span,
  .quiz-chat__bubble--typing span,
  .quiz-live__pulse,
  .quiz-chat__pulse { animation: none; }
}

@media (max-width: 560px) {
  .quiz-section--messenger { padding-block: 2rem; }
  .quiz--messenger { min-height: 480px; }
  .quiz-chat__body { padding: .8rem; }
  .quiz-chat__input { margin-left: 0; }
  .quiz-chat__input--chips { padding-left: 0; }
  .quiz-live { padding: .9rem; }
  .quiz-live__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .quiz-live__stat strong { font-size: 1.02rem; }
  .quiz-live__stat span { font-size: .65rem; }
  .quiz-live__row { grid-template-columns: auto minmax(0, 1fr) auto; padding: .55rem .6rem; gap: .55rem; }
  .quiz-live__avatar { width: 30px; height: 30px; font-size: .82rem; }
  .quiz-live__meta { gap: .15rem; }
}

/* ---------- Tariffs (Phase 1D.2 redesign) ---------- */

.tariffs-section {
  background:
    radial-gradient(circle at 90% 8%, rgba(var(--c-accent-rgb), .07), transparent 24rem),
    var(--c-white);
}
.tariffs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: stretch;
}
@media (min-width: 720px)  { .tariffs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tariffs { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } }

.tariff {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.15rem 1.25rem;
  box-shadow: var(--c-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  /* Recommended выровнен по высоте со всеми остальными — выделение
     даём бейджем, рамкой и pulse-кнопкой, а не сдвигом translateY. */
}
.tariff:hover {
  transform: translateY(-3px);
  box-shadow: var(--c-shadow);
  border-color: var(--c-border-strong);
}
.tariff--recommended {
  border: 2px solid var(--c-accent);
  box-shadow: 0 14px 36px rgba(var(--c-accent-rgb), .22);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .12), transparent 14rem),
    linear-gradient(180deg, rgba(var(--c-accent-rgb), .04), var(--c-white) 55%);
  padding-top: 1.5rem;
}
.tariff--partner {
  background:
    linear-gradient(180deg, rgba(var(--c-primary-rgb), .035), var(--c-white) 55%);
}
.tariff__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
  color: var(--c-white);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  box-shadow: 0 6px 14px rgba(var(--c-accent-rgb), .35);
  white-space: nowrap;
  z-index: 2;
}

.tariff__head {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.tariff__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  flex-shrink: 0;
}
.tariff--recommended .tariff__icon {
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
  color: var(--c-white);
  box-shadow: 0 6px 14px rgba(var(--c-accent-rgb), .3);
}
.tariff--partner .tariff__icon {
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .15), rgba(var(--c-primary-rgb), .08));
  color: var(--c-primary);
}
.tariff__icon svg { width: 22px; height: 22px; display: block; }
.tariff__title { min-width: 0; }
.tariff__title h3 {
  font-size: 1rem;
  color: var(--c-primary);
  margin: 0;
  line-height: 1.2;
  font-weight: 800;
}
.tariff__sub {
  font-size: .78rem;
  color: var(--c-text-muted);
  margin: .12rem 0 0;
  line-height: 1.25;
}

/* dl-grid вместо table — лучше управляется CSS и а11y. */
.tariff__matrix {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  font-size: .88rem;
  border: 1px solid rgba(var(--c-primary-rgb), .08);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(var(--c-primary-rgb), .025);
}
.tariff__matrix > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .65rem;
  padding: .45rem .65rem;
}
.tariff__matrix > div + div { border-top: 1px solid rgba(var(--c-primary-rgb), .07); }
.tariff__matrix dt {
  font-weight: 500;
  color: var(--c-text-muted);
  font-size: .82rem;
}
.tariff__matrix dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
  color: var(--c-text);
}
.tariff__matrix-total {
  background: rgba(var(--c-accent-rgb), .08);
}
.tariff--recommended .tariff__matrix-total {
  background: rgba(var(--c-accent-rgb), .14);
}
.tariff__matrix-total dt {
  color: var(--c-text);
  font-weight: 700;
}
.tariff__matrix-total dd strong {
  color: var(--c-accent-dark);
  font-size: .96rem;
}

.tariff__perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.tariff__perks li {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  font-size: .85rem;
  color: var(--c-text);
  line-height: 1.35;
}
.tariff__perks li svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  padding: 2px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  margin-top: 1px;
}

.tariff__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.tariff__cta svg { transition: transform .2s ease; }
.tariff__cta:hover svg { transform: translateX(3px); }
.tariff:not(.tariff--recommended) .tariff__cta {
  background: var(--c-white);
  color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
  box-shadow: none;
}
.tariff:not(.tariff--recommended) .tariff__cta:hover {
  background: var(--c-primary-soft);
}

/* ---------- Advantages (Phase 1D.2 comparison redesign) ---------- */

.adv-highlight {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--c-shadow-sm);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
@media (min-width: 720px) {
  .adv-highlight {
    grid-template-columns: 84px 1fr;
    padding: 2rem 2rem;
    align-items: start;
  }
}
.adv-highlight__icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--bg-primary-bright-gradient);
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--c-shadow-primary);
}
.adv-highlight__icon svg { width: 32px; height: 32px; }
.adv-highlight__title { font-size: 1.3rem; color: var(--c-primary); margin: 0 0 .35rem; }
.adv-highlight__lede { color: var(--c-text-muted); margin: 0 0 .9rem; }
.adv-highlight__perks { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.adv-highlight__perks li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  color: var(--c-text);
  font-size: .96rem;
}
.adv-highlight__check {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.adv-highlight__check svg { width: 14px; height: 14px; }

.adv-compare {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--c-shadow-sm);
}
.adv-compare__head,
.adv-compare__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 880px) {
  .adv-compare__head,
  .adv-compare__row {
    grid-template-columns: 1.1fr 1.3fr 1.3fr;
    align-items: stretch;
  }
}
.adv-compare__head {
  display: none;
  background: var(--bg-primary-accent-gradient-10);
  border-bottom: 1px solid var(--c-border);
}
@media (min-width: 880px) { .adv-compare__head { display: grid; } }
.adv-compare__row + .adv-compare__row { border-top: 1px solid var(--c-border); }

.adv-compare__col {
  padding: 1rem 1.2rem;
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
@media (max-width: 879px) {
  .adv-compare__col[data-label]::before {
    content: attr(data-label) ":";
    flex: 0 0 110px;
    color: var(--c-text-muted);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-top: 2px;
  }
}
.adv-compare__col--label {
  background: var(--c-bg-soft);
  border-right: 1px solid var(--c-border);
  font-weight: 700;
  color: var(--c-primary);
}
@media (max-width: 879px) {
  .adv-compare__col--label { border-right: 0; border-bottom: 1px solid var(--c-border); }
}
.adv-compare__col--ours {
  background: rgba(var(--c-accent-rgb), .04);
}
.adv-compare__col--theirs {
  background: var(--c-white);
  color: var(--c-text-muted);
}
@media (min-width: 880px) {
  .adv-compare__col--ours { border-right: 1px solid var(--c-border); }
}

.adv-compare__icon {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--c-shadow-xs);
}
.adv-compare__icon svg { width: 18px; height: 18px; }
.adv-compare__title { font-size: 1rem; line-height: 1.3; }

.adv-compare__pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
}
.adv-compare__pill--ours   { background: var(--c-accent-soft); color: var(--c-accent-dark); }
.adv-compare__pill--theirs { background: var(--c-bg-soft); color: var(--c-text-muted); }

.adv-compare__mark {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.adv-compare__mark--check { background: var(--c-accent-soft); color: var(--c-accent-dark); }
.adv-compare__mark--cross { background: rgba(var(--c-neutral-rgb), .18); color: var(--c-text-muted); }
.adv-compare__mark svg { width: 14px; height: 14px; }

.adv-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.4rem;
  padding: 1.2rem 1.3rem;
  background: var(--bg-accent-primary-gradient-10);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  align-items: center;
}
@media (min-width: 720px) {
  .adv-cta { grid-template-columns: 1fr auto; gap: 1.4rem; }
}
.adv-cta__text { display: flex; flex-direction: column; gap: .25rem; }
.adv-cta__text strong { font-size: 1.05rem; color: var(--c-primary); }

/* ---------- Requirements ---------- */

.requirements {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  align-items: start;
}
@media (min-width: 960px) { .requirements { grid-template-columns: 1.05fr 1fr; } }

.req-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.4rem 1.6rem;
  box-shadow: var(--c-shadow-sm);
  position: relative;
  overflow: hidden;
}
/* Мягкий брендовый фон вместо явных «полосок» сверху. */
.req-card--conditions {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .07), transparent 16rem),
    var(--c-white);
}
.req-card--borrower {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .08), transparent 16rem),
    var(--c-white);
}
.req-card__head {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: 1rem;
}
.req-card__kicker {
  display: inline-block;
  width: fit-content;
  padding: .18rem .55rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  background: var(--c-accent-soft);
  border-radius: 999px;
}
.req-card h3 {
  color: var(--c-primary);
  font-size: 1.25rem;
  margin: 0;
  line-height: 1.25;
}

/* dl-условия — табличная структура с label/value, в отличие от старого .req-list. */
.req-conditions {
  margin: 0;
  display: grid;
  gap: 0;
  border: 1px solid rgba(var(--c-primary-rgb), .1);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(var(--c-primary-rgb), .025);
}
.req-conditions__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem;
  align-items: baseline;
  padding: .58rem .85rem;
  font-size: .92rem;
}
.req-conditions__row + .req-conditions__row {
  border-top: 1px solid rgba(var(--c-primary-rgb), .07);
}
.req-conditions__row dt {
  color: var(--c-text-muted);
  font-weight: 500;
}
.req-conditions__row dd {
  margin: 0;
  font-weight: 700;
  color: var(--c-text);
  text-align: right;
}

.req-divider {
  border: 0;
  border-top: 1px dashed var(--c-border);
  margin: 1.2rem 0;
}

/* Пример расчёта. */
.req-example-block {
  margin: 0;
}
.req-example-block__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 .7rem;
}
.req-example {
  margin: 0;
  display: grid;
  gap: 0;
  border: 1px solid rgba(var(--c-accent-rgb), .18);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(var(--c-accent-rgb), .04);
}
.req-example__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem;
  align-items: baseline;
  padding: .5rem .85rem;
  font-size: .92rem;
}
.req-example__row + .req-example__row {
  border-top: 1px solid rgba(var(--c-accent-rgb), .12);
}
.req-example__row dt {
  color: var(--c-text-muted);
  font-weight: 500;
}
.req-example__row dd {
  margin: 0;
  font-weight: 700;
  color: var(--c-text);
  text-align: right;
}
.req-example__row--accent dd {
  color: var(--c-accent-dark);
}
.req-example__row--total {
  background: linear-gradient(135deg, rgba(var(--c-accent-rgb), .14), rgba(var(--c-primary-rgb), .06));
  padding-block: .65rem;
  border-top: 1px solid rgba(var(--c-accent-rgb), .25) !important;
}
.req-example__row--total dt {
  color: var(--c-text);
  font-weight: 700;
}
.req-example__row--total dd strong {
  color: var(--c-accent-dark);
  font-size: 1.05rem;
}
.req-example-block__note {
  margin: .5rem 0 0;
  font-size: .82rem;
  font-style: italic;
  color: var(--c-text-muted);
}

.req-card__warn {
  margin-top: 1rem;
  display: flex;
  gap: .6rem;
  padding: .8rem 1rem;
  background: var(--c-warning-soft);
  border-radius: 12px;
  font-size: .88rem;
  color: var(--c-warning-text);
}
.req-card__warn svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--c-warning); }

.req-tips__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 .7rem;
}
.req-tips__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .55rem;
}
.req-tips__list li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  color: var(--c-text);
  font-size: .92rem;
  line-height: 1.4;
}
.req-tips__check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.req-tips__check svg { width: 13px; height: 13px; }

/* ---------- Wide example block — between 2 cards and lead-magnet ---------- */
.req-example-wide {
  position: relative;
  margin-top: 1.2rem;
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--c-primary-rgb), .07), transparent 22rem),
    radial-gradient(circle at 100% 100%, rgba(var(--c-accent-rgb), .08), transparent 22rem),
    linear-gradient(135deg, rgba(var(--c-primary-rgb), .035), rgba(var(--c-accent-rgb), .04));
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  box-shadow: var(--c-shadow-sm);
  overflow: hidden;
}
.req-example-wide__head {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
}
.req-example-wide__kicker {
  display: inline-block;
  width: fit-content;
  padding: .18rem .55rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  background: var(--c-accent-soft);
  border-radius: 999px;
}
.req-example-wide__title {
  margin: 0;
  color: var(--c-primary);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  line-height: 1.2;
  font-weight: 800;
}
.req-example-wide__lede {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .95rem;
  line-height: 1.45;
  max-width: 60ch;
}
.req-example-wide__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin-bottom: .75rem;
}
@media (min-width: 720px) {
  .req-example-wide__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .req-example-wide__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.req-example-wide__cell {
  padding: .65rem .75rem;
  background: var(--c-white);
  border: 1px solid rgba(var(--c-primary-rgb), .1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.req-example-wide__cell--total {
  background: linear-gradient(135deg, rgba(var(--c-accent-rgb), .15), rgba(var(--c-primary-rgb), .08));
  border-color: rgba(var(--c-accent-rgb), .35);
}
.req-example-wide__label {
  color: var(--c-text-muted);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.req-example-wide__value {
  color: var(--c-text);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.req-example-wide__value--accent { color: var(--c-accent-dark); }
.req-example-wide__value--total {
  color: var(--c-accent-dark);
  font-size: 1.15rem;
}
.req-example-wide__note {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .8rem;
  font-style: italic;
}
@media (max-width: 560px) {
  .req-example-wide { padding: 1.1rem 1rem 1.2rem; }
  .req-example-wide__value { font-size: .98rem; }
}

/* ---------- Inline CTA после блока с примером ---------- */
.req-cta {
  position: relative;
  margin-top: 1.2rem;
  padding: 1.5rem 1.4rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .08), transparent 22rem),
    radial-gradient(circle at 100% 100%, rgba(var(--c-accent-rgb), .12), transparent 22rem),
    linear-gradient(135deg, rgba(var(--c-primary-rgb), .04), rgba(var(--c-accent-rgb), .05));
  box-shadow: var(--c-shadow-sm);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  align-items: center;
}
@media (min-width: 880px) {
  .req-cta {
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .85fr);
    gap: 1.6rem;
    padding: 1.8rem 1.8rem;
  }
}

.req-cta__chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .22rem .65rem;
  margin-bottom: .55rem;
  background: rgba(var(--c-accent-rgb), .16);
  color: var(--c-accent-dark);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.req-cta__title {
  margin: 0 0 .5rem;
  color: var(--c-primary);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem);
  font-weight: 800;
  line-height: 1.2;
}
.req-cta__title em {
  font-style: normal;
  color: var(--c-accent-dark);
}
.req-cta__lede {
  margin: 0 0 1rem;
  color: var(--c-text);
  font-size: 1rem;
  line-height: 1.5;
}
.req-cta__reassure {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.req-cta__reassure li {
  display: inline-flex;
  align-items: center;
  padding: .3rem .68rem;
  background: rgba(var(--c-white-rgb), .72);
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  border-radius: 999px;
  color: var(--c-text-muted);
  font-size: .82rem;
  font-weight: 600;
}
.req-cta__reassure li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  margin-right: .42rem;
  flex-shrink: 0;
}

.req-cta__action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
}
@media (min-width: 880px) {
  .req-cta__action { align-items: flex-end; }
}
.req-cta__btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}
@media (min-width: 880px) {
  .req-cta__btn { width: auto; min-width: 220px; }
}
.req-cta__btn svg { transition: transform .2s ease; }
.req-cta__btn:hover svg { transform: translateX(4px); }
.req-cta__hint {
  font-size: .82rem;
  color: var(--c-text-muted);
  text-align: center;
}
@media (min-width: 880px) {
  .req-cta__hint { text-align: right; }
}

/* ---------- Reviews section (Phase 1D.3) ---------- */

.reviews-section {
  position: relative;
  overflow: hidden;
}
.reviews-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--c-primary-rgb), .07), transparent 22rem),
    radial-gradient(circle at 96% 88%, rgba(var(--c-accent-rgb), .08), transparent 22rem);
  pointer-events: none;
  z-index: 0;
}
.reviews-section > .container { position: relative; z-index: 1; }

.reviews-head { text-align: center; margin-bottom: 1.6rem; display: grid; gap: .65rem; justify-items: center; }
.reviews-head__chip { align-self: center; }
.reviews-head__h2 { margin: 0; }
.reviews-head__sub { max-width: 56rem; margin: 0 auto; }

/* Aggregate banner — горизонтальная карточка под заголовком: слева крупная
   оценка + звёзды, справа 3 метрики на пиктограммах. На широком — две зоны
   разделены вертикальной чертой, на mobile — стек. */
.reviews-aggregate {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--c-shadow-sm);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1.1rem;
  margin: 0 auto 2rem;
  max-width: 56rem;
  position: relative;
  overflow: hidden;
}
.reviews-aggregate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .07), transparent 14rem),
    radial-gradient(circle at 100% 100%, rgba(var(--c-accent-rgb), .09), transparent 14rem);
  pointer-events: none;
  z-index: 0;
}
.reviews-aggregate > * { position: relative; z-index: 1; }

@media (min-width: 720px) {
  .reviews-aggregate {
    grid-template-columns: minmax(180px, auto) 1fr;
    gap: 1.6rem;
    padding: 1.4rem 1.8rem;
  }
}

.reviews-aggregate__hero {
  display: grid;
  justify-items: center;
  gap: .25rem;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--c-border);
}
@media (min-width: 720px) {
  .reviews-aggregate__hero {
    padding-bottom: 0;
    padding-right: 1.6rem;
    border-bottom: 0;
    border-right: 1px dashed var(--c-border);
  }
}

.reviews-aggregate__score {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  font-variant-numeric: tabular-nums;
}
.reviews-aggregate__value {
  font-size: 2.6rem;
  font-weight: 850;
  line-height: 1;
  background: var(--bg-primary-bright-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.reviews-aggregate__of {
  font-size: .95rem;
  font-weight: 700;
  color: var(--c-text-muted);
  text-transform: lowercase;
}
.reviews-aggregate__stars {
  display: inline-flex;
  gap: 3px;
  color: var(--c-warning);
}
.reviews-aggregate__stars svg { width: 18px; height: 18px; }
.reviews-aggregate__stars svg.muted { color: var(--c-text-faint); }
.reviews-aggregate__caption {
  font-size: .76rem;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: .2rem;
}

/* Mobile-first: 3 компактных метрики в один ряд (раньше было 1×3 вертикально,
   что юзер справедливо назвал «центрированным списком»). Тонкие границы
   между ячейками задают ритм. На 720+ уходим в левое выравнивание без
   разделителей — там уже горизонтальный layout с hero рядом. */
.reviews-aggregate__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.reviews-aggregate__meta li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: .25rem .35rem;
  line-height: 1.2;
  text-align: center;
  min-width: 0;
}
.reviews-aggregate__meta li + li {
  border-left: 1px solid rgba(var(--c-primary-rgb), .12);
}
.reviews-aggregate__meta strong {
  font-size: 1.15rem;
  font-weight: 850;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}
.reviews-aggregate__meta span {
  font-size: .72rem;
  color: var(--c-text-muted);
  line-height: 1.25;
  display: block;
  overflow-wrap: anywhere;
}
@media (min-width: 560px) {
  .reviews-aggregate__meta { gap: .35rem; }
  .reviews-aggregate__meta strong { font-size: 1.3rem; }
  .reviews-aggregate__meta span { font-size: .78rem; }
}
@media (min-width: 720px) {
  .reviews-aggregate__meta { gap: 1rem; }
  .reviews-aggregate__meta li {
    align-items: flex-start;
    text-align: left;
    padding: 0;
  }
  .reviews-aggregate__meta li + li { border-left: 0; }
  .reviews-aggregate__meta strong { font-size: 1.4rem; }
  .reviews-aggregate__meta span { font-size: .82rem; }
}

/* ---- Slider ---- */

.reviews-slider {
  position: relative;
  padding: 0 0 .5rem;
}
.reviews-slider__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: .25rem .25rem 1.4rem;
  margin: 0 -.25rem;
  scrollbar-width: none;
}
.reviews-slider__track::-webkit-scrollbar { display: none; }

.review-card {
  flex: 0 0 calc(100% - .25rem);
  scroll-snap-align: start;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.4rem 1.3rem;
  box-shadow: var(--c-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.review-card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 4px;
  background: linear-gradient(90deg, rgba(var(--c-primary-rgb), .35), rgba(var(--c-accent-rgb), .55));
  opacity: .0;
  transition: opacity .25s ease;
}
.review-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--c-shadow);
  border-color: rgba(var(--c-primary-rgb), .25);
}
.review-card:hover::before { opacity: 1; }
@media (min-width: 720px)  { .review-card { flex-basis: calc(50% - .5rem); } }
@media (min-width: 1100px) { .review-card { flex-basis: calc(33.333% - .67rem); } }

.review-card__quote {
  position: absolute !important;
  top: -.4rem;
  right: 1rem;
  font-family: Georgia, "Times New Roman", "PT Serif", serif;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(var(--c-primary-rgb), .14);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* Quote-decoration уходит в подложку и не пересекается с rating/verified —
   они стоят в отдельной строке rating-row внутри z-index 1. */
/* Поднимаем над quote-decoration ВСЕ дети, кроме самого quote-декора. */
.review-card > *:not(.review-card__quote) { position: relative; z-index: 1; }

.review-card__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .8rem;
}
.review-card__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 56px;
  background: var(--c-primary-soft);
  box-shadow: var(--c-shadow-xs);
}
.review-card__avatar svg,
.review-card__avatar img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
/* Fallback SVG-аватарка: currentColor наследуется как брендовый primary,
   поэтому fallback автоматически перекрашивается под палитру бренда. */
.review-card__avatar .rvg-avatar { color: var(--c-primary); }
.review-card__who { min-width: 0; line-height: 1.25; }
.review-card__name { font-weight: 700; color: var(--c-text); font-size: 1.02rem; }
.review-card__loc {
  font-size: .82rem;
  color: var(--c-text-muted);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: 2px;
}
.review-card__sep { color: var(--c-text-faint); }
.review-card__date { font-variant-numeric: tabular-nums; }

.review-card__rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.review-card__rating {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  color: var(--c-warning);
}
.review-card__rating svg { width: 16px; height: 16px; }
.review-card__rating svg.muted { color: var(--c-text-faint); }

.review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: var(--c-accent-dark);
  background: var(--c-accent-soft);
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.review-card__verified svg { width: 12px; height: 12px; }

.review-card__body {
  color: var(--c-text);
  margin: 0;
  flex: 1;
  font-size: .98rem;
  line-height: 1.55;
}

.review-card__foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--c-border);
}
.review-card__tag {
  font-size: .76rem;
  color: var(--c-primary);
  background: rgba(var(--c-primary-rgb), .08);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .01em;
  font-weight: 600;
}

.reviews-slider__nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  color: var(--c-primary);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--c-shadow);
  z-index: 2;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
@media (min-width: 720px) { .reviews-slider__nav { display: inline-flex; } }
.reviews-slider__nav:hover:not(:disabled) {
  background: var(--c-primary-soft);
  transform: translateY(-50%) scale(1.04);
}
.reviews-slider__nav:disabled { opacity: .35; cursor: not-allowed; }
.reviews-slider__nav--prev { left: -22px; }
.reviews-slider__nav--next { right: -22px; }

.reviews-slider__dots {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: .6rem;
}
.reviews-slider__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 0;
  background: var(--c-border-strong);
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, transform .15s ease, width .2s ease;
}
.reviews-slider__dot:hover { background: var(--c-primary-soft-2); }
.reviews-slider__dot.is-active {
  background: var(--c-primary);
  width: 22px;
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .review-card,
  .reviews-slider__nav,
  .reviews-slider__dot { transition: none; }
  .review-card:hover { transform: none; }
}

/* ---------- FAQ ---------- */

/* FAQ — современный accordion с category-чипами. Иконка-стрелка использует
   inline SVG через currentColor — без хардкода primary/accent в data-URI
   (раньше там были фиксированные #1f3a8a/#16a34a, которые не реагировали
   на брендовые настройки). */
.faq {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: .55rem;
}
.faq__item {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-xs);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.faq__item:hover {
  border-color: rgba(var(--c-primary-rgb), .25);
  box-shadow: var(--c-shadow-sm);
  transform: translateY(-1px);
}
.faq__item[open] {
  border-color: rgba(var(--c-accent-rgb), .35);
  box-shadow: 0 8px 22px rgba(var(--c-primary-rgb), .08);
  background:
    linear-gradient(180deg, rgba(var(--c-accent-rgb), .04), var(--c-white) 60%);
}
.faq__item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  padding: .95rem 1.2rem;
  min-height: 56px;
  display: grid;
  /* Категория+вопрос упакованы в один .faq__head — слева в 1fr-колонке.
     Toggle всегда auto-колонка справа: на любой ширине прибит к правому
     краю. Раньше было grid-template-columns: auto 1fr auto и при
     display:none на чипе toggle сползал к центру. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  position: relative;
  color: var(--c-text);
  font-size: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }

/* Контейнер «тема + вопрос». На десктопе они в одной строке;
   на узких экранах chip уезжает над вопросом. */
.faq__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}
@media (max-width: 560px) {
  .faq__head {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }
}

/* Category chip — единый нейтральный стиль для всех тем, без «светофора».
   Раньше каждая категория имела свой цвет (primary/accent/warning/neutral)
   и в сумме это выглядело пёстро. Теперь все темы рендерятся одинаково,
   а смысловую разметку даёт сам текст темы. На открытом вопросе чип
   мягко подсвечивается accent — единственное «активное» состояние. */
.faq__cat {
  display: inline-flex;
  align-items: center;
  padding: .24rem .65rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--c-bg-soft);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  white-space: nowrap;
  line-height: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.faq__item[open] .faq__cat {
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  border-color: rgba(var(--c-accent-rgb), .25);
}

.faq__q {
  min-width: 0;
  line-height: 1.35;
}

.faq__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(var(--c-primary-rgb), .08);
  color: var(--c-primary);
  flex: 0 0 32px;
  transition: transform .25s ease, background .2s ease, color .2s ease;
}
.faq__toggle svg { width: 16px; height: 16px; display: block; }
.faq__item[open] .faq__toggle {
  background: rgba(var(--c-accent-rgb), .18);
  color: var(--c-accent-dark);
  transform: rotate(-180deg);
}
.faq__item summary:hover .faq__toggle {
  background: rgba(var(--c-primary-rgb), .14);
}
.faq__item summary:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}

.faq__answer {
  padding: 0 1.2rem 1.1rem;
  color: var(--c-text-muted);
  font-size: .96rem;
  line-height: 1.55;
}
.faq__answer p { margin: 0; padding-top: .25rem; }

.faq__more { text-align: center; margin-top: 1.4rem; }

@media (max-width: 480px) {
  .faq__item summary { padding: .85rem 1rem; gap: .6rem; }
  .faq__answer { padding: 0 1rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__item, .faq__toggle { transition: none; }
  .faq__item:hover { transform: none; }
}

/* ---------- Partners (Phase 1D.3) — заменяет старый .offers/.offer ---------- */
.partners-section {
  position: relative;
  overflow: hidden;
}
.partners-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 6% 0%, rgba(var(--c-primary-rgb), .07), transparent 22rem),
    radial-gradient(circle at 96% 90%, rgba(var(--c-accent-rgb), .08), transparent 22rem);
  pointer-events: none;
  z-index: 0;
}
.partners-section > .container { position: relative; z-index: 1; }

.partners-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
@media (min-width: 640px)  { .partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .partners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.2rem 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .35s ease;
  /* overflow: visible — иначе badge «Топ выбор» (top: -10px) обрезается */
}
.partners-grid { padding-top: 12px; }

@keyframes setmfo-spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

.partners-grid--personalizing {
  position: relative;
  min-height: 180px;
  align-items: start;
}
.partners-grid--personalizing .partner-card {
  display: none;
}
.partners-grid--personalizing::before,
.partners-grid--personalizing::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.partners-grid--personalizing::before {
  content: "";
  top: 38px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(var(--c-primary-rgb), .14);
  border-top-color: var(--c-accent);
  animation: setmfo-spin .8s linear infinite;
}
.partners-grid--personalizing::after {
  content: "Подбираем предложения под вашу историю";
  top: 86px;
  width: min(100%, 420px);
  padding: .85rem 1rem;
  border: 1px solid rgba(var(--c-primary-rgb), .14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--c-shadow-xs);
  color: var(--c-text);
  font-weight: 800;
  text-align: center;
}


/* Карточки в хвосте очереди (7+ или после клика/персонализации) скрыты
   из DOM-флоу. JS приводит их в видимость по мере «съезжания» очереди. */
.partner-card[data-partner-hidden] { display: none !important; }
.partner-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--c-shadow);
  border-color: rgba(var(--c-primary-rgb), .25);
}
.partner-card--top {
  border: 1.5px solid rgba(var(--c-accent-rgb), .4);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .12), transparent 14rem),
    linear-gradient(180deg, rgba(var(--c-accent-rgb), .04), var(--c-white) 50%);
  box-shadow: 0 14px 36px rgba(var(--c-accent-rgb), .22);
}
.partner-card__rank-pill {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
  color: var(--c-white);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  box-shadow: 0 6px 14px rgba(var(--c-accent-rgb), .35);
  white-space: nowrap;
  z-index: 2;
  /* Бейдж декоративный (aria-hidden) — клики пробивают его насквозь
     на overlay CTA, чтобы клик по любой точке карточки (включая бейдж)
     открывал партнёра. */
  pointer-events: none;
}
/* На всех карточках теперь есть бейдж → всем нужен верхний отступ под него.
   Раньше отступ ставился только .partner-card--top. */
.partner-card { padding-top: 1.5rem; }

.partner-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
}
.partner-card__logo {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 14px;
  background: rgba(var(--c-primary-rgb), .08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.partner-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.partner-card__initials {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--c-primary);
  letter-spacing: .04em;
}
.partner-card--top .partner-card__logo {
  background: linear-gradient(135deg, rgba(var(--c-accent-rgb), .14), rgba(var(--c-primary-rgb), .06));
}
.partner-card__title { min-width: 0; }
.partner-card__rank {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.partner-card__title h3 {
  margin: .15rem 0 0;
  color: var(--c-primary);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
}

.partner-card__metrics {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid rgba(var(--c-primary-rgb), .08);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(var(--c-primary-rgb), .025);
}
.partner-card__metrics > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .75rem;
  padding: .5rem .75rem;
  font-size: .9rem;
}
.partner-card__metrics > div + div {
  border-top: 1px solid rgba(var(--c-primary-rgb), .07);
}
.partner-card__metrics dt {
  color: var(--c-text-muted);
  font-weight: 500;
}
.partner-card__metrics dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
  color: var(--c-text);
}

.partner-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  /* ВАЖНО: переопределяем .btn { position: relative } на static, чтобы
     ::after-оверлей кнопки позиционировался от .partner-card (это её
     ближайший позиционированный родитель), а не от самой кнопки.
     Иначе клик работает только по кнопке. */
  position: static;
}
.partner-card__cta svg { transition: transform .2s ease; }
.partner-card__cta:hover svg { transform: translateX(3px); }
.partner-card:not(.partner-card--top) .partner-card__cta {
  background: var(--c-white);
  color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
  box-shadow: none;
}
.partner-card:not(.partner-card--top) .partner-card__cta:hover {
  background: var(--c-primary-soft);
}

/* Кликабельная карточка — клик в любой точке открывает партнёра.
   Реализовано через JS-делегирование в app.js::initPartners() (надёжнее
   ::after-оверлея, который ломается в превью с обёрткой ifr-host). */
.partner-card { cursor: pointer; }
.partner-card__cta:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.partners-note {
  text-align: center;
  font-size: .82rem;
  font-style: italic;
}

/* Visited / already-tried partner — мягкое затемнение + бейдж «уже знакомо». */
.partner-card--visited {
  opacity: .72;
  background: var(--c-bg-soft);
}
.partner-card--visited::after {
  content: "уже пробовали";
  position: absolute;
  top: .7rem;
  right: .7rem;
  padding: .2rem .55rem;
  background: rgba(var(--c-neutral-rgb), .2);
  color: var(--c-text-muted);
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.partner-card--visited .btn--pulse { animation: none; }

.partners-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1rem;
  background: var(--c-white);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--c-text-muted);
}

/* ---------- Old offers/offer (Phase 1D.2 redesign, оставлен для обратной совместимости — больше не используется на главной) ---------- */

.offers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 720px)  { .offers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .offers { grid-template-columns: repeat(3, 1fr); } }

.offer {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--c-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.offer:hover {
  transform: translateY(-3px);
  box-shadow: var(--c-shadow);
  border-color: var(--c-border-strong);
}
.offer--featured {
  border: 2px solid var(--c-accent);
  box-shadow: 0 18px 40px rgba(var(--c-accent-rgb), .18);
}

.offer__head {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}
.offer__logo {
  flex: 0 0 52px;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--bg-primary-bright-gradient);
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .04em;
  box-shadow: var(--c-shadow-primary);
}
.offer--featured .offer__logo { background: var(--bg-accent-bright-gradient); box-shadow: var(--c-shadow-accent); }

.offer__head-body { flex: 1; min-width: 0; }
.offer__title-row { display: flex; align-items: baseline; justify-content: space-between; gap: .55rem; }
.offer__title { font-size: 1.05rem; color: var(--c-primary); margin: 0; line-height: 1.25; }
.offer__rank {
  font-size: .8rem;
  font-weight: 700;
  color: var(--c-text-muted);
  background: var(--c-bg-soft);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.offer__sub { font-size: .82rem; color: var(--c-text-muted); margin: .1rem 0 .4rem; }
.offer__rating { display: flex; align-items: center; gap: .25rem; font-size: .82rem; flex-wrap: wrap; }
.offer__rating svg { width: 14px; height: 14px; color: var(--c-warning); }
.offer__rating svg.muted { color: var(--c-text-faint); }
.offer__rating-num { font-weight: 700; color: var(--c-text); margin: 0 .35rem 0 .25rem; }
.offer__approval { color: var(--c-accent-dark); font-weight: 600; }

.offer__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  background: var(--c-bg-soft);
  border-radius: var(--radius);
  padding: .75rem;
}
.offer__metric { text-align: center; }
.offer__metric-label { font-size: .72rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.offer__metric-value { font-size: .95rem; font-weight: 700; color: var(--c-text); margin-top: 2px; }
.offer__metric-value--accent { color: var(--c-accent-dark); }

.offer__badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.offer__badge {
  font-size: .76rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-weight: 600;
}
.offer--featured .offer__badges .offer__badge:first-child {
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
}

.offer__cta { margin-top: auto; }
.offer__foot { font-size: .78rem; padding-top: .25rem; border-top: 1px dashed var(--c-border); }

/* ---------- Lead magnet (final CTA banner) ---------- */

.lead-magnet {
  background: var(--bg-primary-dark-gradient);
  color: var(--c-white);
  border-radius: var(--radius-xl);
  padding: 2rem 1.3rem;
  text-align: center;
  box-shadow: var(--c-shadow-lg);
  position: relative;
  overflow: hidden;
}
@media (min-width: 720px) { .lead-magnet { padding: 2.6rem 2rem; } }
.lead-magnet::before,
.lead-magnet::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(var(--c-white-rgb), .06);
  pointer-events: none;
}
.lead-magnet::before { top: -300px; left: 50%; transform: translateX(-50%); }
.lead-magnet::after  { bottom: -300px; left: 50%; transform: translateX(-50%); }
.lead-magnet > * { position: relative; }

.lead-magnet__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 5px 12px;
  background: rgba(var(--c-white-rgb), .12);
  color: var(--c-white);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .85rem;
}
.lead-magnet__chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(var(--c-accent-rgb), .25);
}
.lead-magnet__title {
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.2rem);
  margin: 0 0 .55rem;
  color: var(--c-white);
  line-height: 1.18;
}
.lead-magnet__lede {
  max-width: 580px;
  margin: 0 auto 1.4rem;
  color: rgba(var(--c-white-rgb), .82);
  font-size: 1rem;
  line-height: 1.55;
}
.lead-magnet__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
  max-width: 600px;
  margin: 0 auto 1.4rem;
}
@media (min-width: 720px) { .lead-magnet__metrics { grid-template-columns: repeat(4, 1fr); } }
.lead-magnet__metric {
  background: rgba(var(--c-white-rgb), .08);
  border: 1px solid rgba(var(--c-white-rgb), .14);
  border-radius: 12px;
  padding: .7rem .6rem;
  text-align: center;
}
.lead-magnet__metric-value { font-weight: 800; color: var(--c-white); font-size: 1rem; }
.lead-magnet__metric-label { font-size: .72rem; color: rgba(var(--c-white-rgb), .65); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.lead-magnet__actions {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: stretch;
  max-width: 520px;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .lead-magnet__actions { flex-direction: row; justify-content: center; }
  .lead-magnet__actions .btn { flex: 1; }
}
.lead-magnet__foot {
  margin-top: 1.1rem;
  font-size: .78rem;
  color: rgba(var(--c-white-rgb), .65);
  line-height: 1.5;
}

/* ----- Action variant (Phase 1D.3): 3-step process + trust chips ----- */
.lead-magnet--action { text-align: left; }
.lead-magnet--action .lead-magnet__head {
  text-align: center;
  margin-bottom: 1.4rem;
}
.lead-magnet--action .lead-magnet__title em {
  font-style: normal;
  color: var(--c-accent);
}
.lead-magnet__steps {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
}
@media (min-width: 720px) {
  .lead-magnet__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
  }
}
.lead-magnet__step {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1rem 1.05rem;
  background: rgba(var(--c-white-rgb), .07);
  border: 1px solid rgba(var(--c-white-rgb), .12);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.lead-magnet__step:hover {
  background: rgba(var(--c-white-rgb), .1);
  border-color: rgba(var(--c-accent-rgb), .35);
  transform: translateY(-2px);
}
.lead-magnet__step-num {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .15rem .55rem;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
  color: var(--c-white);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.lead-magnet__step-body { display: flex; flex-direction: column; gap: .15rem; }
.lead-magnet__step-body strong {
  color: var(--c-white);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
}
.lead-magnet__step-body span {
  color: rgba(var(--c-white-rgb), .8);
  font-size: .88rem;
  line-height: 1.4;
}
.lead-magnet__trust {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.lead-magnet__trust li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  background: rgba(var(--c-accent-rgb), .18);
  border: 1px solid rgba(var(--c-accent-rgb), .35);
  color: var(--c-white);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
}
.lead-magnet__trust svg {
  width: 14px;
  height: 14px;
  color: var(--c-accent);
}
.lead-magnet--action .lead-magnet__foot {
  text-align: center;
}

/* ---------- Floating mobile CTA — яркая, заметная ---------- */

.floating-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  display: flex;
  gap: .5rem;
  padding: 9px;
  border-radius: 18px;
  /* Яркий gradient primary→accent, чтобы кнопка выделялась
     поверх любого контента сайта. */
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  border: 1px solid rgba(var(--c-white-rgb), .25);
  box-shadow:
    0 -6px 22px rgba(var(--c-primary-rgb), .22),
    0 14px 40px rgba(var(--c-accent-rgb), .38),
    0 0 0 1px rgba(var(--c-white-rgb), .12) inset;
  isolation: isolate;
}
/* Лёгкое свечение снизу — притягивает взгляд. */
.floating-cta::after {
  content: "";
  position: absolute;
  inset: -16px -10px -12px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 80% at 50% 100%, rgba(var(--c-accent-rgb), .3), transparent 70%);
  pointer-events: none;
}
.floating-cta .btn { flex: 1; min-height: 50px; font-weight: 800; }
/* Ghost-кнопка (например «ТОП займов»): полупрозрачное стекло на gradient. */
.floating-cta .btn--ghost {
  background: rgba(var(--c-white-rgb), .18);
  color: var(--c-white);
  border: 1px solid rgba(var(--c-white-rgb), .4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.floating-cta .btn--ghost:hover { background: rgba(var(--c-white-rgb), .28); border-color: rgba(var(--c-white-rgb), .55); }
/* Основная CTA-кнопка: белая с акцентным текстом, контраст max. */
.floating-cta .btn--cta {
  background: var(--c-white);
  color: var(--c-primary);
  border: none;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
}
.floating-cta .btn--cta:hover { color: var(--c-accent-dark); }
.floating-cta .btn--pulse::after {
  background: rgba(var(--c-primary-rgb), .35);
}

/* Variant на странице /vitrina — одна большая кнопка, ещё ярче. */
.floating-cta--vitrina {
  padding: 10px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-primary));
  box-shadow:
    0 -8px 26px rgba(var(--c-accent-rgb), .28),
    0 18px 50px rgba(var(--c-accent-rgb), .45),
    0 0 0 1px rgba(var(--c-white-rgb), .18) inset;
}
.floating-cta--vitrina::after {
  background: radial-gradient(60% 80% at 50% 100%, rgba(var(--c-accent-rgb), .45), transparent 70%);
}
.floating-cta--vitrina .btn {
  flex: 1 1 100%;
  background: var(--c-white);
  color: var(--c-accent-dark);
  border: none;
  font-weight: 900;
  font-size: 1.05rem;
  min-height: 54px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .2);
}
.floating-cta--vitrina .btn:hover { color: var(--c-primary); transform: translateY(-1px); }

@media (min-width: 760px) { .floating-cta { display: none; } }


/* ---------- 404 ---------- */
.not-found-page {
  padding: clamp(2.4rem, 5vw, 4.8rem) 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(var(--c-accent-rgb), .18), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(var(--c-primary-rgb), .16), transparent 38%),
    var(--bg-primary-accent-gradient-10);
}
.not-found-page__grid {
  display: grid;
  gap: 1.2rem;
  align-items: stretch;
}
@media (min-width: 860px) {
  .not-found-page__grid { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
}
.not-found-page__main,
.not-found-page__card {
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  border-radius: var(--radius-xl);
  background: rgba(var(--c-white-rgb), .88);
  box-shadow: var(--c-shadow-soft);
}
.not-found-page__main {
  padding: clamp(1.35rem, 3vw, 2.2rem);
}
.not-found-page__main h1 {
  margin: .35rem 0 .65rem;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  line-height: 1.05;
  color: var(--c-primary);
}
.not-found-page__main p {
  margin: 0;
  max-width: 680px;
  color: var(--c-text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}
.not-found-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.3rem;
}
.not-found-page__card {
  padding: 1.2rem;
}
.not-found-page__card h2 {
  margin: 0 0 .85rem;
  font-size: 1.15rem;
}
.not-found-page__card ul {
  display: grid;
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.not-found-page__card li {
  display: grid;
  gap: .18rem;
  padding: .85rem .9rem;
  border-radius: var(--radius-md);
  background: var(--c-surface-soft);
}
.not-found-page__card a {
  color: var(--c-primary);
  font-weight: 800;
  text-decoration: none;
}
.not-found-page__card a:hover { color: var(--c-accent-dark); }
.not-found-page__card span {
  color: var(--c-text-muted);
  font-size: .92rem;
}
@media (max-width: 520px) {
  .not-found-page__actions .btn { width: 100%; }
}

/* ---------- Pages (article / contacts / privacy / 404 / inner) ---------- */

.page { padding: 2.4rem 0 3rem; }
.page__title {
  margin: 0 0 .55rem;
  font-size: clamp(1.55rem, 1.05rem + 1.4vw, 2.1rem);
}
.page__lead { margin: 0 0 1.4rem; color: var(--c-text-muted); font-size: 1.05rem; }

.inner-hero {
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--c-accent-rgb), .16), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(var(--c-primary-rgb), .16), transparent 36%),
    var(--bg-primary-accent-gradient-10);
  padding: 2.6rem 0 2.2rem;
}

/* =====================================================================
   /cabinet hero — двухколоночная секция с мокапом телефона справа.
   Все цвета через --c-primary / --c-accent / их rgb / alpha.
   Никаких HEX — поэтому при смене бренда вся сцена меняет цветовую гамму.
   ===================================================================== */

.cabinet-hero { padding: 2.8rem 0 2.6rem; }
.cabinet-hero__grid {
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: center;
}
@media (min-width: 900px) {
  .cabinet-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 2.4rem;
  }
}

/* --- Left column --- */
.cabinet-hero__eyebrow { margin-bottom: .9rem; }
.cabinet-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  /* 1.08 was too tight for Cyrillic descenders ("У" в Небус) — буква
     обрезалась снизу на десктопе, где font-size доходит до 3rem.
     1.18 даёт безопасный запас под низ глифов. */
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-text);
  font-weight: 800;
}
.cabinet-hero__title-em {
  font-style: normal;
  display: inline-block;
  /* background-clip: text + inline-block обрезает контент по line-height
     родителя. Подушка снизу гарантирует, что glyph-decender не клипается
     даже при тесном line-height. */
  padding-bottom: .08em;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cabinet-hero__lead {
  margin: 0 0 1.4rem;
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  color: var(--c-text-muted);
  line-height: 1.55;
  max-width: 540px;
}
.cabinet-hero__usp {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.cabinet-hero__usp li {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--c-text);
  font-weight: 600;
}
.cabinet-hero__usp svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.cabinet-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

/* --- Right column: phone mockup --- */
.cabinet-hero__right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 580px;
  /* На узких экранах мокап перетекает под левую колонку — оставляем
     дыхание сверху, чтобы не наезжал на CTA-кнопки. */
}

.cabinet-mockup {
  position: relative;
  display: block;
  width: 100%;
  max-width: 320px;
  text-decoration: none;
  color: var(--c-text);
  cursor: pointer;
  /* Hover-эффект всей карточки. */
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.cabinet-mockup:hover { transform: translateY(-6px); }
.cabinet-mockup:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 14px;
  border-radius: 44px;
}

/* Halo за устройством — мягкое цветное свечение в фирменной палитре. */
.cabinet-mockup__halo {
  position: absolute;
  inset: -28px;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--c-primary-rgb), .35), transparent 60%),
    radial-gradient(circle at 75% 80%, rgba(var(--c-accent-rgb), .35), transparent 60%);
  filter: blur(28px);
  opacity: .85;
  border-radius: 50%;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.cabinet-mockup:hover .cabinet-mockup__halo {
  opacity: 1;
  transform: scale(1.04);
}

/* Корпус телефона — тёмный градиент с edge-highlight. */
.cabinet-mockup__device {
  position: relative;
  z-index: 1;
  display: block;
  padding: 14px;
  border-radius: 38px;
  background:
    linear-gradient(160deg, #1f2937, #0f172a 65%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .08),
    0 30px 70px -20px rgba(0, 0, 0, .55),
    0 16px 30px -16px rgba(var(--c-primary-rgb), .35);
  animation: cabinet-mockup-float 6s ease-in-out infinite;
}
@keyframes cabinet-mockup-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Notch — динамический остров iPhone-style. */
.cabinet-mockup__notch {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 22px;
  background: #050505;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  z-index: 2;
}

/* Экран. */
.cabinet-mockup__screen {
  position: relative;
  display: block;
  border-radius: 28px;
  background: var(--c-white);
  padding: 50px 18px 18px;
  min-height: 540px;
  overflow: hidden;
}

.cabinet-mockup__statusbar {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 28px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--c-text);
  z-index: 3;
}
.cabinet-mockup__time { font-variant-numeric: tabular-nums; }
.cabinet-mockup__status-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-text);
}
.cabinet-mockup__status-icons svg { width: 14px; height: 10px; }

.cabinet-mockup__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.cabinet-mockup__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cabinet-mockup__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  font-weight: 800;
  font-size: .85rem;
}
.cabinet-mockup__brand-text {
  font-weight: 800;
  color: var(--c-primary);
  font-size: .95rem;
}
.cabinet-mockup__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--c-accent-rgb), .12);
  color: var(--c-accent-dark);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}
.cabinet-mockup__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb), .6);
  animation: cabinet-mockup-pulse-dot 1.6s ease-out infinite;
}
@keyframes cabinet-mockup-pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb), .55); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--c-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb), 0); }
}

.cabinet-mockup__hello {
  display: block;
  margin: 8px 0 16px;
}
.cabinet-mockup__hello-title {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.2;
}
.cabinet-mockup__hello-sub {
  display: block;
  margin-top: 4px;
  font-size: .76rem;
  color: var(--c-text-muted);
  line-height: 1.4;
}

.cabinet-mockup__field {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(var(--c-primary-rgb), .05);
  border: 1.5px solid rgba(var(--c-primary-rgb), .15);
  margin-bottom: 12px;
}
.cabinet-mockup__field-label {
  display: block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-muted);
  margin-bottom: 2px;
}
.cabinet-mockup__field-value {
  display: flex;
  align-items: center;
  font-size: .98rem;
  font-weight: 700;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.cabinet-mockup__caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  margin-left: 6px;
  background: var(--c-primary);
  animation: cabinet-mockup-caret 1s steps(2) infinite;
}
@keyframes cabinet-mockup-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.cabinet-mockup__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
  color: var(--c-white);
  font-weight: 800;
  font-size: .92rem;
  box-shadow: 0 8px 18px rgba(var(--c-accent-rgb), .35);
  transition: filter .2s ease, transform .2s ease;
}
.cabinet-mockup:hover .cabinet-mockup__cta {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.cabinet-mockup__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: .72rem;
  color: var(--c-text-muted);
  line-height: 1.4;
}
.cabinet-mockup__hint svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: var(--c-primary);
}

/* Уведомления-«нашлёпки» вокруг устройства. */
.cabinet-mockup__notice {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--c-white);
  box-shadow:
    0 14px 30px -10px rgba(0, 0, 0, .25),
    0 4px 10px -4px rgba(0, 0, 0, .15);
  max-width: 200px;
  pointer-events: none;
}
.cabinet-mockup__notice--top {
  top: 14%;
  right: -10%;
  animation: cabinet-mockup-notice-top 7s ease-in-out infinite;
}
.cabinet-mockup__notice--bottom {
  bottom: 12%;
  left: -10%;
  animation: cabinet-mockup-notice-bottom 7s ease-in-out infinite 1.5s;
}
@media (max-width: 420px) {
  .cabinet-mockup__notice--top    { right: 0; }
  .cabinet-mockup__notice--bottom { left: 0; }
}
@keyframes cabinet-mockup-notice-top {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes cabinet-mockup-notice-bottom {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
.cabinet-mockup__notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
  flex: 0 0 32px;
}
.cabinet-mockup__notice-icon svg { width: 18px; height: 18px; }
.cabinet-mockup__notice-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.cabinet-mockup__notice-text strong {
  font-size: .82rem;
  color: var(--c-text);
}
.cabinet-mockup__notice-text span {
  font-size: .72rem;
  color: var(--c-text-muted);
}

/* Уменьшение моушена для accessibility. */
@media (prefers-reduced-motion: reduce) {
  .cabinet-mockup__device,
  .cabinet-mockup__notice--top,
  .cabinet-mockup__notice--bottom,
  .cabinet-mockup__badge-dot,
  .cabinet-mockup__caret { animation: none; }
}

/* =====================================================================
   /cabinet — секции после hero: howto / features / security / app /
   reviews / faq. Никаких хардкод-цветов, всё на CSS-переменных бренда.
   ===================================================================== */

.section__head--start { text-align: left; margin-left: 0; margin-right: 0; }

/* Screen-reader-only хелпер — для микроразметки, которая нужна поисковикам,
   но не должна занимать место. Безопаснее, чем display:none, потому что
   ассистивные технологии всё равно видят содержимое. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Cabinet HowTo ---------- */
/* Карточки в имидже сайта (паттерн .req-card): белый фон + soft
   radial-gradient в углу из брендовых цветов. Никаких top-stripes. */
.cabinet-howto__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .cabinet-howto__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cabinet-howto__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cabinet-howto__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: 1.6rem 1.4rem 1.5rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cabinet-howto__step:hover {
  transform: translateY(-3px);
  box-shadow: var(--c-shadow);
  border-color: rgba(var(--c-primary-rgb), .25);
}
.cabinet-howto__step--a {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .09), transparent 16rem),
    var(--c-white);
}
.cabinet-howto__step--b {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .10), transparent 16rem),
    var(--c-white);
}
.cabinet-howto__step-num {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(var(--c-primary-rgb), .12);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.cabinet-howto__step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .12), rgba(var(--c-accent-rgb), .12));
  color: var(--c-primary);
  margin-bottom: .35rem;
}
.cabinet-howto__step-icon svg { width: 22px; height: 22px; }
.cabinet-howto__step h3 {
  margin: 0;
  font-size: 1.06rem;
  color: var(--c-primary);
  font-weight: 800;
  line-height: 1.25;
  padding-right: 2.4rem;
}
.cabinet-howto__step p {
  margin: 0;
  color: var(--c-text);
  font-size: .92rem;
  line-height: 1.55;
}

/* CTA-полоса под секцией. Двухколоночная — текст + кнопка. */
.cabinet-howto__cta,
.cabinet-features__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  margin-top: 1.6rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .12), transparent 22rem),
    radial-gradient(circle at 100% 100%, rgba(var(--c-accent-rgb), .12), transparent 22rem),
    var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-sm);
}
.cabinet-howto__cta-body,
.cabinet-features__cta-body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
  flex: 1 1 280px;
}
.cabinet-howto__cta-body strong,
.cabinet-features__cta-body strong {
  color: var(--c-primary);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
}
.cabinet-howto__cta-body span,
.cabinet-features__cta-body span {
  color: var(--c-text-muted);
  font-size: .92rem;
}

/* ---------- Cabinet Features ---------- */
.cabinet-features__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .cabinet-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cabinet-features__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cabinet-feature {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.3rem 1.3rem;
  box-shadow: var(--c-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cabinet-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--c-shadow);
  border-color: rgba(var(--c-primary-rgb), .25);
}
/* Два варианта тонировки фона — чередуем для визуальной живости. */
.cabinet-feature--a {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .08), transparent 16rem),
    var(--c-white);
}
.cabinet-feature--b {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .10), transparent 16rem),
    var(--c-white);
}
.cabinet-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .12), rgba(var(--c-accent-rgb), .12));
  color: var(--c-primary);
  margin-bottom: .9rem;
}
.cabinet-feature__icon svg { width: 24px; height: 24px; }
.cabinet-feature__eyebrow {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-accent-dark);
  margin-bottom: .25rem;
}
.cabinet-feature h3 {
  margin: 0 0 .5rem;
  font-size: 1.08rem;
  color: var(--c-primary);
  font-weight: 800;
  line-height: 1.2;
}
.cabinet-feature p {
  margin: 0 0 1rem;
  color: var(--c-text);
  font-size: .9rem;
  line-height: 1.55;
}
.cabinet-feature__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--c-primary);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--c-primary-rgb), .25);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease, gap .2s ease;
}
.cabinet-feature__link:hover {
  color: var(--c-accent-dark);
  border-color: var(--c-accent);
  gap: .6rem;
}

/* ---------- Cabinet Security ---------- */
.cabinet-security__grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
  align-items: stretch; /* колонки равные по высоте — без пустоты */
}
@media (min-width: 900px) {
  .cabinet-security__grid { grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 2.4rem; }
}
/* Левая колонка — целиком заполнена: shield + caption + чипы доверия,
   распределённые по высоте через space-between. */
.cabinet-security__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 2.2rem 1.6rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--c-primary-rgb), .12), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(var(--c-accent-rgb), .10), transparent 60%),
    rgba(var(--c-white-rgb), .65);
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  min-height: 380px;
}
.cabinet-security__shield {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  box-shadow: 0 22px 50px -10px rgba(var(--c-primary-rgb), .45);
  margin-top: .5rem;
}
.cabinet-security__shield svg { width: 76px; height: 76px; }
.cabinet-security__shield-ring,
.cabinet-security__shield-ring--lg {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(var(--c-primary-rgb), .25);
  animation: cabinet-security-pulse 2.6s ease-out infinite;
}
.cabinet-security__shield-ring--lg {
  inset: -28px;
  animation-delay: .8s;
  border-color: rgba(var(--c-accent-rgb), .25);
}
@keyframes cabinet-security-pulse {
  0%   { opacity: .8; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.15); }
}
.cabinet-security__caption {
  text-align: center;
  line-height: 1.45;
  max-width: 240px;
}
.cabinet-security__caption strong {
  display: block;
  color: var(--c-primary);
  font-size: 1.15rem;
  font-weight: 800;
}
.cabinet-security__caption span {
  display: block;
  color: var(--c-text-muted);
  font-size: .9rem;
  margin-top: 4px;
}
.cabinet-security__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
}
.cabinet-security__chips li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: rgba(var(--c-white-rgb), .9);
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  color: var(--c-text);
  font-size: .86rem;
  font-weight: 600;
}
.cabinet-security__chips svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}

.cabinet-security__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .8rem;
}
.cabinet-security__item {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--c-shadow-sm);
  transition: border-color .25s ease, transform .25s ease;
}
.cabinet-security__item:nth-child(odd) {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .07), transparent 14rem),
    var(--c-white);
}
.cabinet-security__item:nth-child(even) {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .08), transparent 14rem),
    var(--c-white);
}
.cabinet-security__item:hover {
  border-color: rgba(var(--c-accent-rgb), .35);
  transform: translateX(3px);
}
.cabinet-security__item > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
.cabinet-security__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  flex-shrink: 0;
}
.cabinet-security__item-icon svg { width: 22px; height: 22px; }
.cabinet-security__item h3 {
  margin: 0 0 .3rem;
  font-size: 1.02rem;
  color: var(--c-primary);
  font-weight: 800;
  line-height: 1.25;
}
.cabinet-security__item p {
  margin: 0;
  color: var(--c-text);
  font-size: .92rem;
  line-height: 1.55;
}

/* ---------- Cabinet App ---------- */
.cabinet-app__grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .cabinet-app__grid {
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
    gap: 2.6rem;
  }
}
.cabinet-app__visual {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cabinet-app__visual--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .25s ease;
}
.cabinet-app__visual--link:hover { transform: translateY(-4px); }
.cabinet-app__visual--link:hover .cabinet-app__halo { opacity: 1; }
.cabinet-app__visual--link:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 14px;
  border-radius: 24px;
}
.cabinet-app__halo { transition: opacity .25s ease; }
.cabinet-app__halo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 35% 40%, rgba(var(--c-primary-rgb), .25), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(var(--c-accent-rgb), .25), transparent 55%);
  filter: blur(34px);
  z-index: 0;
  opacity: .85;
  pointer-events: none;
}
.cabinet-app__phone {
  position: absolute;
  width: 220px;
  height: 440px;
  border-radius: 38px;
  background: linear-gradient(160deg, #1f2937, #0f172a);
  padding: 14px;
  z-index: 1;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.08),
    0 30px 70px -20px rgba(0,0,0,.55);
}
.cabinet-app__phone--back {
  transform: translate(-58px, -16px) rotate(-8deg);
  opacity: .96;
}
.cabinet-app__phone--front {
  transform: translate(58px, 28px) rotate(6deg);
  z-index: 2;
}
.cabinet-app__phone-screen {
  display: block;
  background: var(--c-bg-soft);
  border-radius: 28px;
  padding: 28px 14px 16px;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cabinet-app__phone-screen--front {
  background: var(--c-white);
  padding: 30px 14px 18px;
}

.cabinet-app__phone-status {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--c-text);
}
.cabinet-app__phone-status-time { font-variant-numeric: tabular-nums; }
.cabinet-app__phone-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cabinet-app__phone-status-icons svg { width: 13px; height: 10px; }

/* Back screen: greeting + balance + 3 actions. */
.cabinet-app__phone-greet {
  display: block;
  margin: 16px 4px 12px;
}
.cabinet-app__phone-greet-hi {
  display: block;
  font-size: .72rem;
  color: var(--c-text-muted);
  font-weight: 600;
}
.cabinet-app__phone-greet-sub {
  display: block;
  font-size: .92rem;
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1.2;
}
.cabinet-app__phone-balance {
  display: block;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  margin-bottom: 14px;
}
.cabinet-app__phone-balance-label {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .85;
}
.cabinet-app__phone-balance-value {
  display: block;
  margin-top: 4px;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.cabinet-app__phone-balance-date {
  display: block;
  margin-top: 4px;
  font-size: .68rem;
  opacity: .85;
}
.cabinet-app__phone-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.cabinet-app__phone-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px;
  border-radius: 12px;
  background: var(--c-white);
  border: 1px solid rgba(var(--c-primary-rgb), .1);
  font-size: .62rem;
  color: var(--c-text);
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}
.cabinet-app__phone-act-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.cabinet-app__phone-act-ico svg { width: 14px; height: 14px; }

/* Front screen: notify + mock receipt card + CTA. */
.cabinet-app__phone-notify {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(var(--c-accent-rgb), .12);
  border: 1px solid rgba(var(--c-accent-rgb), .22);
  margin: 14px 0;
}
.cabinet-app__phone-notify-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-white);
}
.cabinet-app__phone-notify-ico svg { width: 18px; height: 18px; }
.cabinet-app__phone-notify-body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.cabinet-app__phone-notify-body strong {
  font-size: .82rem;
  color: var(--c-text);
  font-weight: 800;
}
.cabinet-app__phone-notify-body span {
  font-size: .68rem;
  color: var(--c-text-muted);
}
.cabinet-app__phone-mockcard {
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--c-bg-soft);
  border: 1px solid rgba(var(--c-primary-rgb), .08);
  margin-bottom: 14px;
}
.cabinet-app__phone-mockcard-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  font-size: .72rem;
  color: var(--c-text-muted);
}
.cabinet-app__phone-mockcard-row + .cabinet-app__phone-mockcard-row {
  border-top: 1px solid rgba(var(--c-primary-rgb), .08);
}
.cabinet-app__phone-mockcard-row strong {
  color: var(--c-text);
  font-weight: 800;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.cabinet-app__phone-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
  color: var(--c-white);
  font-size: .88rem;
  font-weight: 800;
}

.cabinet-app__body { display: block; }
.cabinet-app__usp {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: grid;
  gap: .55rem;
}
.cabinet-app__usp li {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--c-text);
  font-weight: 600;
}
.cabinet-app__usp svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}

.cabinet-app__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 1rem;
}

.cabinet-app__stores {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: stretch;
  margin-top: 1rem;
}
.cabinet-app__store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--c-text);
  color: var(--c-white);
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.cabinet-app__store:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
  color: var(--c-white);
}
.cabinet-app__store-logo { width: 26px; height: 26px; }
.cabinet-app__store-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.cabinet-app__store-pre { font-size: .7rem; opacity: .85; }
.cabinet-app__store-name { font-size: 1rem; font-weight: 800; }

/* ---------- Cabinet Reviews ---------- */
/* Полностью наследует .reviews-section / .reviews-aggregate / .review-card
   / .reviews-slider с главной — никаких отдельных стилей не нужно.
   Этот блок-маркер оставлен для будущих cabinet-specific override. */
.cabinet-reviews-section {}

/* ---------- Cabinet FAQ ---------- */
/* Полностью наследует .faq-section / .faq / .faq__item / .faq__cat с главной.
   Cabinet-категории получают свои tint-цвета через .faq__cat--{cat}. */
/* /cabinet FAQ categories — НЕ переопределяем цвета: единый бренд-
   нейтральный стиль из базового .faq__cat (серый чип, accent на [open]). */

/* Reduced motion для всех cabinet-секций. */
@media (prefers-reduced-motion: reduce) {
  .cabinet-security__shield-ring,
  .cabinet-security__shield-ring--lg { animation: none; }
}
.inner-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  align-items: stretch;
}
@media (min-width: 900px) { .inner-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); } }
.inner-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .75rem;
  color: var(--c-primary);
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.inner-hero__eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 5px rgba(var(--c-accent-rgb), .16);
}
.inner-hero__title {
  max-width: 760px;
  margin: 0;
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: 0;
}
.inner-hero__lead {
  max-width: 720px;
  margin-top: .9rem;
  color: var(--c-text-muted);
  font-size: 1.06rem;
}
.inner-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.25rem;
}
.inner-card {
  background: rgba(var(--c-white-rgb), .92);
  border: 1px solid rgba(var(--c-white-rgb), .8);
  border-radius: var(--radius-xl);
  padding: 1.2rem;
  box-shadow: var(--c-shadow);
}
.inner-card--dark {
  background: var(--bg-primary-dark-gradient);
  color: var(--c-white);
  border: 0;
}
.inner-card--dark h2,
.inner-card--dark h3,
.inner-card--dark strong { color: var(--c-white); }
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.metric-box {
  padding: .85rem;
  border-radius: var(--radius);
  background: rgba(var(--c-white-rgb), .78);
  border: 1px solid rgba(var(--c-primary-rgb), .08);
}
.inner-card--dark .metric-box {
  background: rgba(var(--c-white-rgb), .1);
  border-color: rgba(var(--c-white-rgb), .16);
}
.metric-box__value {
  display: block;
  color: var(--c-primary);
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.1;
}
.inner-card--dark .metric-box__value { color: var(--c-white); }
.metric-box__label {
  display: block;
  margin-top: .25rem;
  color: var(--c-text-muted);
  font-size: .78rem;
}
.inner-card--dark .metric-box__label { color: rgba(var(--c-white-rgb), .72); }
.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 700px) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1050px) { .info-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.info-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  box-shadow: var(--c-shadow-xs);
}
.info-card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .85rem;
  border-radius: 14px;
  background: var(--bg-primary-accent-gradient-10);
  color: var(--c-primary);
  font-weight: 900;
}
.info-card h2,
.info-card h3 {
  margin: 0 0 .55rem;
  font-size: 1.12rem;
}
.info-card p,
.info-card li { color: var(--c-text-muted); }
.info-card ul,
.info-card ol { margin: .7rem 0 0; padding-left: 1.15rem; }
.info-card li + li { margin-top: .35rem; }
.process-list {
  counter-reset: step;
  display: grid;
  gap: .8rem;
}
.process-step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  padding: 1rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-xs);
}
.process-step::before {
  content: counter(step);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-primary-bright-gradient);
  color: var(--c-white);
  font-weight: 900;
}
.process-step h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.process-step p { color: var(--c-text-muted); }
.conversion-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
  background: var(--bg-primary-dark-gradient);
  color: var(--c-white);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--c-shadow-lg);
}
@media (min-width: 760px) { .conversion-band { grid-template-columns: minmax(0, 1fr) auto; padding: 1.5rem; } }
.conversion-band h2,
.conversion-band h3 { color: var(--c-white); margin: 0 0 .45rem; }
.conversion-band p { color: rgba(var(--c-white-rgb), .76); }
.conversion-band .btn { white-space: nowrap; }
.compact-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--radius);
}
.compact-table th,
.compact-table td {
  padding: .8rem;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
}
.compact-table th {
  background: var(--c-bg-soft);
  font-size: .78rem;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.promo-card {
  position: relative;
  overflow: hidden;
}
.promo-card::after {
  content: "";
  position: absolute;
  inset: auto -24px -42px auto;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--c-accent-rgb), .18), transparent 68%);
  pointer-events: none;
}
.promo-card__mask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  min-height: 46px;
  margin: 1rem 0 .85rem;
  border: 1px dashed rgba(var(--c-primary-rgb), .28);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(var(--c-white-rgb), .92), rgba(var(--c-accent-rgb), .08)),
    repeating-linear-gradient(-45deg, transparent 0 8px, rgba(var(--c-primary-rgb), .05) 8px 16px);
  color: var(--c-primary);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0;
}
.promo-card__note {
  margin-top: .8rem;
  font-size: .85rem;
}
.map-card {
  overflow: hidden;
}
.map-card__canvas {
  position: relative;
  min-height: 180px;
  margin: -1rem -1rem 1rem;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius) var(--radius);
  background:
    linear-gradient(90deg, rgba(var(--c-primary-rgb), .06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--c-primary-rgb), .06) 1px, transparent 1px),
    linear-gradient(135deg, rgba(var(--c-primary-rgb), .14), rgba(var(--c-accent-rgb), .18));
  background-size: 28px 28px, 28px 28px, auto;
}
.map-card__canvas::before,
.map-card__canvas::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(var(--c-white-rgb), .72);
}
.map-card__canvas::before {
  width: 78%;
  height: 18px;
  left: -12%;
  top: 42%;
  transform: rotate(-12deg);
}
.map-card__canvas::after {
  width: 18px;
  height: 86%;
  left: 58%;
  top: -12%;
  transform: rotate(18deg);
}
.map-card__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 50% 50% 50% 8px;
  background: var(--c-accent);
  box-shadow: 0 12px 26px rgba(var(--c-accent-rgb), .34);
  z-index: 1;
}
.map-card__pin::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  background: var(--c-white);
}

/* ---------- FAQ page tools ---------- */

.faq-section .section__sub {
  max-width: 760px;
}
.faq-assist-card {
  background:
    linear-gradient(135deg, rgba(var(--c-white-rgb), .96), rgba(var(--c-accent-rgb), .08)),
    var(--c-white);
}
.faq-assist-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.faq-popular {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.faq-popular a,
.faq-cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  background: rgba(var(--c-white-rgb), .88);
  color: var(--c-primary);
  font-size: .9rem;
  font-weight: 800;
}
.faq-tools {
  display: grid;
  gap: 1rem;
  margin: 0 auto 1.25rem;
  max-width: 980px;
}
.faq-search {
  display: grid;
  gap: .45rem;
  color: var(--c-primary);
  font-weight: 850;
}
.faq-search input {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(var(--c-primary-rgb), .16);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-ink);
  padding: 0 1rem;
  box-shadow: var(--c-shadow-sm);
  outline: none;
}
.faq-search input:focus {
  border-color: rgba(var(--c-accent-rgb), .65);
  box-shadow: 0 0 0 4px rgba(var(--c-accent-rgb), .16), var(--c-shadow-sm);
}
.faq-cats {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scrollbar-width: thin;
}
.faq-cat {
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--c-shadow-sm);
}
.faq-cat.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
}
.faq-empty {
  margin: 0;
  padding: 1.2rem;
  color: var(--c-text-muted);
  text-align: center;
}

/* ---------- TOP page scoped additions ---------- */

.top-page .top-page__hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(var(--c-accent-rgb), .2), transparent 30rem),
    linear-gradient(135deg, rgba(var(--c-primary-rgb), .1), rgba(var(--c-accent-rgb), .08) 48%, var(--c-white));
}
.top-page__hero-copy {
  display: grid;
  gap: 1.05rem;
}
.top-page .inner-hero__actions {
  gap: .75rem;
  align-items: flex-start;
}
.top-page .inner-hero__actions .btn {
  min-height: 46px;
  padding: 11px 18px;
  font-size: .95rem;
}
.top-page__hero-card {
  display: grid;
  gap: 1rem;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(var(--c-white-rgb), .96), rgba(var(--c-accent-rgb), .1)),
    var(--c-white);
}
.top-page__hero-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: var(--bg-primary-dark-gradient);
  color: var(--c-white);
}
.top-page__hero-card-head h2 {
  margin: 0 0 .25rem;
  color: var(--c-white);
  font-size: clamp(1.25rem, 3vw, 1.8rem);
}
.top-page__hero-card-head p {
  margin: 0;
  color: rgba(var(--c-white-rgb), .8);
}
.top-page__rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 20px;
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 1.25rem;
  font-weight: 950;
  box-shadow: 0 16px 36px rgba(var(--c-accent-rgb), .34);
}
.top-page__quick-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.top-page__quick-metrics div {
  padding: .85rem .7rem;
  border: 1px solid rgba(var(--c-primary-rgb), .1);
  border-radius: var(--radius);
  background: rgba(var(--c-white-rgb), .78);
  text-align: center;
}
.top-page__quick-metrics strong,
.top-page__quick-metrics span {
  display: block;
}
.top-page__quick-metrics strong {
  color: var(--c-primary);
  font-size: .98rem;
}
.top-page__quick-metrics span {
  margin-top: .2rem;
  color: var(--c-text-muted);
  font-size: .76rem;
}
.top-page__hero-checks {
  display: grid;
  gap: .55rem;
}
.top-page__hero-checks span {
  position: relative;
  padding-left: 1.45rem;
  color: var(--c-text);
  font-size: .94rem;
}
.top-page__hero-checks span::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(var(--c-accent-rgb), .14);
}
.top-page__micro {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .86rem;
  text-align: center;
}
.top-page__method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}
@media (min-width: 760px) {
  .top-page__method-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.top-page__method-card {
  padding: 1.1rem;
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: var(--c-shadow-sm);
}
.top-page__method-card span {
  display: inline-flex;
  margin-bottom: .85rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(var(--c-accent-rgb), .13);
  color: var(--c-accent);
  font-weight: 950;
}
.top-page__method-card h3 {
  margin: 0 0 .45rem;
  color: var(--c-primary);
  font-size: 1.05rem;
}
.top-page__method-card p {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .92rem;
  line-height: 1.55;
}
.top-page__toc {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding: 1.15rem;
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  border-radius: var(--radius-lg);
  background: var(--bg-primary-opacity);
  box-shadow: var(--c-shadow-sm);
}
.top-page__toc h2 {
  margin: .25rem 0 0;
  color: var(--c-primary);
  font-size: clamp(1.45rem, 3vw, 2.1rem);
}
.top-page__toc nav {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.top-page__toc nav a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-primary);
  font-weight: 800;
  box-shadow: var(--c-shadow-xs);
}
.top-page__article {
  display: grid;
  gap: 1rem;
}
.top-page__article > section {
  padding: 1.2rem;
  border: 1px solid rgba(var(--c-primary-rgb), .1);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: var(--c-shadow-sm);
}
.top-page__article > section:nth-child(even) {
  background:
    linear-gradient(135deg, rgba(var(--c-primary-rgb), .045), rgba(var(--c-accent-rgb), .07)),
    var(--c-white);
}
.top-page__steps {
  display: grid;
  gap: .7rem;
  margin-top: 1rem;
}
@media (min-width: 760px) {
  .top-page__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.top-page__steps div,
.top-page__approval div {
  padding: .9rem;
  border-radius: var(--radius);
  background: rgba(var(--c-white-rgb), .84);
  border: 1px solid rgba(var(--c-primary-rgb), .1);
}
.top-page__steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: .6rem;
  border-radius: 12px;
  background: var(--c-primary);
  color: var(--c-white);
  font-weight: 950;
}
.top-page__steps strong,
.top-page__steps small {
  display: block;
}
.top-page__steps small {
  margin-top: .25rem;
  color: var(--c-text-muted);
  line-height: 1.45;
}
.top-page__approval {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
}
@media (min-width: 760px) {
  .top-page__approval { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.top-page__approval strong {
  color: var(--c-primary);
}
.top-page__approval p {
  margin: .25rem 0 0;
  color: var(--c-text-muted);
}
@media (max-width: 720px) {
  .top-page .inner-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }
  .top-page .inner-hero__actions .btn {
    min-height: 44px;
    padding: 10px 12px;
    font-size: .9rem;
  }
  .top-page__hero-card {
    display: none;
  }
  .top-page__hero-card-head {
    grid-template-columns: 1fr;
    gap: .75rem;
    padding: .9rem;
  }
  .top-page__rank-badge {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }
  .top-page__quick-metrics {
    gap: .45rem;
  }
  .top-page__quick-metrics div {
    padding: .7rem .45rem;
  }
  .top-page__quick-metrics strong {
    font-size: .84rem;
  }
}

/* ---------- Analogi page scoped additions ---------- */

.analogi-page .analogi-page__hero {
  background:
    radial-gradient(circle at 18% 8%, rgba(var(--c-accent-rgb), .2), transparent 30rem),
    linear-gradient(135deg, rgba(var(--c-primary-rgb), .08), rgba(var(--c-accent-rgb), .08) 52%, var(--c-white));
}
.analogi-page__hero-copy {
  display: grid;
  gap: 1.05rem;
}
.analogi-page .inner-hero__actions {
  align-items: flex-start;
  gap: .75rem;
}
.analogi-page .inner-hero__actions .btn {
  min-height: 46px;
  padding: 11px 18px;
  font-size: .95rem;
}
.analogi-page__match {
  display: grid;
  gap: .75rem;
  align-self: center;
  background:
    linear-gradient(135deg, rgba(var(--c-white-rgb), .96), rgba(var(--c-accent-rgb), .1)),
    var(--c-white);
  padding: 1.05rem;
}
.analogi-page__match-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  padding: .85rem;
  border-radius: var(--radius);
  background: var(--bg-primary-dark-gradient);
  color: var(--c-white);
}
.analogi-page__match-head > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--c-accent);
  color: var(--c-white);
  font-weight: 950;
  box-shadow: 0 16px 36px rgba(var(--c-accent-rgb), .34);
}
.analogi-page__match-head h2 {
  margin: 0 0 .25rem;
  color: var(--c-white);
  font-size: 1.18rem;
  line-height: 1.25;
}
.analogi-page__match-head p {
  margin: 0;
  color: rgba(var(--c-white-rgb), .78);
  font-size: .9rem;
  line-height: 1.45;
}
.analogi-page__match-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}
.analogi-page__match-list div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .05rem .6rem;
  align-items: center;
  padding: .65rem .7rem;
  border: 1px solid rgba(var(--c-primary-rgb), .1);
  border-radius: var(--radius);
  background: rgba(var(--c-white-rgb), .82);
}
.analogi-page__match-list strong,
.analogi-page__match-list span,
.analogi-page__match-list small {
  display: block;
}
.analogi-page__match-list strong {
  grid-row: span 2;
  min-width: 58px;
  color: var(--c-accent);
  font-size: .98rem;
}
.analogi-page__match-list span {
  color: var(--c-primary);
  font-weight: 850;
  font-size: .92rem;
}
.analogi-page__match-list small {
  color: var(--c-text-muted);
  font-size: .8rem;
  line-height: 1.35;
}
.analogi-page__match .btn {
  min-height: 44px;
  padding: 10px 14px;
  font-size: .92rem;
}
.analogi-page__criteria-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}
@media (min-width: 760px) {
  .analogi-page__criteria-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.analogi-page__criteria-grid article {
  padding: 1.1rem;
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: var(--c-shadow-sm);
}
.analogi-page__criteria-grid span {
  display: inline-flex;
  margin-bottom: .75rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(var(--c-accent-rgb), .13);
  color: var(--c-accent);
  font-weight: 950;
}
.analogi-page__criteria-grid h3 {
  margin: 0 0 .45rem;
  color: var(--c-primary);
  font-size: 1.04rem;
}
.analogi-page__criteria-grid p {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .92rem;
  line-height: 1.55;
}
.analogi-page__toc {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding: 1.15rem;
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  border-radius: var(--radius-lg);
  background: var(--bg-primary-opacity);
  box-shadow: var(--c-shadow-sm);
}
.analogi-page__toc h2 {
  margin: .25rem 0 0;
  color: var(--c-primary);
  font-size: clamp(1.45rem, 3vw, 2.1rem);
}
.analogi-page__toc nav {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.analogi-page__toc nav a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-primary);
  font-weight: 800;
  box-shadow: var(--c-shadow-xs);
}
.analogi-page__article {
  display: grid;
  gap: 1rem;
}
.analogi-page__article > section {
  padding: 1.2rem;
  border: 1px solid rgba(var(--c-primary-rgb), .1);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: var(--c-shadow-sm);
}
.analogi-page__article > section:nth-child(even) {
  background:
    linear-gradient(135deg, rgba(var(--c-primary-rgb), .045), rgba(var(--c-accent-rgb), .07)),
    var(--c-white);
}
.analogi-page__reason-grid,
.analogi-page__compare {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
}
@media (min-width: 760px) {
  .analogi-page__reason-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .analogi-page__compare { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.analogi-page__reason-grid div,
.analogi-page__compare div {
  padding: .9rem;
  border-radius: var(--radius);
  background: rgba(var(--c-white-rgb), .86);
  border: 1px solid rgba(var(--c-primary-rgb), .1);
}
.analogi-page__reason-grid strong,
.analogi-page__compare strong,
.analogi-page__compare span {
  display: block;
}
.analogi-page__reason-grid strong,
.analogi-page__compare strong {
  color: var(--c-primary);
}
.analogi-page__reason-grid p {
  margin: .25rem 0 0;
  color: var(--c-text-muted);
}
.analogi-page__compare span {
  color: var(--c-text-muted);
  font-size: .78rem;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .analogi-page__match {
    display: none;
  }
  .analogi-page .inner-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }
  .analogi-page .inner-hero__actions .btn {
    min-height: 44px;
    padding: 10px 12px;
    font-size: .9rem;
  }
}
.top-hero-card {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(var(--c-white-rgb), .96), rgba(var(--c-accent-rgb), .1)),
    var(--c-white);
}
.top-hero-card__visual {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: var(--bg-primary-dark-gradient);
  color: var(--c-white);
}
.top-hero-card__visual h2 {
  margin: 0 0 .25rem;
  color: var(--c-white);
  font-size: 1.35rem;
}
.top-hero-card__visual p {
  margin: 0;
  color: rgba(var(--c-white-rgb), .78);
  font-size: .94rem;
}
.top-hero-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--c-accent);
  color: var(--c-white);
  font-weight: 950;
  font-size: 1.25rem;
  box-shadow: 0 14px 34px rgba(var(--c-accent-rgb), .34);
}
.top-hero-card__terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin-top: 1rem;
}
.top-hero-card__terms div {
  padding: .85rem .65rem;
  border: 1px solid rgba(var(--c-primary-rgb), .1);
  border-radius: var(--radius);
  background: rgba(var(--c-white-rgb), .8);
  text-align: center;
}
.top-hero-card__terms span {
  display: block;
  color: var(--c-text-muted);
  font-size: .76rem;
}
.top-hero-card__terms strong {
  display: block;
  margin-top: .2rem;
  color: var(--c-primary);
  font-size: .96rem;
}
.top-hero-card__note {
  margin: .85rem 0 0;
  color: var(--c-text-muted);
  font-size: .86rem;
  text-align: center;
}
@media (max-width: 420px) {
  .top-hero-card__terms { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .inner-hero { padding: 1.8rem 0 1.6rem; }
  .inner-card { border-radius: var(--radius-lg); padding: 1rem; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .metric-box { padding: .7rem; }
  .conversion-band { margin-left: -4px; margin-right: -4px; }
}

.prose p, .prose ol, .prose ul { margin: 0 0 .9rem; }
.prose h2 { margin: 1.6rem 0 .55rem; font-size: 1.2rem; color: var(--c-primary); }
.prose h3 { margin: 1.2rem 0 .4rem; font-size: 1.05rem; }
.prose ul { padding-left: 1.2rem; }
.prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: .25rem; }
.prose a { font-weight: 500; }

.contacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem .8rem;
  margin: 0 0 1.4rem;
}
@media (min-width: 600px) {
  .contacts { grid-template-columns: auto 1fr; }
  .contacts dt { padding-top: .15rem; }
}
.contacts dt { color: var(--c-text-muted); }
.contacts dd { margin: 0 0 .35rem; font-weight: 600; }

.sitemap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .sitemap-grid { grid-template-columns: repeat(3, 1fr); } }
.sitemap-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: var(--c-shadow-xs);
}
.sitemap-card h3 { margin: 0 0 .35rem; font-size: 1rem; color: var(--c-primary); }
.sitemap-card p { margin: 0 0 .55rem; color: var(--c-text-muted); font-size: .9rem; }
.sitemap-card a { font-weight: 600; }

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  align-items: start;
}
@media (min-width: 960px) { .split { grid-template-columns: 1.2fr 1fr; } }
.split__side {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--c-shadow-xs);
}
.split__side h3 { margin: 0 0 .55rem; font-size: 1rem; color: var(--c-primary); }
.split__side ul { padding-left: 1.1rem; margin: 0; color: var(--c-text-muted); }
.split__side li + li { margin-top: .25rem; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg-primary-dark-gradient);
  color: rgba(var(--c-white-rgb), .78);
  padding: 3rem 0 1.6rem;
  margin-top: 0;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
}
@media (min-width: 720px) { .site-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__inner { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.site-footer h3 { margin: 0 0 .8rem; font-size: 1rem; color: var(--c-white); font-weight: 700; }
.site-footer a { color: rgba(var(--c-white-rgb), .78); }
.site-footer a:hover { color: var(--c-white); text-decoration: none; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.site-footer__brand { font-size: 1.1rem; color: var(--c-white); font-weight: 700; margin-bottom: .55rem; }
.site-footer__about { color: rgba(var(--c-white-rgb), .82); font-size: .95rem; line-height: 1.55; margin: 0; }
.site-footer__legal {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(var(--c-white-rgb), .12);
}
.site-footer__legal p {
  font-size: .78rem;
  color: rgba(var(--c-white-rgb), .55);
  line-height: 1.55;
  margin: 0;
}
.site-footer__terms {
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem 1.4rem;
  margin-top: .8rem;
  font-size: .9rem;
}
@media (min-width: 480px) { .site-footer__terms { grid-template-columns: auto 1fr; } }
.site-footer__terms dt { color: rgba(var(--c-white-rgb), .55); }
.site-footer__terms dd { margin: 0; font-weight: 600; color: var(--c-white); }
.site-footer__phone {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.site-footer__email-row { margin: .3rem 0 0; }
.site-footer__email {
  font-weight: 500;
  font-size: .95rem;
  color: rgba(var(--c-white-rgb), .82);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
}
.site-footer__email:hover { color: var(--c-white); text-decoration: underline; }
.site-footer__bottom {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--c-white-rgb), .12);
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  font-size: .82rem;
  color: rgba(var(--c-white-rgb), .55);
}
@media (min-width: 960px) {
  .site-footer__bottom { grid-template-columns: 1fr auto; align-items: end; }
  .site-footer__bottom-right { text-align: right; }
}
.site-footer__bottom a { color: rgba(var(--c-white-rgb), .55); }
.site-footer__bottom a:hover { color: var(--c-white); }
.site-footer__disclaimer { font-size: .8rem; line-height: 1.6; }

/* ---------- Utilities ---------- */

.center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.6rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.flex-wrap { display: flex; flex-wrap: wrap; gap: .5rem; }
.flex-wrap--center { justify-content: center; }
.flex-center { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.with-icon { display: inline-flex; align-items: center; gap: .4rem; }

/* ============================================================
   Phase 1D.3 — mobile-first sanity (~90% трафик с мобильных).
   Проверено на 360 / 390 / 430 px.
   ============================================================ */

@media (max-width: 480px) {
  /* Тише отступы секций на мобильном, чтобы не съедать высоту экрана. */
  .section { padding: 2.2rem 0; }

  /* Floating CTA: компактнее, чтобы 2 кнопки помещались без переноса. */
  .floating-cta { left: 8px; right: 8px; bottom: 8px; padding: 6px; gap: .35rem; }
  .floating-cta .btn { padding: 10px 12px; font-size: .9rem; min-height: 46px; }

  /* Калькулятор: уменьшаем value-размер чтобы вмещалось рядом с label. */
  .calc__field-value { font-size: 1.1rem; }
  .calc__result { padding: .8rem .85rem; gap: .55rem; }
  .calc__result-cell + .calc__result-cell { padding-left: .55rem; }
  .calc__result-value { font-size: .92rem; }

  /* Tariff matrix: чуть компактнее, чтобы умещался в карточку 320–400px. */
  .tariff { padding: 1.3rem 1rem 1.2rem; gap: .85rem; }
  .tariff__matrix th, .tariff__matrix td { font-size: .88rem; padding: .35rem 0; }
  .tariff__badge { font-size: .72rem; padding: 4px 10px; }

  /* Quiz: ответы более plus-вертикальные. */
  .quiz { padding: 1.3rem 1rem; }
  .quiz__question { font-size: 1.15rem; }
  .quiz__answer { padding: .85rem 1rem; min-height: 52px; font-size: .96rem; }

  /* Offer card metrics — уменьшаем, чтобы 3 поля помещались. */
  .offer { padding: 1.1rem 1rem 1.2rem; }
  .offer__metrics { padding: .6rem; gap: .45rem; }
  .offer__metric-label { font-size: .66rem; }
  .offer__metric-value { font-size: .88rem; }
  .offer__title { font-size: 1rem; }

  /* Lead-magnet — узкая колонка action на мобильном. */
  .lead-magnet { padding: 1.6rem 1.1rem; }

  /* Hero title size — не такой огромный, чтобы умещался в одну/две строки. */
  .hero__title { font-size: clamp(1.55rem, 1.1rem + 2vw, 2rem); }
  .hero__offer { font-size: 1.1rem; }
}

/* Burger в мобильном меню должен влезать в шапку при узком хедере. */
@media (max-width: 380px) {
  :root { --header-height: 60px; }
  .site-header__inner { padding: 10px 12px; gap: .5rem; min-height: var(--header-height); }
  .brand-logo--header { font-size: .86rem; }
  .brand-logo--header.brand-logo--long { font-size: .74rem; }
  .brand-logo--header.brand-logo--very-long { font-size: .66rem; }
  .site-nav__cta { padding: 10px 14px; min-height: 42px; font-size: .9rem; }
  .site-nav__cta svg { display: none; }
  .floating-cta .btn { font-size: .85rem; padding: 10px 8px; }
}

/* Tap targets — все ссылки/кнопки внутри main не меньше 44px на мобильном. */
@media (max-width: 720px) {
  .site-main a.btn,
  .site-main button.btn { min-height: 48px; }
  .quiz__answer,
  .faq__item summary,
  .review-card,
  .offer {
    min-height: 48px;
  }
  .faq__item summary { padding: 1rem 1rem; }
}


/* ===== Phase 1.8 — публичная витрина Leads ===== */
.vitrina {
  padding: 1.7rem 0 3.2rem;
  background:
    linear-gradient(180deg, rgba(var(--c-primary-rgb), .07), rgba(var(--c-white-rgb), 1) 38%),
    var(--c-white);
}
.vitrina__head {
  text-align: center;
  margin: 0 auto .85rem;
  max-width: 780px;
}
.vitrina__title {
  font-size: clamp(1.4rem, 2vw + 1rem, 2rem);
  font-weight: 800;
  margin: 0 0 .5rem;
  color: var(--c-text, #0f172a);
}
.vitrina__sub { color: var(--c-text-muted); margin: .25rem 0; font-size: 1rem; }
.vitrina__empty { text-align: center; padding: 2rem 1rem; }
.vitrina-brief {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: .75rem;
  margin: 0 auto .85rem;
  max-width: 1120px;
  align-items: stretch;
}
.vitrina-brief__main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  align-items: stretch;
}
.vitrina-brief__item,
.vitrina-save {
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  border-radius: var(--radius);
  background: var(--c-white);
  box-shadow: 0 10px 28px rgba(var(--c-primary-rgb), .075);
}
.vitrina-brief__item {
  padding: .72rem .85rem;
  display: grid;
  align-content: center;
  gap: .24rem;
  min-height: 0;
}
.vitrina-brief__item--calm {
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .075), rgba(var(--c-accent-rgb), .075));
}
.vitrina-brief__item strong {
  color: var(--c-text);
  font-size: .92rem;
  line-height: 1.22;
}
.vitrina-brief__item span {
  color: var(--c-text-muted);
  font-size: .8rem;
  line-height: 1.32;
}
.vitrina-save {
  padding: .78rem .85rem;
  display: grid;
  gap: .55rem;
  align-content: center;
}
.vitrina-save__stats {
  display: flex;
  align-items: baseline;
  gap: .38rem;
}
.vitrina-save__stats b {
  font-size: 1.18rem;
  font-weight: 950;
  color: var(--c-primary);
}
.vitrina-save__stats span {
  color: var(--c-text-muted);
  font-size: .76rem;
}
.vitrina-save__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .42rem;
}
.vitrina-save__actions .btn {
  min-height: 36px;
  padding: .42rem .45rem;
  font-size: .72rem;
  line-height: 1.15;
  white-space: normal;
  min-width: 0;
}
.vitrina-save__actions .btn:first-child {
  grid-column: 1 / -1;
}
.vitrina-share {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
}
.vitrina-share[hidden] { display: none; }
.vitrina-share a {
  text-align: center;
  padding: .42rem .36rem;
  border-radius: 999px;
  background: rgba(var(--c-primary-rgb), .08);
  color: var(--c-primary);
  font-size: .78rem;
  font-weight: 800;
}
.vitrina-save small {
  color: var(--c-text-muted);
  line-height: 1.25;
  font-size: .74rem;
}
.mobile-only { display: none; }
.vitrina__ready {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin: 0 auto 1.25rem;
  max-width: 920px;
}
.vitrina__ready div {
  background: var(--c-white);
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  box-shadow: 0 12px 30px rgba(var(--c-primary-rgb), .08);
}
.vitrina__ready strong {
  display: block;
  color: var(--c-primary);
  font-size: 1.2rem;
  font-weight: 900;
}
.vitrina__ready span {
  display: block;
  margin-top: .16rem;
  color: var(--c-text-muted);
  font-size: .82rem;
  line-height: 1.3;
}
.vitrina__grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.35rem;
  align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.vitrina__more { text-align: center; margin: 1.5rem 0; }
.vitrina__note { text-align: center; margin-top: 1.5rem; font-size: .85rem; }

.vit-card {
  position: relative;
  background: var(--c-white);
  border: 1px solid rgba(var(--c-primary-rgb), .11);
  border-radius: var(--radius);
  padding: 1.18rem 1rem 1.05rem;
  display: flex; flex-direction: column; gap: .85rem;
  min-height: 100%;
  box-shadow: 0 10px 28px rgba(var(--c-primary-rgb), .085);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
}
.vit-card:hover {
  box-shadow: 0 16px 38px rgba(var(--c-primary-rgb), .13);
  transform: translateY(-1px);
  border-color: rgba(var(--c-primary-rgb), .28);
}
.vit-card--unavailable { cursor: default; }
.vit-card--unavailable:hover {
  transform: none;
  box-shadow: 0 10px 28px rgba(var(--c-primary-rgb), .085);
  border-color: rgba(var(--c-primary-rgb), .11);
}
.vit-card--top {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr) minmax(190px, .45fr);
  align-items: center;
  gap: 1rem;
  border-color: rgba(var(--c-accent-rgb), .55);
  background:
    linear-gradient(135deg, rgba(var(--c-accent-rgb), .075), rgba(var(--c-white-rgb), 1) 42%),
    var(--c-white);
  box-shadow: 0 18px 48px rgba(var(--c-accent-rgb), .2);
}
.vit-card__top-badge {
  position: absolute; top: -12px; left: 16px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-primary)); color: var(--c-white);
  font-size: .7rem; font-weight: 700; padding: .3rem .6rem;
  border-radius: 999px; letter-spacing: .04em; text-transform: uppercase;
}
.vit-card__free-badge {
  position: absolute;
  top: -10px;
  left: 14px;
  z-index: 2;
  background: var(--c-accent);
  color: var(--c-white);
  border: 1px solid rgba(var(--c-white-rgb), .72);
  border-radius: 999px;
  padding: .28rem .62rem;
  font-size: .72rem;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(var(--c-accent-rgb), .24);
}
.vit-card--top { padding-top: 1.25rem; }
.vit-card--extra { display: none; }
.vit-card--visited { opacity: .8; }
.vit-card--visited .vit-card__cta { background: rgba(var(--c-neutral-rgb), .14); color: var(--c-text); }

.vit-card__head {
  display: flex; align-items: center; gap: .75rem; min-height: 48px;
}
.vit-card--top .vit-card__head { min-height: 70px; }
.vit-card__logo {
  width: 88px; height: 54px; border-radius: 8px; flex: 0 0 88px;
  object-fit: contain; background: linear-gradient(180deg, rgba(var(--c-white-rgb), 1), rgba(var(--c-primary-rgb), .035));
  border: 1px solid rgba(var(--c-primary-rgb), .08);
  padding: .38rem .5rem;
}
.vit-card--top .vit-card__logo { width: 112px; height: 62px; flex-basis: 112px; }
.vit-card__logo--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: var(--c-white);
  font-weight: 800; font-size: 1.4rem;
}
.vit-card__name-block { flex: 1 1 auto; min-width: 0; }
.vit-card__name {
  font-weight: 850; font-size: 1rem; color: var(--c-text);
  line-height: 1.2;
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vit-card--top .vit-card__name { font-size: 1.18rem; min-height: auto; }
.vit-card__sub {
  color: var(--c-text-muted);
  font-size: .78rem;
  line-height: 1.25;
  margin-top: .1rem;
}
.vit-card__chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.vit-card__chip {
  display: inline-block;
  font-size: .7rem; padding: .15rem .5rem;
  border-radius: 999px;
}
.vit-card__chip--ok { background: rgba(var(--c-accent-rgb), .14); color: var(--c-accent-dark); }
.vit-card__chip--free { background: rgba(var(--c-accent-rgb), .16); color: var(--c-accent-dark); font-weight: 850; }
.vit-card__chip--muted { background: rgba(var(--c-neutral-rgb), .12); color: var(--c-text-muted); }
.vit-card__chip--neutral { background: rgba(var(--c-neutral-rgb), .12); color: var(--c-text-muted); }
.vit-card__chip--info { background: rgba(var(--c-primary-rgb), .12); color: var(--c-primary); }
.vit-card__rank {
  flex: 0 0 auto;
  align-self: flex-start;
  background: rgba(var(--c-neutral-rgb), .11);
  color: var(--c-primary);
  border-radius: 999px;
  padding: .25rem .55rem;
  font-size: .75rem;
  font-weight: 900;
}
.vit-card__visited[hidden] { display: none; }
.vit-card__visited {
  position: absolute;
  right: 12px;
  top: 42px;
  z-index: 2;
  font-size: .7rem;
  color: var(--c-text-muted);
  background: rgba(var(--c-neutral-rgb), .12);
  padding: .2rem .55rem; border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}
.vit-card__metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  list-style: none; padding: 0; margin: 0;
}
.vit-card__metrics li {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(var(--c-primary-rgb), .055), rgba(var(--c-neutral-rgb), .055));
  padding: .58rem .58rem; border-radius: 8px;
  font-size: .78rem;
  min-width: 0;
}
.vit-card__metrics li span { color: var(--c-text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.vit-card__metrics li b {
  font-size: .84rem;
  color: var(--c-text);
  font-weight: 800;
  line-height: 1.22;
  margin-top: .15rem;
  overflow-wrap: anywhere;
}
.vit-card__cta { margin-top: auto; }
.vit-card--top .vit-card__cta { margin-top: 0; }
.vit-card__foot {
  border-top: 1px dashed rgba(var(--c-primary-rgb), .14);
  padding-top: .62rem;
  color: var(--c-text-muted);
  font-size: .78rem;
  line-height: 1.35;
}
.vit-card--top .vit-card__foot {
  grid-column: 1 / -1;
  padding-top: .75rem;
}
.vit-card--unavailable { opacity: .5; }

@media (max-width: 720px) {
  .vitrina { padding-top: 1rem; }
  .vitrina__head { margin-bottom: .6rem; }
  .vitrina-brief { grid-template-columns: 1fr; gap: .55rem; margin-bottom: .85rem; }
  .vitrina-brief__main { grid-template-columns: 1fr; grid-template-rows: auto; gap: .55rem; }
  .vitrina-brief__item { padding: .58rem .66rem; }
  .vitrina-brief__item span { font-size: .74rem; }
  .vitrina-save {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: .58rem .66rem;
  }
  .vitrina-save__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vitrina-save__actions .btn:first-child { grid-column: auto; }
  .vitrina-save__actions .btn {
    min-height: 30px;
    padding: .34rem .24rem;
    font-size: .58rem;
    letter-spacing: 0;
  }
  .vitrina-save__actions .btn[data-copy-showcase]::after { content: ""; }
  .vitrina-save small { grid-column: 1 / -1; }
  .desktop-only { display: none; }
  .mobile-only { display: inline; }
  .vitrina__ready { grid-template-columns: 1fr; gap: .55rem; }
  .vitrina__grid { grid-template-columns: 1fr; gap: .75rem; }
  .vit-card--top { display: flex; grid-column: auto; gap: .85rem; }
  .vit-card { padding: .9rem; }
  .vit-card__logo { width: 82px; height: 50px; flex-basis: 82px; }
  .vit-card--top .vit-card__logo { width: 92px; height: 54px; flex-basis: 92px; }
  .vit-card__metrics { gap: .42rem; }
  .vit-card__metrics li { padding: .52rem .48rem; }
  .vit-card__metrics li b { font-size: .78rem; }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .vit-card--top {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =============================================================================
   /app — page styles
   ===========================================================================
   Каждая секция (app-hero, app-stats, app-features, app-howto, app-screens,
   app-platforms, app-security, app-vs-web) использует общие CSS-переменные
   бренда и единый radius/shadow-стек. Никаких hex — всё через --c-*.
   Многие паттерны (карточки в имидже сайта, CTA-полосы) повторяют cabinet-*,
   но с собственной разметкой и BEM-префиксом app-*.
   ============================================================================ */

/* ---------- App Hero ---------- */
.app-hero { padding: 2.8rem 0 2.6rem; }
/* На мобильных перекрытие сверху должно совпадать с /cabinet (где работает
   общий .inner-hero mobile-override на 1.8rem). У .app-hero объявлен ниже
   в файле, поэтому desktop-значение перебивало mobile-override .inner-hero —
   приходилось добавлять собственный media для .app-hero. */
@media (max-width: 640px) {
  .app-hero { padding: 1.8rem 0 1.6rem; }
}
.app-hero__grid {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: 1fr;
  align-items: start; /* левая колонка к верху, как в /cabinet */
}
@media (min-width: 900px) {
  .app-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: 2.4rem;
  }
}
.app-hero__eyebrow { margin-bottom: .9rem; }

/* font-size / weight / line-height / letter-spacing — синхронизированы
   с .cabinet-hero__title, чтобы отступ от шапки до H1 на мобильных
   выглядел одинаково между /cabinet и /app. */
.app-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-text);
  font-weight: 800;
}
.app-hero__title-em {
  font-style: normal;
  display: inline-block;
  /* Подушка снизу гарантирует, что glyph-descender («У» в «Небус»)
     не клипается из-за background-clip:text при тесном line-height. */
  padding-bottom: .08em;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.app-hero__lead {
  margin: 0 0 1.2rem;
  color: var(--c-text);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 36rem;
}

.app-hero__usp {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.app-hero__usp li {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--c-text);
  font-weight: 600;
  font-size: .96rem;
}
.app-hero__usp svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .18);
  color: var(--c-accent-dark);
}

.app-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1.2rem;
}

/* Stores: компактные «pill»-кнопки под CTA */
.app-hero__stores {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: .4rem;
}
.app-hero__store {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem;
  border-radius: 12px;
  background: linear-gradient(160deg, #1f2937, #0f172a);
  color: var(--c-white);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35);
}
.app-hero__store:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .42);
}
.app-hero__store-logo { width: 22px; height: 22px; }
.app-hero__store-text { display: inline-flex; flex-direction: column; line-height: 1; }
.app-hero__store-pre { font-size: .62rem; opacity: .7; }
.app-hero__store-name { font-size: .92rem; font-weight: 700; margin-top: 2px; }

.app-hero__right {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 580px;
}

/* ---------- App Hero phone-mockup ---------- */
.app-mockup {
  position: relative;
  display: block;
  width: 100%;
  max-width: 320px;
  text-decoration: none;
  color: var(--c-text);
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.app-mockup:hover { transform: translateY(-6px); }
.app-mockup:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 14px;
  border-radius: 44px;
}

.app-mockup__halo {
  position: absolute;
  inset: -28px;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--c-primary-rgb), .35), transparent 60%),
    radial-gradient(circle at 75% 80%, rgba(var(--c-accent-rgb), .35), transparent 60%);
  filter: blur(28px);
  opacity: .85;
  border-radius: 50%;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.app-mockup:hover .app-mockup__halo { opacity: 1; transform: scale(1.04); }

.app-mockup__device {
  position: relative;
  z-index: 1;
  display: block;
  padding: 14px;
  border-radius: 38px;
  background: linear-gradient(160deg, #1f2937, #0f172a 65%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .08),
    0 30px 70px -20px rgba(0, 0, 0, .55),
    0 16px 30px -16px rgba(var(--c-primary-rgb), .35);
  animation: app-mockup-float 6s ease-in-out infinite;
}
@keyframes app-mockup-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.app-mockup__notch {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 22px;
  background: #050505;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  z-index: 2;
}

.app-mockup__screen {
  position: relative;
  display: block;
  border-radius: 28px;
  background: var(--c-white);
  padding: 50px 16px 62px; /* нижний паддинг под внутренний tabbar */
  /* Точно такой же min-height как у cabinet-mockup, чтобы корпус выглядел
     одинаково на обеих страницах. Контент мокапа (balance + 3 actions)
     занимает верх, tabbar прижат к низу, между ними — естественный gap
     «прокручиваемой области приложения». */
  min-height: 540px;
  overflow: hidden;
}

.app-mockup__statusbar {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 28px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--c-text);
  z-index: 3;
}
.app-mockup__time { font-variant-numeric: tabular-nums; }
.app-mockup__status-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-text);
}
.app-mockup__status-icons svg { width: 14px; height: 10px; }

.app-mockup__greet {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}
.app-mockup__greet-hi {
  font-size: .74rem;
  color: var(--c-text-muted);
}
.app-mockup__greet-sub {
  font-size: .92rem;
  font-weight: 800;
  color: var(--c-primary);
  margin-top: 2px;
}

.app-mockup__balance {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  margin-bottom: 10px;
}
.app-mockup__balance-label {
  font-size: .62rem;
  opacity: .85;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.app-mockup__balance-value {
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.app-mockup__balance-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.app-mockup__balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--c-white-rgb), .22);
  color: var(--c-white);
  font-size: .62rem;
  font-weight: 700;
}
.app-mockup__balance-chip svg { width: 11px; height: 11px; }

.app-mockup__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 8px;
}
.app-mockup__act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 3px;
  border-radius: 10px;
  background: rgba(var(--c-primary-rgb), .07);
  color: var(--c-primary);
  font-size: .66rem;
  font-weight: 700;
  text-align: center;
}
.app-mockup__act--primary {
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.app-mockup__act-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(var(--c-white-rgb), .65);
}
.app-mockup__act-ico svg { width: 14px; height: 14px; }

.app-mockup__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  font-size: .72rem;
  font-weight: 700;
}
.app-mockup__hint svg { width: 14px; height: 14px; }

/* Последние операции на экране — заполняют нижнюю часть screen, чтобы
   мокап выглядел живым приложением, а не пустым прямоугольником. */
.app-mockup__events {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}
.app-mockup__events-title {
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-muted);
  margin-bottom: 2px;
}
.app-mockup__event {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(var(--c-primary-rgb), .05);
}
.app-mockup__event-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(var(--c-primary-rgb), .12);
  color: var(--c-primary);
  flex-shrink: 0;
}
.app-mockup__event-ico--in {
  background: rgba(var(--c-accent-rgb), .18);
  color: var(--c-accent-dark);
}
.app-mockup__event-ico svg { width: 12px; height: 12px; }
.app-mockup__event-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.app-mockup__event-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-mockup__event-time {
  font-size: .56rem;
  color: var(--c-text-muted);
  margin-top: 1px;
}
.app-mockup__event-sum {
  font-size: .68rem;
  font-weight: 800;
  color: var(--c-accent-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.app-mockup__event-sum--muted { font-size: .8rem; }

/* Native-style таб-бар ВНУТРИ screen. position:absolute отсчитывается от
   .app-mockup__screen (он position:relative), и overflow:hidden на screen
   гарантирует, что tabbar не торчит за чёрную рамку телефона. */
.app-mockup__tabbar {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 6px 4px;
  border-radius: 14px;
  background: rgba(var(--c-white-rgb), .96);
  border-top: 1px solid rgba(var(--c-primary-rgb), .08);
  box-shadow: 0 -3px 10px -8px rgba(0, 0, 0, .08);
}
.app-mockup__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 0;
  color: var(--c-text-muted);
  font-size: .54rem;
  font-weight: 600;
  line-height: 1;
}
.app-mockup__tab--active { color: var(--c-primary); font-weight: 800; }
.app-mockup__tab svg { width: 15px; height: 15px; }

/* Floating notice-плашки вокруг мокапа — паттерн повторяет cabinet-hero:
   top справа (push о заявке), bottom слева (Face ID). Лёгкое float-движение
   синхронизировано с анимацией мокапа. */
.app-mockup__notice {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--c-white);
  box-shadow:
    0 14px 30px -10px rgba(0, 0, 0, .25),
    0 4px 10px -4px rgba(0, 0, 0, .15);
  max-width: 200px;
  pointer-events: none;
}
.app-mockup__notice--top {
  top: 14%;
  right: -10%;
  animation: app-mockup-notice-top 7s ease-in-out infinite;
}
.app-mockup__notice--bottom {
  bottom: 12%;
  left: -10%;
  animation: app-mockup-notice-bottom 7s ease-in-out infinite 1.5s;
}
/* На узких экранах плашки прижимаются к корпусу, не выходят за пределы
   контейнера (.app-mockup) — иначе мобильный layout «ползёт». */
@media (max-width: 420px) {
  .app-mockup__notice--top    { right: 0; }
  .app-mockup__notice--bottom { left: 0; }
}
@keyframes app-mockup-notice-top {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes app-mockup-notice-bottom {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
.app-mockup__notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
  flex: 0 0 32px;
}
.app-mockup__notice-icon svg { width: 18px; height: 18px; }
.app-mockup__notice-text { display: flex; flex-direction: column; line-height: 1.2; }
.app-mockup__notice-text strong {
  font-size: .82rem;
  color: var(--c-text);
}
.app-mockup__notice-text span {
  font-size: .72rem;
  color: var(--c-text-muted);
}

/* ---------- App Stats ---------- */
.app-stats__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .app-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .app-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.app-stat {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.3rem;
  box-shadow: var(--c-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.app-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--c-shadow);
}
.app-stat--a {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .10), transparent 14rem),
    var(--c-white);
}
.app-stat--b {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .12), transparent 14rem),
    var(--c-white);
}
.app-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .12), rgba(var(--c-accent-rgb), .12));
  color: var(--c-primary);
  margin-bottom: .8rem;
}
.app-stat__icon svg { width: 22px; height: 22px; }
.app-stat__main { display: flex; flex-direction: column; gap: 2px; }
.app-stat__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--c-primary);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.app-stat__unit {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-accent-dark);
}
.app-stat__label {
  font-size: .92rem;
  font-weight: 700;
  color: var(--c-text);
  margin-top: 4px;
}
.app-stat__note {
  font-size: .8rem;
  color: var(--c-text-muted);
  line-height: 1.4;
  margin-top: 4px;
}

/* ---------- App Features ---------- */
.app-features__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .app-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .app-features__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.app-feature {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.3rem 1.3rem;
  box-shadow: var(--c-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.app-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--c-shadow);
  border-color: rgba(var(--c-primary-rgb), .25);
}
.app-feature--a {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .08), transparent 16rem),
    var(--c-white);
}
.app-feature--b {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .10), transparent 16rem),
    var(--c-white);
}
.app-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .12), rgba(var(--c-accent-rgb), .12));
  color: var(--c-primary);
  margin-bottom: .9rem;
}
.app-feature__icon svg { width: 24px; height: 24px; }
.app-feature__eyebrow {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-accent-dark);
  margin-bottom: .25rem;
}
.app-feature h3 {
  margin: 0 0 .5rem;
  font-size: 1.08rem;
  color: var(--c-primary);
  font-weight: 800;
  line-height: 1.2;
}
.app-feature p {
  margin: 0 0 1rem;
  color: var(--c-text);
  font-size: .9rem;
  line-height: 1.55;
}
.app-feature__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--c-primary);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--c-primary-rgb), .25);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease, gap .2s ease;
}
.app-feature__link:hover {
  color: var(--c-accent-dark);
  border-color: var(--c-accent);
  gap: .6rem;
}

/* CTA-полоса под features */
.app-features__cta,
.app-howto__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  margin-top: 1.6rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .12), transparent 22rem),
    radial-gradient(circle at 100% 100%, rgba(var(--c-accent-rgb), .12), transparent 22rem),
    var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-sm);
}
.app-features__cta-body,
.app-howto__cta-body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
  flex: 1 1 280px;
}
.app-features__cta-body strong,
.app-howto__cta-body strong {
  color: var(--c-primary);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
}
.app-features__cta-body span,
.app-howto__cta-body span {
  color: var(--c-text-muted);
  font-size: .92rem;
}

/* ---------- App HowTo ---------- */
.app-howto__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .app-howto__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .app-howto__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.app-howto__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: 1.6rem 1.4rem 1.5rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.app-howto__step:hover {
  transform: translateY(-3px);
  box-shadow: var(--c-shadow);
  border-color: rgba(var(--c-primary-rgb), .25);
}
.app-howto__step--a {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .09), transparent 16rem),
    var(--c-white);
}
.app-howto__step--b {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .10), transparent 16rem),
    var(--c-white);
}
.app-howto__step-num {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(var(--c-primary-rgb), .12);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.app-howto__step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .12), rgba(var(--c-accent-rgb), .12));
  color: var(--c-primary);
  margin-bottom: .35rem;
}
.app-howto__step-icon svg { width: 22px; height: 22px; }
.app-howto__step h3 {
  margin: 0;
  font-size: 1.06rem;
  color: var(--c-primary);
  font-weight: 800;
  line-height: 1.25;
  padding-right: 2.4rem;
}
.app-howto__step p {
  margin: 0;
  color: var(--c-text);
  font-size: .92rem;
  line-height: 1.55;
}

/* ---------- App Screens (mockup gallery) ---------- */
/* Полноценный слайдер с autoplay (reuse JS initReviewsSlider). На мобильных —
   одна карточка в кадре + горизонтальный scroll-snap + автопрокрутка каждые
   6.5с, prev/next и dots видны. На десктопе — обычный grid 2×2 / 4×1, JS
   просто не находит overflow и autoplay становится no-op, контролы скрыты. */
.app-screens__slider {
  position: relative;
}
.app-screens__grid {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0 .25rem .4rem;
  margin: 0 -.25rem;
}
.app-screens__grid::-webkit-scrollbar { display: none; }
.app-screens__grid > * {
  flex: 0 0 80%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
@media (min-width: 600px) {
  .app-screens__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
  .app-screens__grid > * { flex: initial; }
}
@media (min-width: 1100px) {
  .app-screens__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Карточки одинаковые по высоте — независимо от количества контента в
   мокапе. Display растягивается на min-height, чтобы home/apply/pay/history
   выглядели как один комплект, а не разнокалиберно. */
.app-screen {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

/* Nav-кнопки и dots — только на мобильных. На десктопе grid показывает все
   карточки разом, контролы не нужны. */
.app-screens__nav {
  position: absolute;
  top: 30%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(var(--c-primary-rgb), .15);
  background: var(--c-white);
  color: var(--c-primary);
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(var(--c-primary-rgb), .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.app-screens__nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -10px rgba(var(--c-primary-rgb), .45);
}
.app-screens__nav:disabled { opacity: .45; cursor: default; }
.app-screens__nav--prev { left: -12px; }
.app-screens__nav--next { right: -12px; }

.app-screens__dots {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: .9rem;
}
.app-screens__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(var(--c-primary-rgb), .18);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, width .25s ease;
  padding: 0;
}
.app-screens__dot.is-active {
  background: var(--c-primary);
  width: 22px;
  border-radius: 999px;
}

@media (min-width: 600px) {
  .app-screens__nav,
  .app-screens__dots { display: none; }
}
/* Каждый мокап — кликабельная ссылка через smart-cta-каскад. Тот же UX,
   что и hero-mockup: hover лёгкое движение + halo, focus-visible accent
   outline для keyboard. */
.app-screen__link {
  display: block;
  width: min(100%, 230px);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.app-screen__link:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 6px;
  border-radius: 36px;
}

.app-screen__device {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 230 / 480;
  padding: 10px;
  border-radius: 30px;
  background: linear-gradient(160deg, #1f2937, #0f172a 65%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 20px 40px -16px rgba(0, 0, 0, .45);
  transition: transform .3s ease, box-shadow .3s ease;
  margin: 0 auto;
}
.app-screen__link:hover .app-screen__device {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 28px 50px -18px rgba(0, 0, 0, .55);
}
.app-screen--b .app-screen__link:hover .app-screen__device { transform: translateY(-4px) rotate(1deg); }

.app-screen__notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 16px;
  background: #050505;
  border-radius: 14px;
  z-index: 2;
}
/* Одинаковая высота для всех экранов — независимо от количества элементов
   в конкретном мокапе. Контент выравнивается по верху, низ может остаться
   пустым у самых «коротких» экранов, но все 4 карточки выглядят как
   единый комплект, без разнокалибрицы. */
.app-screen__display {
  position: relative;
  border-radius: 22px;
  background: var(--c-white);
  padding: 36px 12px 14px;
  height: 100%;
  overflow: hidden;
}
.app-screen__status {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-size: .65rem;
  font-weight: 700;
  color: var(--c-text);
  z-index: 3;
}
.app-screen__status-ico { display: inline-flex; gap: 4px; }
.app-screen__status-ico svg { width: 12px; height: 8px; }

/* Home screen */
.app-screen__home-greet { display: flex; flex-direction: column; margin-bottom: 10px; }
.app-screen__home-hi { font-size: .72rem; color: var(--c-text-muted); }
.app-screen__home-sub { font-size: .88rem; font-weight: 800; color: var(--c-primary); margin-top: 2px; }
.app-screen__home-balance {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  margin-bottom: 10px;
}
.app-screen__home-balance-label { font-size: .58rem; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
.app-screen__home-balance-value { font-size: 1.16rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.app-screen__home-balance-date { font-size: .66rem; opacity: .85; }
.app-screen__home-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.app-screen__home-act {
  padding: 6px 4px;
  border-radius: 8px;
  background: rgba(var(--c-primary-rgb), .07);
  color: var(--c-primary);
  font-size: .64rem;
  font-weight: 700;
  text-align: center;
}
.app-screen__home-act--primary { background: rgba(var(--c-accent-rgb), .15); color: var(--c-accent-dark); }
.app-screen__home-tip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(var(--c-primary-rgb), .07);
  color: var(--c-primary);
  font-size: .64rem;
  font-weight: 700;
}
.app-screen__home-tip svg { width: 11px; height: 11px; }

/* Apply screen */
.app-screen__apply-head { font-size: .86rem; font-weight: 800; color: var(--c-primary); margin-bottom: 10px; }
.app-screen__apply-amount { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(var(--c-primary-rgb), .06); margin-bottom: 10px; }
.app-screen__apply-label { font-size: .62rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.app-screen__apply-value { font-size: 1.16rem; font-weight: 900; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.app-screen__apply-slider { position: relative; height: 6px; border-radius: 3px; background: rgba(var(--c-primary-rgb), .15); margin-top: 6px; }
.app-screen__apply-slider-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 72%; border-radius: 3px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); }
.app-screen__apply-slider-knob { position: absolute; top: 50%; left: 72%; width: 12px; height: 12px; border-radius: 50%; background: var(--c-white); border: 2px solid var(--c-primary); transform: translate(-50%, -50%); }
.app-screen__apply-range { display: flex; justify-content: space-between; font-size: .58rem; color: var(--c-text-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.app-screen__apply-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 8px; background: rgba(var(--c-primary-rgb), .04); margin-bottom: 5px; font-size: .72rem; }
.app-screen__apply-row-label { color: var(--c-text-muted); }
.app-screen__apply-row-value { color: var(--c-primary); font-weight: 700; }
.app-screen__apply-row-value--accent { color: var(--c-accent-dark); font-weight: 800; }
.app-screen__apply-cta {
  display: block;
  text-align: center;
  padding: 9px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
  color: var(--c-white);
  font-size: .78rem;
  font-weight: 800;
  margin-top: 10px;
}

/* Pay screen */
.app-screen__pay-head { font-size: .86rem; font-weight: 800; color: var(--c-primary); margin-bottom: 10px; }
.app-screen__pay-card {
  position: relative;
  padding: 14px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1f2937, #0f172a);
  color: var(--c-white);
  margin-bottom: 10px;
  min-height: 84px;
}
.app-screen__pay-card-chip {
  display: block;
  width: 22px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, #facc15, #ca8a04);
  margin-bottom: 8px;
}
.app-screen__pay-card-num { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.app-screen__pay-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: .62rem; opacity: .85; }
.app-screen__pay-card-brand { font-weight: 800; font-size: .72rem; opacity: 1; letter-spacing: .04em; }
.app-screen__pay-methods { display: flex; gap: 6px; margin-bottom: 10px; }
.app-screen__pay-method { flex: 1; padding: 7px; border-radius: 8px; background: rgba(var(--c-primary-rgb), .05); color: var(--c-text-muted); font-size: .68rem; font-weight: 700; text-align: center; }
.app-screen__pay-method--active { background: rgba(var(--c-primary-rgb), .12); color: var(--c-primary); }
.app-screen__pay-amount { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: rgba(var(--c-primary-rgb), .06); margin-bottom: 12px; }
.app-screen__pay-label { font-size: .62rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.app-screen__pay-value { font-size: 1.14rem; font-weight: 900; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.app-screen__pay-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
  color: var(--c-white);
  font-size: .78rem;
  font-weight: 800;
}
.app-screen__pay-cta svg { width: 14px; height: 14px; }
.app-screen__pay-note { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--c-text-muted); font-size: .62rem; font-weight: 600; }
.app-screen__pay-note svg { width: 12px; height: 12px; color: var(--c-accent-dark); }

/* History screen */
.app-screen__hist-head { font-size: .86rem; font-weight: 800; color: var(--c-primary); margin-bottom: 10px; }
.app-screen__hist-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.app-screen__hist-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(var(--c-primary-rgb), .04);
  font-size: .7rem;
}
.app-screen__hist-status {
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-muted);
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(var(--c-primary-rgb), .07);
}
.app-screen__hist-item--active .app-screen__hist-status {
  background: rgba(var(--c-accent-rgb), .2);
  color: var(--c-accent-dark);
}
.app-screen__hist-amount { color: var(--c-primary); font-weight: 800; font-variant-numeric: tabular-nums; }
.app-screen__hist-date { color: var(--c-text-muted); font-size: .66rem; }
.app-screen__hist-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .08), rgba(var(--c-accent-rgb), .12));
  margin-top: 8px;
  font-size: .72rem;
}
.app-screen__hist-summary span { color: var(--c-text-muted); font-weight: 700; }
.app-screen__hist-summary strong { color: var(--c-primary); font-weight: 900; font-variant-numeric: tabular-nums; }

.app-screen__caption { display: flex; flex-direction: column; gap: 4px; max-width: 240px; }
.app-screen__eyebrow {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-accent-dark);
}
.app-screen__title { font-size: 1.02rem; font-weight: 800; color: var(--c-primary); line-height: 1.25; }
.app-screen__text { font-size: .88rem; color: var(--c-text-muted); line-height: 1.5; }

/* ---------- App Platforms ---------- */
.app-platforms__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .app-platforms__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.app-platform {
  position: relative;
  display: flex; /* колонка растягивается на всю высоту grid-row */
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--c-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.app-platform:hover {
  transform: translateY(-3px);
  box-shadow: var(--c-shadow);
}
.app-platform--a {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .09), transparent 16rem),
    var(--c-white);
}
.app-platform--b {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .11), transparent 16rem),
    var(--c-white);
}
.app-platform > div {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  width: 100%;
}
.app-platform__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .14), rgba(var(--c-accent-rgb), .14));
  color: var(--c-primary);
  margin-bottom: .35rem;
}
.app-platform__logo svg { width: 26px; height: 26px; }
.app-platform__name {
  font-size: 1.16rem;
  font-weight: 900;
  color: var(--c-primary);
  line-height: 1.1;
}
.app-platform__os {
  font-size: .82rem;
  color: var(--c-text-muted);
  margin-top: -2px;
}
.app-platform__req {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .7rem;
  border-radius: 999px;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  font-size: .8rem;
  font-weight: 700;
  width: fit-content;
}
.app-platform__req svg { width: 14px; height: 14px; }
.app-platform__note {
  margin: 0;
  font-size: .88rem;
  color: var(--c-text);
  line-height: 1.5;
}
/* Store-кнопки в фирменном стиле — тёмный фон, как у официальных бэйджей.
   Логотип слева, двухстрочный текст справа («Скачать в» + название).
   margin-top: auto + align-self: flex-start прижимают кнопку к низу карточки
   (внутри flex-column родителя), независимо от длины описания note. */
.app-platform__store {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem 1rem;
  border-radius: 12px;
  background: linear-gradient(160deg, #1f2937, #0f172a);
  color: var(--c-white);
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4);
  min-height: 48px;
}
.app-platform__store:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .5);
}
.app-platform__store--web {
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  box-shadow: 0 8px 20px -8px rgba(var(--c-primary-rgb), .4);
}
.app-platform__store--web:hover {
  box-shadow: 0 14px 28px -10px rgba(var(--c-primary-rgb), .55);
}
.app-platform__store-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.app-platform__store-logo svg { width: 28px; height: 28px; }
.app-platform__store-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.app-platform__store-pre {
  font-size: .62rem;
  opacity: .75;
  font-weight: 500;
  text-transform: none;
}
.app-platform__store-name {
  font-size: 1rem;
  font-weight: 800;
  margin-top: 2px;
  letter-spacing: -.01em;
}
.app-platform__store--web .app-platform__store-name { font-size: .94rem; }

/* ---------- App Security ---------- */
.app-security__grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .app-security__grid { grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 2.4rem; }
}

.app-security__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 2.2rem 1.6rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--c-primary-rgb), .12), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(var(--c-accent-rgb), .10), transparent 60%),
    rgba(var(--c-white-rgb), .65);
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  min-height: 400px;
}
.app-security__shield {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  box-shadow: 0 22px 50px -10px rgba(var(--c-primary-rgb), .45);
  margin-top: .5rem;
}
.app-security__shield svg { width: 76px; height: 76px; }
.app-security__shield-ring,
.app-security__shield-ring--lg {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(var(--c-primary-rgb), .25);
  animation: app-security-pulse 2.6s ease-out infinite;
}
.app-security__shield-ring--lg {
  inset: -28px;
  animation-delay: .8s;
  border-color: rgba(var(--c-accent-rgb), .25);
}
@keyframes app-security-pulse {
  0%   { opacity: .8; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.15); }
}

.app-security__caption {
  text-align: center;
  line-height: 1.45;
  max-width: 280px;
}
.app-security__caption strong {
  display: block;
  color: var(--c-primary);
  font-size: 1.05rem;
  font-weight: 800;
}
.app-security__caption span {
  display: block;
  color: var(--c-text-muted);
  font-size: .88rem;
  margin-top: 6px;
}

.app-security__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
}
.app-security__chip {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: rgba(var(--c-white-rgb), .9);
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  color: var(--c-text);
  font-size: .84rem;
  font-weight: 600;
}
.app-security__chip svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.app-security__chip--warn svg {
  background: rgba(245, 158, 11, .18);
  color: #b45309;
}
.app-security__chip--shield svg {
  background: rgba(var(--c-primary-rgb), .15);
  color: var(--c-primary);
}

.app-security__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .8rem;
}
.app-security__item {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--c-shadow-sm);
  transition: border-color .25s ease, transform .25s ease;
}
.app-security__item:nth-child(odd) {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .07), transparent 14rem),
    var(--c-white);
}
.app-security__item:nth-child(even) {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .08), transparent 14rem),
    var(--c-white);
}
.app-security__item:hover {
  border-color: rgba(var(--c-accent-rgb), .35);
  transform: translateX(3px);
}
.app-security__item > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
.app-security__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  flex-shrink: 0;
}
.app-security__item-icon svg { width: 22px; height: 22px; }
.app-security__item h3 {
  margin: 0 0 .3rem;
  font-size: 1.02rem;
  color: var(--c-primary);
  font-weight: 800;
  line-height: 1.25;
}
.app-security__item p {
  margin: 0;
  color: var(--c-text);
  font-size: .92rem;
  line-height: 1.55;
}

/* ---------- App vs Web ---------- */
.app-vs-web__board {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--c-shadow-sm);
}

.app-vs-web__col {
  padding: 1.2rem 1rem;
  grid-row: 1;
}
.app-vs-web__col--app { grid-column: 2; background: rgba(var(--c-primary-rgb), .06); }
.app-vs-web__col--web { grid-column: 3; background: rgba(var(--c-accent-rgb), .06); }
.app-vs-web__col-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-align: center;
}
.app-vs-web__col-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
}
.app-vs-web__col-icon svg { width: 22px; height: 22px; }
.app-vs-web__col-head strong { font-size: 1.06rem; color: var(--c-primary); font-weight: 900; }
.app-vs-web__col-sub { font-size: .8rem; color: var(--c-text-muted); }

.app-vs-web__rows {
  list-style: none;
  padding: 0;
  margin: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
.app-vs-web__row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  border-top: 1px solid var(--c-border);
}
.app-vs-web__row:nth-child(even) { background: rgba(var(--c-primary-rgb), .025); }
.app-vs-web__row-label {
  padding: .85rem 1rem;
  color: var(--c-text);
  font-size: .95rem;
  font-weight: 600;
}
.app-vs-web__cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem .5rem;
}
.app-vs-web__cell svg { width: 22px; height: 22px; }
.app-vs-web__cell--yes svg { color: var(--c-accent-dark); }
.app-vs-web__cell--yes-plus svg { color: var(--c-accent-dark); filter: drop-shadow(0 2px 4px rgba(var(--c-accent-rgb), .4)); }
.app-vs-web__cell--no svg { color: rgba(var(--c-text-muted-rgb, 100, 116, 139), .55); }

/* Mobile fallback — vertical card list, each row stacked */
@media (max-width: 720px) {
  .app-vs-web__board { grid-template-columns: 1fr 1fr; }
  .app-vs-web__col--app { grid-column: 1; }
  .app-vs-web__col--web { grid-column: 2; }
  .app-vs-web__row {
    grid-template-columns: 1fr auto auto;
    padding: .3rem 0;
  }
  .app-vs-web__row-label { font-size: .88rem; padding: .55rem 1rem; grid-column: 1 / -1; }
  .app-vs-web__cell { padding: .25rem .5rem .8rem; }
  .app-vs-web__cell:first-of-type { grid-column: 1; justify-content: center; }
  .app-vs-web__cell:last-of-type  { grid-column: 2; justify-content: center; }
}

.app-vs-web__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  color: var(--c-text-muted);
  font-size: .82rem;
  font-weight: 600;
}
.app-vs-web__legend-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.app-vs-web__legend-item svg { width: 16px; height: 16px; }
.app-vs-web__legend-item--yes-plus svg { color: var(--c-accent-dark); }
.app-vs-web__legend-item--yes svg { color: var(--c-accent-dark); }
.app-vs-web__legend-item--no svg { color: rgba(var(--c-text-muted-rgb, 100, 116, 139), .55); }

.app-vs-web__outro {
  margin-top: 1.6rem;
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .10), transparent 22rem),
    radial-gradient(circle at 100% 100%, rgba(var(--c-accent-rgb), .10), transparent 22rem),
    var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-sm);
}
.app-vs-web__outro p {
  margin: 0 0 1rem;
  color: var(--c-text);
  font-size: 1rem;
  line-height: 1.55;
}
.app-vs-web__outro p strong { color: var(--c-primary); }
.app-vs-web__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .app-mockup__device,
  .app-mockup__notice,
  .app-security__shield-ring,
  .app-security__shield-ring--lg {
    animation: none;
  }
  .app-mockup:hover,
  .app-feature:hover,
  .app-howto__step:hover,
  .app-stat:hover,
  .app-platform:hover,
  .app-screen:hover .app-screen__device,
  .app-security__item:hover {
    transform: none;
  }
}

/* =============================================================================
   /promokodes — page styles
   ===========================================================================
   Все цвета через CSS-vars бренда, никаких hex кроме theme-color.
   Префикс .promo-*. Семантика паттернов повторяет cabinet/app: imidж сайта
   через soft radial-gradient на фоне карточек, чередующиеся tints --a / --b,
   gradient-em в H1, нативные details/summary для FAQ.
   ============================================================================ */

/* ---------- Promo Hero ---------- */
.promo-hero { padding: 2.8rem 0 2.6rem; }
@media (max-width: 640px) { .promo-hero { padding: 1.8rem 0 1.6rem; } }

.promo-hero__grid {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .promo-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: 2.4rem;
  }
}
.promo-hero__eyebrow { margin-bottom: .9rem; }
.promo-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-text);
  font-weight: 800;
}
.promo-hero__title-em {
  font-style: normal;
  display: inline-block;
  padding-bottom: .08em;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.promo-hero__lead {
  margin: 0 0 1.2rem;
  color: var(--c-text);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 36rem;
}
.promo-hero__usp {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.promo-hero__usp li {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--c-text);
  font-weight: 600;
  font-size: .96rem;
}
.promo-hero__usp svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .18);
  color: var(--c-accent-dark);
}
.promo-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.promo-hero__right { display: flex; justify-content: center; align-items: center; }
.promo-hero__right .promo-spin {
  width: 100%;
  max-width: 430px;
  gap: 1rem;
  padding: 1.3rem;
}
.promo-hero__right .promo-spin__wheel-wrap { padding: .25rem 0 .6rem; }
.promo-hero__right .promo-spin__wheel { width: clamp(230px, 62vw, 300px); }
.promo-hero__right .promo-spin__btn { width: 100%; }
.promo-spin__rule {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  color: var(--c-text);
  font-size: .9rem;
  line-height: 1.35;
  font-weight: 600;
}
.promo-spin__rule svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .16);
  color: var(--c-accent-dark);
}
.promo-hero__right .promo-spin__rule {
  justify-content: center;
  text-align: center;
}
@media (min-width: 900px) {
  .promo-hero__right .promo-spin { grid-template-columns: 1fr; }
}

/* Live-счётчик активаций — большая карточка с halo-фоном */
.promo-counter {
  position: relative;
  width: 100%;
  max-width: 420px;
}
.promo-counter__halo {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--c-primary-rgb), .25), transparent 60%),
    radial-gradient(circle at 75% 80%, rgba(var(--c-accent-rgb), .25), transparent 60%);
  filter: blur(28px);
  border-radius: 50%;
  pointer-events: none;
}
.promo-counter__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 2rem 1.6rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .10), transparent 22rem),
    radial-gradient(circle at 100% 100%, rgba(var(--c-accent-rgb), .12), transparent 22rem),
    var(--c-white);
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  box-shadow: var(--c-shadow);
}
.promo-counter__eyebrow {
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-muted);
}
.promo-counter__value {
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform .25s ease;
}
.promo-counter__value.is-bumping { transform: translateY(-2px); }
.promo-counter__unit { font-size: .98rem; color: var(--c-text-muted); margin-bottom: 1rem; }
.promo-counter__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
}
.promo-counter__chips li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  background: rgba(var(--c-white-rgb), .9);
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  color: var(--c-text);
  font-size: .86rem;
  font-weight: 600;
}
.promo-counter__chips svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}

/* ---------- Promo Stats ---------- */
.promo-stats__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .promo-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .promo-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.promo-stat {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.3rem;
  box-shadow: var(--c-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.promo-stat:hover { transform: translateY(-3px); box-shadow: var(--c-shadow); }
.promo-stat--a {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .10), transparent 14rem),
    var(--c-white);
}
.promo-stat--b {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .12), transparent 14rem),
    var(--c-white);
}
.promo-stat__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .12), rgba(var(--c-accent-rgb), .12));
  color: var(--c-primary);
  margin-bottom: .8rem;
}
.promo-stat__icon svg { width: 22px; height: 22px; }
.promo-stat__main { display: flex; flex-direction: column; gap: 2px; }
.promo-stat__value {
  display: flex; align-items: baseline; gap: 4px;
  color: var(--c-primary);
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.promo-stat__unit { font-size: 1rem; font-weight: 700; color: var(--c-accent-dark); }
.promo-stat__label { font-size: .92rem; font-weight: 700; color: var(--c-text); margin-top: 4px; }
.promo-stat__note { font-size: .8rem; color: var(--c-text-muted); margin-top: 4px; }

/* ---------- Promo Filter ---------- */
.promo-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 0 1.4rem;
}
.promo-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .95rem;
  border-radius: 999px;
  background: var(--c-white);
  border: 1px solid rgba(var(--c-primary-rgb), .18);
  color: var(--c-text);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.promo-filter__chip:hover { transform: translateY(-1px); border-color: var(--c-accent); }
.promo-filter__chip svg { width: 16px; height: 16px; flex-shrink: 0; }
.promo-filter__chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(var(--c-primary-rgb), .1);
  color: var(--c-primary);
  font-size: .72rem;
  font-weight: 800;
}
.promo-filter__chip.is-active {
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  border-color: transparent;
  box-shadow: 0 12px 28px -12px rgba(var(--c-primary-rgb), .5);
}
.promo-filter__chip.is-active .promo-filter__chip-count {
  background: rgba(255, 255, 255, .22);
  color: var(--c-white);
}

/* ---------- Promo Grid (купоны) ---------- */
.promo-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .promo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.promo-grid__empty {
  margin: 2rem auto 0;
  text-align: center;
  color: var(--c-text-muted);
  font-size: 1rem;
}

/* Купон-карточка. «Билет» с перфорированными краями (top/bottom через
   radial-gradient mask) и большим бейджем скидки сверху-справа. */
.promo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.4rem 1.3rem 1.3rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.promo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--c-shadow);
  border-color: rgba(var(--c-primary-rgb), .25);
}
.promo-card--a {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .08), transparent 16rem),
    var(--c-white);
}
.promo-card--b {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .10), transparent 16rem),
    var(--c-white);
}
.promo-card.is-hidden { display: none; }
.promo-card.is-activated { border-color: rgba(var(--c-accent-rgb), .5); }

.promo-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .6rem;
}
.promo-card__cat-chip {
  display: inline-flex;
  align-items: center;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgba(var(--c-primary-rgb), .08);
  color: var(--c-primary);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.promo-card__discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .4rem .85rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
  color: var(--c-white);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -.01em;
  box-shadow: 0 10px 22px -10px rgba(var(--c-accent-rgb), .55);
  font-variant-numeric: tabular-nums;
}

.promo-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .12), rgba(var(--c-accent-rgb), .12));
  color: var(--c-primary);
}
.promo-card__icon svg { width: 22px; height: 22px; }
.promo-card__title {
  margin: 0;
  font-size: 1.06rem;
  color: var(--c-primary);
  font-weight: 800;
  line-height: 1.25;
}
.promo-card__desc {
  margin: 0;
  color: var(--c-text);
  font-size: .92rem;
  line-height: 1.55;
}

/* Замазанный код: blur + sub-grid с label/value/copy. */
.promo-card__code {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .75rem .9rem;
  border-radius: 12px;
  background: rgba(var(--c-primary-rgb), .05);
  border: 1px dashed rgba(var(--c-primary-rgb), .3);
}
.promo-card__code-label {
  grid-column: 1 / -1;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-muted);
}
.promo-card__code-value {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: .04em;
  word-break: break-all;
  position: relative;
  min-height: 1.4em;
}
.promo-card__code-masked {
  filter: blur(5px);
  user-select: none;
  transition: filter .35s ease, opacity .35s ease;
}
.promo-card.is-activated .promo-card__code-masked { display: none; }
.promo-card.is-activated .promo-card__code-real {
  position: static !important;
  clip: auto !important;
  clip-path: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  color: var(--c-primary);
  animation: promo-code-reveal .45s ease;
}
@keyframes promo-code-reveal {
  0% { transform: scale(.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.promo-card__code-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(var(--c-primary-rgb), .2);
  background: var(--c-white);
  color: var(--c-primary);
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.promo-card__code-copy:hover { background: rgba(var(--c-primary-rgb), .08); transform: translateY(-1px); }
.promo-card__code-copy svg { width: 16px; height: 16px; }

.promo-card__meta {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  font-size: .82rem;
  color: var(--c-text);
}
.promo-card__meta li { display: inline-flex; align-items: center; gap: .35rem; }
.promo-card__meta svg { width: 14px; height: 14px; color: var(--c-primary); flex-shrink: 0; }
.promo-card__meta em { font-style: normal; color: var(--c-text-muted); }

.promo-card__progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.promo-card__progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--c-primary-rgb), .12);
  overflow: hidden;
}
.promo-card__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  transition: width .35s ease;
}
/* Атрибутный селектор: прогресс выставляется через data-w="20".."95" без
   inline-стилей. Шаг 5%. */
.promo-card__progress-fill[data-w="20"] { width: 20%; }
.promo-card__progress-fill[data-w="25"] { width: 25%; }
.promo-card__progress-fill[data-w="30"] { width: 30%; }
.promo-card__progress-fill[data-w="35"] { width: 35%; }
.promo-card__progress-fill[data-w="40"] { width: 40%; }
.promo-card__progress-fill[data-w="45"] { width: 45%; }
.promo-card__progress-fill[data-w="50"] { width: 50%; }
.promo-card__progress-fill[data-w="55"] { width: 55%; }
.promo-card__progress-fill[data-w="60"] { width: 60%; }
.promo-card__progress-fill[data-w="65"] { width: 65%; }
.promo-card__progress-fill[data-w="70"] { width: 70%; }
.promo-card__progress-fill[data-w="75"] { width: 75%; }
.promo-card__progress-fill[data-w="80"] { width: 80%; }
.promo-card__progress-fill[data-w="85"] { width: 85%; }
.promo-card__progress-fill[data-w="90"] { width: 90%; }
.promo-card__progress-fill[data-w="95"] { width: 95%; }
.promo-card__progress-label { font-size: .76rem; color: var(--c-text-muted); }
.promo-card__progress-label strong { color: var(--c-primary); font-weight: 800; }

.promo-card__cta { width: 100%; justify-content: center; margin-top: auto; }
.promo-card.is-activated .promo-card__cta {
  background: linear-gradient(135deg, var(--c-accent-dark), var(--c-accent));
}

/* ---------- Promo Spin (Колесо удачи) ---------- */
.promo-spin {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2rem 1.6rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .12), transparent 22rem),
    radial-gradient(circle at 100% 100%, rgba(var(--c-accent-rgb), .14), transparent 22rem),
    var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-sm);
  overflow: hidden;
}
@media (min-width: 900px) {
  .promo-spin {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.1fr);
    align-items: center;
    padding: 2.4rem;
  }
}
.promo-spin__halo {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--c-primary-rgb), .25), transparent 60%),
    radial-gradient(circle at 75% 80%, rgba(var(--c-accent-rgb), .25), transparent 60%);
  filter: blur(40px);
  border-radius: 50%;
  pointer-events: none;
  opacity: .8;
}
.promo-spin__wheel-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}
.promo-spin__pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--c-accent-dark);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .25));
}
.promo-spin__pointer svg { width: 36px; height: 36px; }

/* Само колесо — round divided by 8 (45deg each). Используем conic-gradient. */
.promo-spin__wheel {
  position: relative;
  width: clamp(260px, 80vw, 360px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    conic-gradient(
      var(--c-primary)        0deg  45deg,
      var(--c-accent)        45deg  90deg,
      var(--c-primary)       90deg 135deg,
      var(--c-accent)       135deg 180deg,
      var(--c-primary)      180deg 225deg,
      var(--c-accent)       225deg 270deg,
      var(--c-primary)      270deg 315deg,
      var(--c-accent)       315deg 360deg
    );
  box-shadow:
    0 24px 60px -20px rgba(var(--c-primary-rgb), .55),
    inset 0 0 0 10px rgba(255, 255, 255, .35),
    inset 0 0 0 14px rgba(0, 0, 0, .15);
  transition: transform 3.4s cubic-bezier(.18, .8, .2, 1);
  transform: rotate(0deg);
}
/* Сектор-обёртка для текста, абсолютно позиционированная по центру колеса.
   Поворачивается на (i * 45) - 22.5 чтобы центрировать в своём секторе. */
.promo-spin__sector {
  position: absolute;
  inset: 0;
  transform-origin: center;
  pointer-events: none;
}
.promo-spin__sector[data-promo-sector="0"] { transform: rotate(22.5deg); }
.promo-spin__sector[data-promo-sector="1"] { transform: rotate(67.5deg); }
.promo-spin__sector[data-promo-sector="2"] { transform: rotate(112.5deg); }
.promo-spin__sector[data-promo-sector="3"] { transform: rotate(157.5deg); }
.promo-spin__sector[data-promo-sector="4"] { transform: rotate(202.5deg); }
.promo-spin__sector[data-promo-sector="5"] { transform: rotate(247.5deg); }
.promo-spin__sector[data-promo-sector="6"] { transform: rotate(292.5deg); }
.promo-spin__sector[data-promo-sector="7"] { transform: rotate(337.5deg); }
.promo-spin__sector-label {
  position: absolute;
  top: 22px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(var(--c-white-rgb), .18);
  color: var(--c-white);
  font-size: .86rem;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  white-space: nowrap;
  backdrop-filter: blur(2px);
}
.promo-spin__sector[data-promo-sector="0"] .promo-spin__sector-label { transform: translateX(-50%) rotate(-22.5deg); }
.promo-spin__sector[data-promo-sector="1"] .promo-spin__sector-label { transform: translateX(-50%) rotate(-67.5deg); }
.promo-spin__sector[data-promo-sector="2"] .promo-spin__sector-label { transform: translateX(-50%) rotate(-112.5deg); }
.promo-spin__sector[data-promo-sector="3"] .promo-spin__sector-label { transform: translateX(-50%) rotate(-157.5deg); }
.promo-spin__sector[data-promo-sector="4"] .promo-spin__sector-label { transform: translateX(-50%) rotate(-202.5deg); }
.promo-spin__sector[data-promo-sector="5"] .promo-spin__sector-label { transform: translateX(-50%) rotate(-247.5deg); }
.promo-spin__sector[data-promo-sector="6"] .promo-spin__sector-label { transform: translateX(-50%) rotate(-292.5deg); }
.promo-spin__sector[data-promo-sector="7"] .promo-spin__sector-label { transform: translateX(-50%) rotate(-337.5deg); }
.promo-spin__hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-accent-dark);
  z-index: 2;
}
.promo-spin__hub svg { width: 28px; height: 28px; }

.promo-spin__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.promo-spin__panel-title {
  display: block;
  color: var(--c-primary);
  font-size: 1.2rem;
  font-weight: 800;
}
.promo-spin__panel-text {
  margin: 0;
  color: var(--c-text);
  line-height: 1.55;
  font-size: .95rem;
}
.promo-spin__panel-rules {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .5rem;
}
.promo-spin__panel-rules li {
  display: flex; align-items: center; gap: .55rem;
  color: var(--c-text); font-size: .9rem; font-weight: 600;
}
.promo-spin__panel-rules svg {
  flex: 0 0 16px; width: 16px; height: 16px; padding: 3px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .18);
  color: var(--c-accent-dark);
}
.promo-spin__btn { width: fit-content; }
.promo-spin__btn:disabled {
  background: rgba(var(--c-primary-rgb), .12);
  color: var(--c-text-muted);
  cursor: not-allowed;
  box-shadow: none;
}
.promo-spin__cooldown {
  margin: 0;
  font-size: .88rem;
  color: var(--c-text-muted);
}
.promo-spin__cooldown strong { color: var(--c-primary); font-variant-numeric: tabular-nums; }

/* Модал с результатом крутки */
.promo-spin-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.promo-spin-modal[hidden] { display: none; }
.promo-spin-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.promo-spin-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: 2.2rem 1.8rem 1.8rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .12), transparent 22rem),
    radial-gradient(circle at 100% 100%, rgba(var(--c-accent-rgb), .12), transparent 22rem),
    var(--c-white);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55);
  text-align: center;
  animation: promo-modal-in .35s ease;
}
@keyframes promo-modal-in {
  0% { transform: scale(.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.promo-spin-modal__close {
  position: absolute;
  top: .8rem; right: .8rem;
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(var(--c-primary-rgb), .1);
  color: var(--c-primary);
  cursor: pointer;
}
.promo-spin-modal__close svg { width: 18px; height: 18px; }
.promo-spin-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px; height: 70px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  box-shadow: 0 16px 32px -12px rgba(var(--c-primary-rgb), .5);
  animation: promo-modal-pulse 2s ease-out infinite;
}
.promo-spin-modal__icon svg { width: 36px; height: 36px; }
@keyframes promo-modal-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.promo-spin-modal__eyebrow {
  display: block;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-accent-dark);
  margin-bottom: .25rem;
}
.promo-spin-modal__title {
  margin: 0 0 .5rem;
  color: var(--c-primary);
  font-size: 1.4rem;
  font-weight: 900;
}
.promo-spin-modal__title strong {
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.promo-spin-modal__text {
  margin: 0 0 1.2rem;
  color: var(--c-text-muted);
  font-size: .95rem;
}
.promo-spin-modal__code {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1rem;
  border-radius: 12px;
  background: rgba(var(--c-primary-rgb), .07);
  border: 1px dashed rgba(var(--c-primary-rgb), .3);
  margin-bottom: 1.2rem;
}
.promo-spin-modal__code-label {
  grid-column: 1 / -1;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-muted);
}
.promo-spin-modal__code-value {
  font-family: 'Inter Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--c-primary);
  letter-spacing: .05em;
}
.promo-spin-modal__code-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(var(--c-primary-rgb), .2);
  background: var(--c-white);
  color: var(--c-primary);
  cursor: pointer;
}
.promo-spin-modal__code-copy svg { width: 18px; height: 18px; }
.promo-spin-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}

/* ---------- Promo HowTo + Benefits ---------- */
.promo-howto__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .promo-howto__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.promo-howto__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: 1.6rem 1.4rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-sm);
}
.promo-howto__step--a {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .09), transparent 16rem),
    var(--c-white);
}
.promo-howto__step--b {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .10), transparent 16rem),
    var(--c-white);
}
.promo-howto__step-num {
  position: absolute;
  top: 1.1rem; right: 1.2rem;
  font-size: 2.4rem; font-weight: 900;
  line-height: 1;
  color: rgba(var(--c-primary-rgb), .12);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.promo-howto__step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .12), rgba(var(--c-accent-rgb), .12));
  color: var(--c-primary);
}
.promo-howto__step-icon svg { width: 22px; height: 22px; }
.promo-howto__step h3 {
  margin: 0;
  font-size: 1.06rem;
  color: var(--c-primary);
  font-weight: 800;
  padding-right: 2.4rem;
}
.promo-howto__step p { margin: 0; color: var(--c-text); font-size: .92rem; line-height: 1.55; }

.promo-howto__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .12), transparent 22rem),
    radial-gradient(circle at 100% 100%, rgba(var(--c-accent-rgb), .12), transparent 22rem),
    var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-sm);
}
.promo-howto__cta-body { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 280px; }
.promo-howto__cta-body strong { color: var(--c-primary); font-size: 1.1rem; font-weight: 800; }
.promo-howto__cta-body span { color: var(--c-text-muted); font-size: .92rem; }

.promo-benefits__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .promo-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .promo-benefits__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.promo-benefit {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.3rem;
  box-shadow: var(--c-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.promo-benefit:hover { transform: translateY(-3px); box-shadow: var(--c-shadow); }
.promo-benefit--a {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .08), transparent 16rem),
    var(--c-white);
}
.promo-benefit--b {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .10), transparent 16rem),
    var(--c-white);
}
.promo-benefit__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .12), rgba(var(--c-accent-rgb), .12));
  color: var(--c-primary);
  margin-bottom: .9rem;
}
.promo-benefit__icon svg { width: 24px; height: 24px; }
.promo-benefit h3 { margin: 0 0 .5rem; color: var(--c-primary); font-weight: 800; font-size: 1.06rem; }
.promo-benefit p { margin: 0; color: var(--c-text); font-size: .9rem; line-height: 1.55; }

/* ---------- Promo Rules ---------- */
.promo-rules__head { max-width: 820px; }
.promo-rules__list {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .promo-rules__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.promo-rule {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.25rem;
  box-shadow: var(--c-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-height: 100%;
}
.promo-rule--a {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .07), transparent 14rem),
    var(--c-white);
}
.promo-rule--b {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .08), transparent 14rem),
    var(--c-white);
}
.promo-rule__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
}
.promo-rule__icon svg { width: 22px; height: 22px; }
.promo-rule h3 {
  margin: 0;
  color: var(--c-primary);
  font-weight: 800;
  font-size: 1.06rem;
}
.promo-rule p {
  margin: 0;
  color: var(--c-text);
  font-size: .92rem;
  line-height: 1.55;
}

/* ---------- Toast уведомление (Code copied) ---------- */
.promo-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  font-size: .92rem;
  font-weight: 700;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.promo-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.promo-toast svg { width: 18px; height: 18px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .promo-counter__value,
  .promo-spin__wheel,
  .promo-spin-modal__card,
  .promo-spin-modal__icon,
  .promo-card__code-real { animation: none; transition: none; }
  .promo-card:hover, .promo-stat:hover, .promo-benefit:hover, .promo-filter__chip:hover {
    transform: none;
  }
}

/* =============================================================================
   /contacts — Phase 1D.3 contacts rebuild.
   Префикс .contacts-*. Все цвета — через CSS-переменные бренда.
   Никаких hex/rgba/linear-gradient-хардкодов внутри этого блока.
   ============================================================================= */

/* ---------- contacts-hero ---------- */
.contacts-hero { padding: 2.8rem 0 2.6rem; }
.contacts-hero__grid {
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 900px) {
  .contacts-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 2.4rem;
  }
}
.contacts-hero__eyebrow { margin-bottom: .9rem; }
.contacts-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-text);
  font-weight: 800;
}
.contacts-hero__title-em {
  font-style: normal;
  display: inline-block;
  padding-bottom: .08em;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.contacts-hero__lead {
  margin: 0 0 1.4rem;
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  color: var(--c-text-muted);
  line-height: 1.55;
  max-width: 560px;
}
.contacts-hero__usp {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.contacts-hero__usp li {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--c-text);
  font-weight: 600;
}
.contacts-hero__usp svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.contacts-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

/* Phone-like contact card (right column) */
.contacts-hero__right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 460px;
}
.contacts-card {
  position: relative;
  width: 100%;
  max-width: 380px;
}
.contacts-card__halo {
  position: absolute;
  inset: -32px;
  z-index: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(var(--c-primary-rgb), .30), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(var(--c-accent-rgb),  .30), transparent 60%);
  filter: blur(30px);
  opacity: .85;
  border-radius: 40px;
  pointer-events: none;
}
.contacts-card__body {
  position: relative;
  z-index: 1;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--c-shadow-lg);
  display: grid;
  gap: 1rem;
}
.contacts-card__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
}
.contacts-card__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  font-weight: 800;
  font-size: 1.1rem;
}
.contacts-card__brand {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.contacts-card__brand-name {
  font-size: 1.02rem;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contacts-card__brand-sub {
  font-size: .78rem;
  color: var(--c-text-muted);
}
.contacts-card__badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 4px 9px;
  background: rgba(var(--c-accent-rgb), .12);
  color: var(--c-accent-dark);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}
.contacts-card__badge.is-closed {
  background: rgba(var(--c-warning-rgb), .14);
  color: var(--c-warning-text);
}
.contacts-card__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(var(--c-accent-rgb), .18);
  animation: contactsBadgePulse 2.4s ease-out infinite;
}
.contacts-card__badge.is-closed .contacts-card__badge-dot {
  box-shadow: 0 0 0 4px rgba(var(--c-warning-rgb), .18);
}
@keyframes contactsBadgePulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.15); opacity: .85; }
}
.contacts-card__meta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  width: max-content;
  max-width: 100%;
}
.contacts-card__meta svg { width: 14px; height: 14px; }
.contacts-card__channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.contacts-card__channel {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .65rem .85rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  background: var(--c-white);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.contacts-card__channel:hover {
  border-color: var(--c-primary);
  transform: translateY(-2px);
  box-shadow: var(--c-shadow-sm);
}
.contacts-card__channel:focus-visible {
  outline: 3px solid var(--c-primary-soft-2);
  outline-offset: 2px;
}
.contacts-card__channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--c-primary);
  background: var(--c-primary-soft);
}
.contacts-card__channel--email .contacts-card__channel-icon { color: var(--c-accent-dark); background: var(--c-accent-soft); }
.contacts-card__channel--chat  .contacts-card__channel-icon { color: var(--c-primary);     background: var(--c-primary-soft-2); }
.contacts-card__channel-icon svg { width: 18px; height: 18px; }
.contacts-card__channel-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.contacts-card__channel-label {
  font-weight: 700;
  color: var(--c-text);
  font-size: .96rem;
}
.contacts-card__channel-sub {
  font-size: .8rem;
  color: var(--c-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contacts-card__channel-arrow {
  color: var(--c-text-muted);
  transition: transform .2s ease, color .2s ease;
}
.contacts-card__channel:hover .contacts-card__channel-arrow {
  transform: translateX(3px);
  color: var(--c-primary);
}
.contacts-card__hint {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .82rem;
  color: var(--c-text-muted);
}
.contacts-card__hint svg {
  width: 16px;
  height: 16px;
  color: var(--c-primary);
  flex: 0 0 16px;
}

/* ---------- contacts-channels ---------- */
.contacts-channels__grid { margin-top: 1.4rem; }
.contacts-channel {
  position: relative;
  display: grid;
  gap: .55rem;
  padding: 1.2rem 1.2rem 1.3rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-xs);
  overflow: hidden;
}
.contacts-channel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-primary-rgb), .08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-accent-rgb), .08), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.contacts-channel > * { position: relative; z-index: 1; }
.contacts-channel__bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-primary-soft-2), var(--c-accent-soft-2));
  color: var(--c-primary);
}
.contacts-channel--email .contacts-channel__bubble { color: var(--c-accent-dark); }
.contacts-channel--chat  .contacts-channel__bubble { color: var(--c-primary); }
.contacts-channel--site  .contacts-channel__bubble { color: var(--c-accent-dark); }
.contacts-channel__bubble svg { width: 22px; height: 22px; }
.contacts-channel__title {
  margin: .15rem 0 0;
  font-size: 1.05rem;
  color: var(--c-text);
}
.contacts-channel__value {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--c-primary);
  word-break: break-word;
}
.contacts-channel__value:hover { color: var(--c-accent-dark); }
.contacts-channel--email .contacts-channel__value { color: var(--c-accent-dark); }
.contacts-channel--chat  .contacts-channel__value { color: var(--c-primary); }
.contacts-channel--site  .contacts-channel__value { color: var(--c-primary); }
.contacts-channel__sub {
  font-size: .82rem;
  color: var(--c-text-muted);
  font-weight: 500;
}
.contacts-channel__note {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .92rem;
  line-height: 1.5;
}

/* ---------- contacts-requisites ---------- */
.contacts-requisites__split {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .contacts-requisites__split {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
    gap: 1.6rem;
  }
}
.contacts-requisites__card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-xs);
  overflow: hidden;
}
.contacts-requisites__table {
  width: 100%;
  margin: 0;
}
.contacts-requisites__table th,
.contacts-requisites__table td {
  font-size: .98rem;
}
.contacts-requisites__mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-feature-settings: "tnum";
  letter-spacing: .01em;
}
.contacts-requisites__side {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-xs);
  padding: 1.2rem 1.2rem 1.3rem;
  display: grid;
  gap: .75rem;
  align-content: start;
}
.contacts-requisites__badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  width: max-content;
  max-width: 100%;
}
.contacts-requisites__badge--active {
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
}
.contacts-requisites__badge--inactive {
  background: rgba(var(--c-warning-rgb), .14);
  color: var(--c-warning-text);
}
.contacts-requisites__badge--service {
  background: rgba(var(--c-accent-rgb), .12);
  color: var(--c-accent-dark);
}
.contacts-requisites__badge svg { width: 14px; height: 14px; }
.contacts-requisites__side-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--c-text);
}
.contacts-requisites__side-text {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .92rem;
}
.contacts-requisites__cta {
  width: 100%;
  justify-content: center;
}
.contacts-requisites__cta svg { width: 16px; height: 16px; }

/* ---------- contacts-address (объединено с картой) ---------- */
.contacts-address__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 1.4rem;
}
@media (min-width: 900px) {
  .contacts-address__layout {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
    gap: 1.4rem;
  }
}
.contacts-address__card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.2rem 1.3rem;
  box-shadow: var(--c-shadow-sm);
  align-content: start;
}
.contacts-address__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  flex: 0 0 52px;
}
.contacts-address__pin svg { width: 26px; height: 26px; }
.contacts-address__body { min-width: 0; display: grid; gap: .55rem; }
.contacts-address__brand {
  margin: 0;
  font-size: 1.05rem;
  color: var(--c-primary);
}
.contacts-address__text {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.5;
}
.contacts-address__hint { margin: 0; font-size: .9rem; }
.contacts-address__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .2rem;
}
.contacts-address__copy.is-copied {
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  border-color: rgba(var(--c-accent-rgb), .28);
}

/* Map (Яндекс.Карты, API ключ + геокодер). */
.contacts-address__map-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-sm);
  min-height: 360px;
}
.contacts-address__map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
}
@media (max-width: 640px) {
  .contacts-address__map-wrap { min-height: 300px; }
  .contacts-address__map      { min-height: 300px; }
}
.contacts-address__map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: var(--c-text-muted);
  font-size: .9rem;
  pointer-events: none;
}
.contacts-address__map-fallback svg { width: 28px; height: 28px; color: var(--c-primary); }
.contacts-address__map-fallback.is-hidden { display: none; }

/* ---------- contacts-hours ---------- */
.contacts-hours__wrap {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-xs);
  padding: 1.2rem 1.2rem 1.3rem;
  margin-top: 1.4rem;
  display: grid;
  gap: 1rem;
}
.contacts-hours__live {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  font-weight: 700;
  font-size: .85rem;
  width: max-content;
}
.contacts-hours__live.is-closed {
  background: rgba(var(--c-warning-rgb), .14);
  color: var(--c-warning-text);
}
.contacts-hours__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(var(--c-accent-rgb), .2);
  animation: contactsBadgePulse 2.4s ease-out infinite;
}
.contacts-hours__live.is-closed .contacts-hours__live-dot {
  box-shadow: 0 0 0 4px rgba(var(--c-warning-rgb), .2);
}
.contacts-hours__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.contacts-hours__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem;
  padding: .8rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
}
@media (min-width: 700px) {
  .contacts-hours__item {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
  }
}
.contacts-hours__channel { display: grid; gap: 3px; }
.contacts-hours__channel strong { color: var(--c-text); font-size: 1rem; }
.contacts-hours__channel .muted { font-size: .85rem; }
.contacts-hours__value {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--c-text);
  font-weight: 600;
  font-size: .95rem;
}
.contacts-hours__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
}
.contacts-hours__note { margin: 0; font-size: .85rem; }

/* ---------- contacts-howto ---------- */
.contacts-howto__list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 800px) {
  .contacts-howto__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
}
.contacts-howto__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.2rem 1.2rem 1.3rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: var(--c-shadow-xs);
  overflow: hidden;
}
.contacts-howto__step::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-primary-rgb), .08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-accent-rgb),  .08), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.contacts-howto__step--b::before {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb),  .08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-primary-rgb), .08), transparent 55%);
}
.contacts-howto__step > * { position: relative; z-index: 1; }
.contacts-howto__num {
  position: absolute;
  top: -.2rem;
  right: -.3rem;
  z-index: 0;
  font-size: 4.2rem;
  font-weight: 900;
  color: rgba(var(--c-primary-rgb), .08);
  line-height: 1;
  pointer-events: none;
}
.contacts-howto__step--b .contacts-howto__num { color: rgba(var(--c-accent-rgb), .12); }
.contacts-howto__body { min-width: 0; display: grid; gap: .35rem; }
.contacts-howto__eyebrow {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.contacts-howto__step--b .contacts-howto__eyebrow { color: var(--c-accent-dark); }
.contacts-howto__body h3 { margin: 0; font-size: 1.08rem; color: var(--c-text); }
.contacts-howto__body p { margin: 0; color: var(--c-text-muted); font-size: .94rem; line-height: 1.55; }

/* ---------- contacts-routes ---------- */
.contacts-routes__grid { margin-top: 1.4rem; }
.contacts-route {
  position: relative;
  display: grid;
  gap: .5rem;
  padding: 1.2rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-xs);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.contacts-route::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-primary-rgb), .08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-accent-rgb),  .08), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.contacts-route:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--c-primary-rgb), .35);
  box-shadow: var(--c-shadow-sm);
}
.contacts-route > * { position: relative; z-index: 1; }
.contacts-route__bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.contacts-route__bubble svg { width: 22px; height: 22px; }
.contacts-route__eyebrow {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
}
.contacts-route__title { margin: 0; font-size: 1.05rem; color: var(--c-text); }
.contacts-route__text {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .92rem;
  line-height: 1.55;
}
.contacts-route__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .3rem;
  color: var(--c-primary);
  font-weight: 700;
  font-size: .94rem;
}
.contacts-route__cta:hover { color: var(--c-accent-dark); }

/* ---------- contacts-rights ---------- */
.contacts-rights__list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}
.contacts-rights__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: var(--c-shadow-xs);
}
.contacts-rights__bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
}
.contacts-rights__bubble svg { width: 20px; height: 20px; }
.contacts-rights__body { min-width: 0; display: grid; gap: .25rem; }
.contacts-rights__title { margin: 0; font-size: 1rem; color: var(--c-text); }
.contacts-rights__text {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .9rem;
  line-height: 1.55;
}
.contacts-rights__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
  color: var(--c-primary);
  font-weight: 700;
  font-size: .9rem;
}
.contacts-rights__cta:hover { color: var(--c-accent-dark); }

/* ---------- /contacts FAQ categories ---------- */
/* /contacts FAQ categories — НЕ переопределяем цвета: единый бренд-
   нейтральный стиль из базового .faq__cat (серый чип, accent на [open]). */

/* ---------- Reduced motion (contacts) ---------- */
@media (prefers-reduced-motion: reduce) {
  .contacts-card__badge-dot,
  .contacts-hours__live-dot { animation: none; }
  .contacts-route:hover,
  .contacts-card__channel:hover { transform: none; }
  .contacts-card__channel-arrow { transition: none; }
}

/* =============================================================================
   /faq — Phase 1D.3 image-aligned rebuild.
   Префикс .faq-hero / .faq-finder / .faq-topic / .faq-checks / .faq-help /
   .faq-route. Все цвета — через CSS-переменные бренда, без хардкода.
   ============================================================================= */

/* ---------- faq-hero ---------- */
.faq-hero { padding: 2.8rem 0 2.6rem; }
.faq-hero__grid {
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 900px) {
  .faq-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 2.4rem;
  }
}
.faq-hero__eyebrow { margin-bottom: .9rem; }
.faq-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-text);
  font-weight: 800;
}
.faq-hero__title-em {
  font-style: normal;
  display: inline-block;
  padding-bottom: .08em;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.faq-hero__lead {
  margin: 0 0 1.4rem;
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  color: var(--c-text-muted);
  line-height: 1.55;
  max-width: 560px;
}
.faq-hero__usp {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.faq-hero__usp li {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--c-text);
  font-weight: 600;
}
.faq-hero__usp svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.faq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

/* Finder-card (правая колонка hero) */
.faq-hero__right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 420px;
}
.faq-finder {
  position: relative;
  width: 100%;
  max-width: 380px;
}
.faq-finder__halo {
  position: absolute;
  inset: -32px;
  z-index: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(var(--c-primary-rgb), .30), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(var(--c-accent-rgb),  .30), transparent 60%);
  filter: blur(30px);
  opacity: .85;
  border-radius: 40px;
  pointer-events: none;
}
.faq-finder__body {
  position: relative;
  z-index: 1;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--c-shadow-lg);
  display: grid;
  gap: 1rem;
}
.faq-finder__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .8rem;
}
.faq-finder__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
}
.faq-finder__icon svg { width: 20px; height: 20px; }
.faq-finder__heading { display: grid; gap: 2px; min-width: 0; }
.faq-finder__heading strong { font-size: 1.02rem; color: var(--c-text); }
.faq-finder__heading span { font-size: .78rem; color: var(--c-text-muted); }
.faq-finder__cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.faq-finder__cat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .65rem .85rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  background: var(--c-white);
  font-weight: 600;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.faq-finder__cat:hover {
  border-color: var(--c-primary);
  transform: translateY(-2px);
  box-shadow: var(--c-shadow-sm);
  color: var(--c-primary);
}
.faq-finder__cat:focus-visible {
  outline: 3px solid var(--c-primary-soft-2);
  outline-offset: 2px;
}
.faq-finder__cat svg { color: var(--c-text-muted); transition: transform .2s ease, color .2s ease; }
.faq-finder__cat:hover svg { transform: translateX(3px); color: var(--c-primary); }
.faq-finder__cat--start   { border-left: 3px solid rgba(var(--c-primary-rgb), .55); }
.faq-finder__cat--money   { border-left: 3px solid rgba(var(--c-accent-rgb),  .65); }
.faq-finder__cat--payment { border-left: 3px solid rgba(var(--c-primary-rgb), .35); }
.faq-finder__cat--risk    { border-left: 3px solid rgba(var(--c-warning-rgb), .60); }
.faq-finder__open {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .2rem;
  color: var(--c-primary);
  font-weight: 700;
  font-size: .92rem;
}
.faq-finder__open svg { width: 16px; height: 16px; }
.faq-finder__open:hover { color: var(--c-accent-dark); }

/* ---------- faq-topics ---------- */
.faq-topics__grid { margin-top: 1.4rem; }
.faq-topic {
  position: relative;
  display: grid;
  gap: .5rem;
  padding: 1.2rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-xs);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.faq-topic::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-primary-rgb), .08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-accent-rgb),  .08), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.faq-topic--money::before,
.faq-topic--risk::before {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb),  .08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-primary-rgb), .08), transparent 55%);
}
.faq-topic:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--c-primary-rgb), .35);
  box-shadow: var(--c-shadow-sm);
}
.faq-topic > * { position: relative; z-index: 1; }
.faq-topic__bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.faq-topic--money  .faq-topic__bubble { background: var(--c-accent-soft);     color: var(--c-accent-dark); }
.faq-topic--risk   .faq-topic__bubble { background: rgba(var(--c-warning-rgb), .14); color: var(--c-warning-text); }
.faq-topic__bubble svg { width: 22px; height: 22px; }
.faq-topic__eyebrow {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
}
.faq-topic__title { margin: 0; font-size: 1.05rem; color: var(--c-text); }
.faq-topic__text {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .92rem;
  line-height: 1.55;
}
.faq-topic__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .3rem;
  color: var(--c-primary);
  font-weight: 700;
  font-size: .94rem;
}
.faq-topic__cta:hover { color: var(--c-accent-dark); }

/* ---------- faq-checks ---------- */
.faq-checks__list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 800px) {
  .faq-checks__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }
}
.faq-checks__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.2rem 1.2rem 1.3rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: var(--c-shadow-xs);
  overflow: hidden;
}
.faq-checks__step::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-primary-rgb), .08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-accent-rgb),  .08), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.faq-checks__step--b::before {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb),  .08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-primary-rgb), .08), transparent 55%);
}
.faq-checks__step > * { position: relative; z-index: 1; }
.faq-checks__num {
  position: absolute;
  top: -.2rem;
  right: -.3rem;
  z-index: 0;
  font-size: 4.2rem;
  font-weight: 900;
  color: rgba(var(--c-primary-rgb), .08);
  line-height: 1;
  pointer-events: none;
}
.faq-checks__step--b .faq-checks__num { color: rgba(var(--c-accent-rgb), .12); }
.faq-checks__body { min-width: 0; display: grid; gap: .35rem; }
.faq-checks__eyebrow {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.faq-checks__step--b .faq-checks__eyebrow { color: var(--c-accent-dark); }
.faq-checks__body h3 { margin: 0; font-size: 1.08rem; color: var(--c-text); }
.faq-checks__body p { margin: 0; color: var(--c-text-muted); font-size: .94rem; line-height: 1.55; }

/* ---------- faq-help (dark gradient panel) ---------- */
.faq-help__panel {
  position: relative;
  padding: 1.6rem 1.4rem 1.7rem;
  border-radius: var(--radius-xl);
  background: var(--bg-primary-dark-gradient);
  color: var(--c-white);
  box-shadow: var(--c-shadow-lg);
  overflow: hidden;
}
@media (min-width: 780px) {
  .faq-help__panel { padding: 2rem 2.2rem 2.2rem; }
}
.faq-help__halo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .25), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-primary-rgb), .35), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.faq-help__body { position: relative; z-index: 1; display: grid; gap: .8rem; max-width: 760px; }
.faq-help__chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(var(--c-white-rgb), .14);
  color: var(--c-white);
  font-size: .82rem;
  font-weight: 700;
  width: max-content;
}
.faq-help__chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(var(--c-white-rgb), .14);
}
.faq-help__title {
  margin: 0;
  color: var(--c-white);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  line-height: 1.25;
}
.faq-help__lead {
  margin: 0;
  color: rgba(var(--c-white-rgb), .80);
  font-size: 1rem;
  line-height: 1.55;
}
.faq-help__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: .2rem;
}
.faq-help__cta-secondary { color: var(--c-white); }

/* ---------- faq-routes ---------- */
.faq-routes__grid { margin-top: 1.4rem; }
.faq-route {
  position: relative;
  display: grid;
  gap: .5rem;
  padding: 1.2rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-xs);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.faq-route::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-primary-rgb), .08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-accent-rgb),  .08), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.faq-route:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--c-primary-rgb), .35);
  box-shadow: var(--c-shadow-sm);
}
.faq-route > * { position: relative; z-index: 1; }
.faq-route__bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
}
.faq-route__bubble svg { width: 22px; height: 22px; }
.faq-route__eyebrow {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.faq-route__title { margin: 0; font-size: 1.05rem; color: var(--c-text); }
.faq-route__text {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .92rem;
  line-height: 1.55;
}
.faq-route__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .3rem;
  color: var(--c-primary);
  font-weight: 700;
  font-size: .94rem;
}
.faq-route__cta:hover { color: var(--c-accent-dark); }

/* ---------- Reduced motion (faq) ---------- */
@media (prefers-reduced-motion: reduce) {
  .faq-topic:hover, .faq-route:hover, .faq-finder__cat:hover { transform: none; }
  .faq-finder__cat svg { transition: none; }
}

/* =============================================================================
   /top — Phase 1D.3: рейтинг займов в имидже сайта.
   Префикс .top-hero / .top-highlight / .top-method / .top-list / .top-card /
   .top-howto / .top-article. Все цвета — через CSS-переменные.
   ============================================================================= */

/* ---------- top-hero ---------- */
.top-hero { padding: 2.8rem 0 2.6rem; }
.top-hero__grid {
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 900px) {
  .top-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 2.4rem;
  }
}
.top-hero__eyebrow { margin-bottom: .9rem; }
.top-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-text);
  font-weight: 800;
}
.top-hero__title-em {
  font-style: normal;
  display: inline-block;
  padding-bottom: .08em;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.top-hero__lead {
  margin: 0 0 1.4rem;
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  color: var(--c-text-muted);
  line-height: 1.55;
  max-width: 560px;
}
.top-hero__usp {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.top-hero__usp li {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--c-text);
  font-weight: 600;
}
.top-hero__usp svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.top-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

/* Highlight-карточка (правая колонка hero) — №1 рейтинга. */
.top-hero__right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 440px;
}
.top-highlight {
  position: relative;
  width: 100%;
  max-width: 380px;
}
.top-highlight__halo {
  position: absolute;
  inset: -32px;
  z-index: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(var(--c-primary-rgb), .30), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(var(--c-accent-rgb),  .30), transparent 60%);
  filter: blur(30px);
  opacity: .85;
  border-radius: 40px;
  pointer-events: none;
}
.top-highlight__body {
  position: relative;
  z-index: 1;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--c-shadow-lg);
  display: grid;
  gap: 1rem;
}
.top-highlight__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}
.top-highlight__rank {
  display: inline-flex;
  align-items: center;
  padding: .3rem .65rem;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  border-radius: 999px;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .02em;
}
.top-highlight__badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
}
.top-highlight__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(var(--c-accent-rgb), .18);
  animation: topHighlightPulse 2.4s ease-out infinite;
}
@keyframes topHighlightPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.15); opacity: .85; }
}
.top-highlight__brand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .8rem;
}
.top-highlight__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  color: var(--c-primary);
  font-weight: 900;
  font-size: 1.25rem;
  overflow: hidden;
  flex: 0 0 52px;
}
.top-highlight__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  display: block;
}
.top-highlight__mark-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--c-primary-soft-2), var(--c-accent-soft-2));
}
.top-highlight__brand-text { display: grid; gap: 2px; min-width: 0; }
.top-highlight__brand-text strong {
  font-size: 1.08rem;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-highlight__brand-text span {
  font-size: .8rem;
  color: var(--c-text-muted);
}
/* Highlight metrics — горизонтальный layout «название слева — значение справа»
   (паттерн partner-card__metrics). Текст не обрезается и не переносится
   уродливо: dt/dd на одной строке, разделители-линии между парами. */
.top-highlight__metrics {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg-soft);
}
.top-highlight__metrics > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .8rem;
  padding: .55rem .8rem;
  font-size: .92rem;
}
.top-highlight__metrics > div + div {
  border-top: 1px solid var(--c-border);
}
.top-highlight__metrics dt {
  color: var(--c-text-muted);
  font-weight: 500;
}
.top-highlight__metrics dd {
  margin: 0;
  text-align: right;
  font-weight: 800;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.top-highlight__cta { justify-content: center; }
.top-highlight__hint {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .8rem;
  color: var(--c-text-muted);
}
.top-highlight__hint svg {
  width: 16px;
  height: 16px;
  color: var(--c-primary);
  flex: 0 0 16px;
}

/* ---------- top-method ---------- */
.top-method__grid { margin-top: 1.4rem; }
.top-method-card {
  position: relative;
  display: grid;
  gap: .55rem;
  padding: 1.2rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-xs);
  overflow: hidden;
}
.top-method-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-primary-rgb), .08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-accent-rgb),  .08), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.top-method-card--b::before {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb),  .08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-primary-rgb), .08), transparent 55%);
}
.top-method-card > * { position: relative; z-index: 1; }
.top-method-card__weight {
  position: absolute;
  top: .8rem;
  right: 1rem;
  font-size: 1.4rem;
  font-weight: 900;
  color: rgba(var(--c-primary-rgb), .25);
  z-index: 1;
  pointer-events: none;
}
.top-method-card--b .top-method-card__weight {
  color: rgba(var(--c-accent-rgb), .35);
}
.top-method-card__bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.top-method-card--b .top-method-card__bubble {
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
}
.top-method-card__bubble svg { width: 22px; height: 22px; }
.top-method-card__title {
  margin: .15rem 0 0;
  font-size: 1.05rem;
  color: var(--c-text);
}
.top-method-card__text {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .92rem;
  line-height: 1.55;
}

/* ---------- top-list ---------- */
.top-list__empty {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--c-bg-soft);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-lg);
}
.top-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.4rem 0 1.2rem;
}
.top-list__meta-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: .88rem;
  color: var(--c-text);
  box-shadow: var(--c-shadow-xs);
}
.top-list__meta-chip svg {
  width: 16px;
  height: 16px;
  color: var(--c-accent-dark);
  flex: 0 0 16px;
}
.top-list__meta-chip strong { color: var(--c-primary); font-weight: 800; }

.top-list__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 700px)  { .top-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1050px) { .top-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.top-list__grid--personalizing {
  position: relative;
  min-height: 190px;
  align-items: start;
}
.top-list__grid--personalizing .top-card {
  display: none;
}
.top-list__grid--personalizing::before,
.top-list__grid--personalizing::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.top-list__grid--personalizing::before {
  content: "";
  top: 42px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(var(--c-primary-rgb), .14);
  border-top-color: var(--c-accent);
  animation: setmfo-spin .8s linear infinite;
}
.top-list__grid--personalizing::after {
  content: "Собираем персональный порядок предложений";
  top: 96px;
  width: min(100%, 460px);
  padding: .9rem 1rem;
  border: 1px solid rgba(var(--c-primary-rgb), .14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--c-shadow-xs);
  color: var(--c-text);
  font-weight: 800;
  text-align: center;
}


.top-card {
  position: relative;
  display: grid;
  gap: .7rem;
  padding: 1.3rem 1.2rem 1.3rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-xs);
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.top-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-primary-rgb), .06), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-accent-rgb),  .06), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.top-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--c-primary-rgb), .35);
  box-shadow: var(--c-shadow-sm);
}
.top-card > * { position: relative; z-index: 1; }
.top-card--top {
  border-color: rgba(var(--c-accent-rgb), .50);
  box-shadow: 0 16px 32px -16px rgba(var(--c-accent-rgb), .25);
}
.top-card--top::before {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb), .12), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-primary-rgb), .10), transparent 55%);
}
.top-card--extra { display: none; }
.top-card--visited {
  opacity: .82;
  border-style: dashed;
}

.top-card__top-badge {
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 2;
  padding: .25rem .7rem;
  background: var(--bg-accent-bright-gradient);
  color: var(--c-white);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 0 0 var(--radius) 0;
  pointer-events: none;
}
.top-card__free-badge {
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 2;
  padding: .25rem .7rem;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 0 0 var(--radius) 0;
  pointer-events: none;
}
.top-card__rank-pill {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  padding: .2rem .55rem;
  background: rgba(var(--c-primary-rgb), .10);
  color: var(--c-primary);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .02em;
  pointer-events: none;
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-card--top .top-card__rank-pill { display: none; }

.top-card__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .75rem;
  margin-top: .4rem;
}
.top-card__logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--c-bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 48px;
}
.top-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.top-card__initials {
  font-weight: 800;
  color: var(--c-primary);
  font-size: 1.05rem;
}
.top-card__title { min-width: 0; display: grid; gap: 2px; }
.top-card__rank {
  font-size: .72rem;
  color: var(--c-text-muted);
  font-weight: 700;
  letter-spacing: .04em;
}
.top-card__name {
  margin: 0;
  font-size: 1.05rem;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Top-card metrics — горизонтальный layout «название слева — значение справа»
   (паттерн partner-card__metrics). Текст не обрезается: dt/dd на одной
   строке, разделители-линии между парами. На узких карточках значение
   переносится по словам (overflow-wrap: anywhere) — никаких …. */
.top-card__metrics {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg-soft);
}
.top-card__metrics > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .6rem;
  padding: .5rem .7rem;
  font-size: .88rem;
}
.top-card__metrics > div + div {
  border-top: 1px solid var(--c-border);
}
.top-card__metrics dt {
  color: var(--c-text-muted);
  font-weight: 500;
}
.top-card__metrics dd {
  margin: 0;
  text-align: right;
  font-weight: 800;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.top-card__cta { justify-content: center; }
.top-card__foot {
  margin: 0;
  font-size: .76rem;
  color: var(--c-text-muted);
  line-height: 1.4;
}

.top-list__more {
  text-align: center;
  margin-top: 1.5rem;
}
.top-list__more-btn svg {
  margin-left: .35rem;
  vertical-align: -3px;
}
.top-list__more-count {
  font-weight: 700;
  color: var(--c-text-muted);
  margin-left: .25rem;
}
.top-list__note { margin: 1rem 0 0; font-size: .85rem; text-align: center; }

/* ---------- top-howto ---------- */
.top-howto__list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 800px) {
  .top-howto__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
}
.top-howto__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.2rem 1.2rem 1.3rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: var(--c-shadow-xs);
  overflow: hidden;
}
.top-howto__step::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-primary-rgb), .08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-accent-rgb),  .08), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.top-howto__step--b::before {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-accent-rgb),  .08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(var(--c-primary-rgb), .08), transparent 55%);
}
.top-howto__step > * { position: relative; z-index: 1; }
.top-howto__num {
  position: absolute;
  top: -.2rem;
  right: -.3rem;
  z-index: 0;
  font-size: 4.2rem;
  font-weight: 900;
  color: rgba(var(--c-primary-rgb), .08);
  line-height: 1;
  pointer-events: none;
}
.top-howto__step--b .top-howto__num { color: rgba(var(--c-accent-rgb), .12); }
.top-howto__body { min-width: 0; display: grid; gap: .35rem; }
.top-howto__eyebrow {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.top-howto__step--b .top-howto__eyebrow { color: var(--c-accent-dark); }
.top-howto__body h3 { margin: 0; font-size: 1.08rem; color: var(--c-text); }
.top-howto__body p { margin: 0; color: var(--c-text-muted); font-size: .94rem; line-height: 1.55; }

/* ---------- top-faq (использует общий .faq-section + категории) ---------- */
/* /top FAQ categories — НЕ переопределяем цвета: используем единый
   бренд-нейтральный стиль из базового .faq__cat (серый чип, accent
   на [open]). «Светофор» из разных цветов был ошибкой имиджа. */

/* ---------- top-article ---------- */
.top-article__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 1.4rem;
}
@media (min-width: 900px) {
  .top-article__grid { grid-template-columns: 1fr 1fr; }
}
.top-article__card {
  position: relative;
  padding: 1.4rem 1.3rem 1.5rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow-xs);
  overflow: hidden;
}
.top-article__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--c-primary-rgb), .06), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.top-article__card--b::before {
  background:
    radial-gradient(circle at 0% 100%, rgba(var(--c-accent-rgb), .08), transparent 55%);
}
.top-article__card > * { position: relative; z-index: 1; }
.top-article__eyebrow {
  display: inline-block;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: .5rem;
}
.top-article__card--b .top-article__eyebrow { color: var(--c-accent-dark); }
.top-article__card h3 {
  margin: 0 0 .6rem;
  font-size: 1.15rem;
  color: var(--c-text);
  line-height: 1.3;
}
.top-article__card p {
  margin: 0 0 .6rem;
  color: var(--c-text-muted);
  font-size: .96rem;
  line-height: 1.6;
}
.top-article__card p:last-child { margin-bottom: 0; }

/* ---------- Reduced motion (top) ---------- */
@media (prefers-reduced-motion: reduce) {
  .top-highlight__badge-dot { animation: none; }
  .top-card:hover { transform: none; transition: none; }
}

/* ---------- /top scenario filter chips ---------- */
.top-list__scenarios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.2rem;
  padding: .8rem .9rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.top-list__scenarios-label {
  margin-right: .3rem;
  color: var(--c-text-muted);
  font-size: .85rem;
  font-weight: 600;
}
.top-list__scenario {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-text);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}
.top-list__scenario:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  transform: translateY(-1px);
}
.top-list__scenario svg {
  width: 14px;
  height: 14px;
  color: var(--c-accent-dark);
  flex: 0 0 14px;
}
.top-list__scenario.is-active {
  background: var(--bg-accent-bright-gradient);
  border-color: transparent;
  color: var(--c-white);
}
.top-list__scenario.is-active svg { color: var(--c-white); }
.top-list__scenario.is-active .top-list__scenario-count { color: rgba(var(--c-white-rgb), .85); }
.top-list__scenario.is-empty {
  opacity: .45;
  cursor: not-allowed;
}
.top-list__scenario.is-empty:hover {
  border-color: var(--c-border);
  color: var(--c-text);
  transform: none;
}
.top-list__scenario-count {
  color: var(--c-text-muted);
  font-weight: 700;
  font-size: .8rem;
}

/* hidden by scenario filter — отличается от .top-card--extra тем, что
   полностью убирается из layout, а не «прячется до показать ещё» */
.top-card--hidden { display: none; }
.top-list__more.is-hidden { display: none; }

/* =============================================================================
   /oformit — Phase 1D.4. Префикс .oformit-*.
   ============================================================================= */
.oformit-hero { padding: 2.8rem 0 2.6rem; }
.oformit-hero__grid {
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 900px) {
  .oformit-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 2.4rem;
  }
}
.oformit-hero__eyebrow { margin-bottom: .9rem; }
.oformit-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-text);
  font-weight: 800;
}
.oformit-hero__title-em {
  font-style: normal;
  display: inline-block;
  padding-bottom: .08em;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.oformit-hero__lead {
  margin: 0 0 1.4rem;
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  color: var(--c-text-muted);
  line-height: 1.55;
  max-width: 560px;
}
.oformit-hero__usp {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.oformit-hero__usp li {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--c-text);
  font-weight: 600;
}
.oformit-hero__usp svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.oformit-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

/* Right column — карточка с таймером + требования */
.oformit-hero__right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 440px;
}
.oformit-card {
  position: relative;
  width: 100%;
  max-width: 400px;
}
.oformit-card__halo {
  position: absolute;
  inset: -32px;
  z-index: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(var(--c-primary-rgb), .30), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(var(--c-accent-rgb),  .30), transparent 60%);
  filter: blur(30px);
  opacity: .85;
  border-radius: 40px;
  pointer-events: none;
}
.oformit-card__body {
  position: relative;
  z-index: 1;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--c-shadow-lg);
  display: grid;
  gap: 1rem;
}
.oformit-card__timer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  background: var(--bg-primary-accent-gradient-10);
  border-radius: var(--radius);
}
.oformit-card__timer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  flex: 0 0 36px;
}
.oformit-card__timer-icon svg { width: 18px; height: 18px; }
.oformit-card__timer-text { display: grid; gap: 2px; min-width: 0; }
.oformit-card__timer-label {
  font-size: .72rem;
  color: var(--c-text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.oformit-card__timer-value {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1.1;
}
.oformit-card__timer-arrive {
  text-align: right;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.oformit-card__timer-arrive-label {
  font-size: .72rem;
  color: var(--c-text-muted);
}
.oformit-card__timer-arrive-value {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--c-accent-dark);
  font-variant-numeric: tabular-nums;
}
.oformit-card__title {
  margin: .25rem 0 .25rem;
  font-size: 1.08rem;
  color: var(--c-text);
}
.oformit-card__reqs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.oformit-card__reqs li {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--c-text);
  font-size: .92rem;
  font-weight: 500;
}
.oformit-card__reqs svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.oformit-card__cta { justify-content: center; margin-top: .35rem; }
.oformit-card__note {
  margin: 0;
  font-size: .78rem;
  color: var(--c-text-muted);
  line-height: 1.4;
}
.oformit-card__note a {
  color: var(--c-accent-dark);
  font-weight: 600;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .oformit-card__halo { transition: none; }
}

/* =============================================================================
   /oplata — Phase 1D.4. Префикс .oplata-*.
   ============================================================================= */
.oplata-hero { padding: 2.8rem 0 2.6rem; }
.oplata-hero__grid {
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 900px) {
  .oplata-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 2.4rem;
  }
}
.oplata-hero__eyebrow { margin-bottom: .9rem; }
.oplata-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-text);
  font-weight: 800;
}
.oplata-hero__title-em {
  font-style: normal;
  display: inline-block;
  padding-bottom: .08em;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.oplata-hero__lead {
  margin: 0 0 1.4rem;
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  color: var(--c-text-muted);
  line-height: 1.55;
  max-width: 560px;
}
.oplata-hero__usp {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.oplata-hero__usp li {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--c-text);
  font-weight: 600;
}
.oplata-hero__usp svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.oplata-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

/* Reminder-card справа */
.oplata-hero__right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 420px;
}
.oplata-card {
  position: relative;
  width: 100%;
  max-width: 400px;
}
.oplata-card__halo {
  position: absolute;
  inset: -32px;
  z-index: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(var(--c-primary-rgb), .30), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(var(--c-accent-rgb),  .30), transparent 60%);
  filter: blur(30px);
  opacity: .85;
  border-radius: 40px;
  pointer-events: none;
}
.oplata-card__body {
  position: relative;
  z-index: 1;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--c-shadow-lg);
  display: grid;
  gap: .9rem;
}
.oplata-card__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  width: max-content;
}
.oplata-card__chip svg { width: 14px; height: 14px; }
.oplata-card__title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--c-text);
  line-height: 1.3;
}
.oplata-card__lead {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .94rem;
  line-height: 1.55;
}
.oplata-card__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.oplata-card__facts li {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--c-text);
  font-size: .92rem;
  font-weight: 500;
}
.oplata-card__facts svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.oplata-card__cta { justify-content: center; margin-top: .35rem; }
.oplata-card__note {
  margin: 0;
  font-size: .78rem;
  color: var(--c-text-muted);
  line-height: 1.4;
}

/* ============================================================================
   /end — Phase 1D.5. Префикс .end-*.
   Реюз большей части стилей .oplata-hero / .oplata-card (только warning-tint
   и safety-grid — собственные).
   ============================================================================ */
.end-hero { padding: 2.8rem 0 2.6rem; }
.end-hero__grid {
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 900px) {
  .end-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 2.4rem;
  }
}
.end-hero__eyebrow { margin-bottom: .9rem; }
.end-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.7rem, 1.15rem + 2.4vw, 2.85rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-text);
  font-weight: 800;
}
.end-hero__title-em {
  font-style: normal;
  display: inline-block;
  padding-bottom: .08em;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.end-hero__lead {
  margin: 0 0 1.4rem;
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  color: var(--c-text-muted);
  line-height: 1.55;
  max-width: 580px;
}
.end-hero__usp {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.end-hero__usp li {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--c-text);
  font-weight: 600;
}
.end-hero__usp svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.end-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

/* Warning-card справа */
.end-hero__right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 420px;
}
.end-card {
  position: relative;
  width: 100%;
  max-width: 400px;
}
.end-card__halo {
  position: absolute;
  inset: -32px;
  z-index: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(var(--c-primary-rgb), .28), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(255, 159, 28, .28), transparent 60%);
  filter: blur(30px);
  opacity: .85;
  border-radius: 40px;
  pointer-events: none;
}
.end-card__body {
  position: relative;
  z-index: 1;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--c-shadow-lg);
  display: grid;
  gap: .9rem;
}
.end-card__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  width: max-content;
}
.end-card__chip--warning {
  background: rgba(244, 162, 97, .18);
  color: #b25c1e;
}
.end-card__chip svg { width: 14px; height: 14px; }
.end-card__title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--c-text);
  line-height: 1.3;
}
.end-card__lead {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .94rem;
  line-height: 1.55;
}
.end-card__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.end-card__facts li {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--c-text);
  font-size: .92rem;
  font-weight: 500;
}
.end-card__facts svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(244, 162, 97, .18);
  color: #b25c1e;
}
.end-card__cta { justify-content: center; margin-top: .35rem; }
.end-card__note {
  margin: 0;
  font-size: .78rem;
  color: var(--c-text-muted);
  line-height: 1.45;
}
.end-card__note a {
  color: var(--c-primary);
  text-decoration: none;
  font-weight: 600;
}
.end-card__note a:hover { text-decoration: underline; }

/* end-safety — 4 правила безопасности.
   Простой 2-колоночный grid с цветными иконками. */
.end-safety__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px) {
  .end-safety__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.end-safety__card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.2rem 1.3rem;
  box-shadow: var(--c-shadow-sm);
  display: grid;
  gap: .65rem;
}
.end-safety__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .12), rgba(var(--c-accent-rgb), .12));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
}
.end-safety__icon svg { width: 22px; height: 22px; }
.end-safety__card h3 {
  margin: 0;
  font-size: 1.08rem;
  color: var(--c-text);
  font-weight: 700;
}
.end-safety__card p {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .94rem;
  line-height: 1.55;
}

/* ============================================================================
   /politika — Phase 1D.6. Префикс .politika-*.
   Реюз структуры hero/card из .end-* и .oplata-*; собственное:
   .politika-toc (содержание-карточка) и .politika-doc__body (длинный prose).
   ============================================================================ */
.politika-hero { padding: 2.8rem 0 2.6rem; }
.politika-hero__grid {
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 900px) {
  .politika-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 2.4rem;
  }
}
.politika-hero__eyebrow { margin-bottom: .9rem; }
.politika-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.7rem, 1.15rem + 2.4vw, 2.85rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-text);
  font-weight: 800;
}
.politika-hero__title-em {
  font-style: normal;
  display: inline-block;
  padding-bottom: .08em;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.politika-hero__lead {
  margin: 0 0 1.4rem;
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  color: var(--c-text-muted);
  line-height: 1.6;
  max-width: 620px;
}
.politika-hero__usp {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.politika-hero__usp li {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--c-text);
  font-weight: 600;
}
.politika-hero__usp svg {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(var(--c-accent-rgb), .15);
  color: var(--c-accent-dark);
}
.politika-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* TOC-карточка справа */
.politika-hero__right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.politika-toc {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--c-shadow-md);
  display: grid;
  gap: .85rem;
}
.politika-toc__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  background: rgba(var(--c-primary-rgb), .12);
  color: var(--c-primary);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  width: max-content;
}
.politika-toc__chip svg { width: 14px; height: 14px; }
.politika-toc__title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--c-text);
}
.politika-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
  counter-reset: none;
}
.politika-toc__list li a {
  display: block;
  padding: .45rem .55rem;
  border-radius: 8px;
  color: var(--c-text);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.politika-toc__list li a:hover {
  background: rgba(var(--c-primary-rgb), .08);
  color: var(--c-primary);
}
.politika-toc__note {
  margin: .35rem 0 0;
  font-size: .78rem;
  color: var(--c-text-muted);
  line-height: 1.45;
}

/* Основной длинный документ */
.politika-doc { padding: 2.2rem 0; }
.politika-doc__body {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 2rem 1.6rem;
  box-shadow: var(--c-shadow-sm);
}
@media (min-width: 720px) {
  .politika-doc__body { padding: 2.4rem 2.4rem; }
}
.politika-doc__body h2 {
  margin: 2rem 0 .9rem;
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--c-text);
  scroll-margin-top: 80px;
}
.politika-doc__body h2:first-of-type { margin-top: 0; }
.politika-doc__body h3 {
  margin: 1.4rem 0 .6rem;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--c-text);
}
.politika-doc__body p {
  margin: 0 0 .9rem;
  color: var(--c-text);
  line-height: 1.7;
  font-size: 1rem;
}
.politika-doc__body ul {
  margin: 0 0 1.1rem 1.2rem;
  padding: 0;
}
.politika-doc__body ul li {
  margin-bottom: .45rem;
  line-height: 1.65;
  color: var(--c-text);
}
.politika-doc__body strong { color: var(--c-text); font-weight: 700; }
.politika-doc__body a {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 500;
}
.politika-doc__body a:hover { color: var(--c-accent-dark); }

/* Cookies — расширение для срока жизни в карточке */
.politika-cookies .top-method-card__lifetime {
  margin: -.2rem 0 .6rem;
  font-size: .82rem;
  color: var(--c-text-muted);
}
.politika-cookies .top-method-card__lifetime strong { color: var(--c-text); }

/* Яндекс.Метрика — отдельная gradient-карточка под cookie-grid */
.politika-metrika {
  margin-top: 1.8rem;
  background: linear-gradient(135deg,
    rgba(var(--c-primary-rgb), .06),
    rgba(var(--c-accent-rgb), .06));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.4rem 1.6rem;
  display: grid;
  gap: .9rem;
}
.politika-metrika__head {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.politika-metrika__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  background: var(--c-white);
  color: var(--c-primary);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
}
.politika-metrika__chip svg { width: 14px; height: 14px; }
.politika-metrika__head h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--c-text);
}
.politika-metrika__body p { margin: 0 0 .7rem; color: var(--c-text); line-height: 1.6; }
.politika-metrika__body ul { margin: .2rem 0 0 1.2rem; padding: 0; }
.politika-metrika__body ul li { margin-bottom: .4rem; line-height: 1.55; }
.politika-metrika__body a { color: var(--c-primary); text-decoration: underline; }

.politika-cookies__help {
  margin-top: 1.8rem;
  padding: 1.3rem 1.3rem 1.4rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  background: var(--c-white);
}
.politika-cookies__help h3 { margin: 0 0 .6rem; font-size: 1.1rem; color: var(--c-text); }
.politika-cookies__help p { margin: 0 0 .7rem; color: var(--c-text-muted); line-height: 1.6; }
.politika-cookies__help ul { margin: .2rem 0 .8rem 1.2rem; padding: 0; }
.politika-cookies__help ul li { margin-bottom: .4rem; line-height: 1.55; }

/* Контакты оператора — список */
.politika-contacts__list,
.politika-contacts__legal {
  list-style: none;
  margin: .6rem 0 .8rem;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.politika-contacts__list li,
.politika-contacts__legal li {
  color: var(--c-text);
  font-size: .96rem;
  line-height: 1.5;
}
.politika-contacts__list a,
.politika-contacts__legal a {
  color: var(--c-primary);
  text-decoration: none;
  font-weight: 600;
}
.politika-contacts__list a:hover,
.politika-contacts__legal a:hover { text-decoration: underline; }
.politika-contacts__rkn {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  background: rgba(var(--c-primary-rgb), .05);
  border-left: 3px solid var(--c-primary);
  border-radius: 0 12px 12px 0;
  color: var(--c-text);
  font-size: .95rem;
  line-height: 1.6;
}
.politika-contacts__rkn a { color: var(--c-primary); font-weight: 600; }

/* ============================================================================
   /karta — Phase 1D.6. Префикс .karta-*.
   ============================================================================ */
.karta-hero { padding: 2.8rem 0 2.6rem; }
.karta-hero__grid {
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 900px) {
  .karta-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 2.4rem;
  }
}
.karta-hero__eyebrow { margin-bottom: .9rem; }
.karta-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-text);
  font-weight: 800;
}
.karta-hero__title-em {
  font-style: normal;
  display: inline-block;
  padding-bottom: .08em;
  background: linear-gradient(120deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.karta-hero__lead {
  margin: 0 0 1.4rem;
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  color: var(--c-text-muted);
  line-height: 1.55;
  max-width: 560px;
}
.karta-hero__usp { margin: 0 0 1.6rem; padding: 0; list-style: none; display: grid; gap: .55rem; }
.karta-hero__usp li { display: flex; align-items: center; gap: .7rem; color: var(--c-text); font-weight: 600; }
.karta-hero__usp svg {
  flex: 0 0 22px; width: 22px; height: 22px; padding: 4px;
  border-radius: 50%; background: rgba(var(--c-accent-rgb), .15); color: var(--c-accent-dark);
}
.karta-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.karta-hero__right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.karta-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--c-shadow-lg);
  display: grid;
  gap: .9rem;
}
.karta-card__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  width: max-content;
}
.karta-card__chip svg { width: 14px; height: 14px; }
.karta-card__title { margin: 0; font-size: 1.15rem; color: var(--c-text); line-height: 1.3; }
.karta-card__lead { margin: 0; color: var(--c-text-muted); font-size: .94rem; line-height: 1.55; }
.karta-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.karta-card__list a {
  display: grid;
  gap: .15rem;
  padding: .7rem .8rem;
  background: rgba(var(--c-primary-rgb), .04);
  border: 1px solid rgba(var(--c-primary-rgb), .12);
  border-radius: 10px;
  text-decoration: none;
  color: var(--c-text);
  transition: background .15s ease, transform .15s ease;
}
.karta-card__list a:hover {
  background: rgba(var(--c-primary-rgb), .1);
  transform: translateY(-1px);
}
.karta-card__label { font-weight: 700; font-size: .96rem; color: var(--c-text); }
.karta-card__desc { font-size: .82rem; color: var(--c-text-muted); }

/* Sections grid — 5 групп */
.karta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 720px) { .karta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .karta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.karta-group {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--c-shadow-sm);
  display: grid;
  gap: 1rem;
}
.karta-group--a .karta-group__icon {
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .15), rgba(var(--c-primary-rgb), .25));
  color: var(--c-primary);
}
.karta-group--b .karta-group__icon {
  background: linear-gradient(135deg, rgba(var(--c-accent-rgb), .18), rgba(var(--c-accent-rgb), .28));
  color: var(--c-accent-dark);
}
.karta-group__head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: .8rem;
  align-items: start;
}
.karta-group__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.karta-group__icon svg { width: 24px; height: 24px; }
.karta-group__title { margin: 0; font-size: 1.08rem; color: var(--c-text); font-weight: 700; }
.karta-group__desc { margin: .25rem 0 0; color: var(--c-text-muted); font-size: .9rem; line-height: 1.5; }

.karta-group__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.karta-group__list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .15rem .8rem;
  padding: .65rem .8rem;
  background: rgba(var(--c-primary-rgb), .04);
  border: 1px solid rgba(var(--c-primary-rgb), .1);
  border-radius: 10px;
  text-decoration: none;
  color: var(--c-text);
  transition: background .15s ease, border-color .15s ease;
}
.karta-group__list a:hover {
  background: rgba(var(--c-primary-rgb), .1);
  border-color: rgba(var(--c-primary-rgb), .25);
}
.karta-group__label { font-weight: 700; font-size: .96rem; }
.karta-group__path {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .78rem;
  color: var(--c-text-muted);
  align-self: start;
  justify-self: end;
}
.karta-group__sub {
  grid-column: 1 / -1;
  font-size: .82rem;
  color: var(--c-text-muted);
  line-height: 1.4;
}

/* /politika — feedback / optout (после реконцепции 06.2026).
   politika-rights и politika-contacts заменены на politika-optout
   и politika-feedback. Старые .politika-contacts__* классы оставлены
   для возможного переиспользования. */
.politika-feedback__list {
  list-style: none;
  margin: .6rem 0 .8rem;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.politika-feedback__list li {
  color: var(--c-text);
  font-size: .96rem;
  line-height: 1.5;
}
.politika-feedback__list a {
  color: var(--c-primary);
  text-decoration: none;
  font-weight: 600;
}
.politika-feedback__list a:hover { text-decoration: underline; }
.politika-feedback__note {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  background: rgba(var(--c-primary-rgb), .05);
  border-left: 3px solid var(--c-primary);
  border-radius: 0 12px 12px 0;
  color: var(--c-text);
  font-size: .95rem;
  line-height: 1.6;
}
.politika-feedback__note code {
  padding: .15rem .4rem;
  background: rgba(var(--c-primary-rgb), .12);
  border-radius: 6px;
  font-size: .88rem;
  color: var(--c-primary);
}

/* Optout — ссылка в карточке */
.politika-optout .top-method-card__link {
  margin: .6rem 0 0;
}
.politika-optout .top-method-card__link a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--c-primary);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
}
.politika-optout .top-method-card__link a:hover { text-decoration: underline; }

/* Doc — финальная дата */
.politika-doc__date {
  margin-top: 2rem !important;
  padding-top: 1.2rem;
  border-top: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: .9rem;
}
.politika-doc__body code {
  padding: .15rem .4rem;
  background: rgba(var(--c-primary-rgb), .1);
  border-radius: 6px;
  font-size: .88em;
  color: var(--c-primary);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ============================================================================
   Попапы домонетизации — exit-intent + delayed.
   Подключаются через partials/popups.php. Управляются ModalManager в app.js.
   ============================================================================ */
.popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.popup.hidden { display: none !important; }
.popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.popup__card {
  position: relative;
  background: var(--c-white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 460px;
  box-shadow:
    0 24px 56px rgba(15, 23, 42, .35),
    0 0 0 1px rgba(var(--c-primary-rgb), .12);
  overflow: hidden;
  animation: popup-pop-in .25s ease-out;
}
@keyframes popup-pop-in {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.popup__close {
  position: absolute;
  top: .65rem;
  right: .65rem;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, .06);
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.popup__close:hover {
  background: rgba(15, 23, 42, .14);
  color: var(--c-text);
}
.popup__body {
  padding: 1.6rem 1.4rem 1.5rem;
  display: grid;
  gap: .85rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--c-primary-rgb), .07), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(var(--c-accent-rgb), .09), transparent 60%),
    var(--c-white);
  text-align: center;
}
.popup__eyebrow {
  display: inline-block;
  margin: 0 auto;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: rgba(var(--c-accent-rgb), .14);
  color: var(--c-accent-dark);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.popup__title {
  margin: 0;
  font-size: clamp(1.15rem, 1.05rem + 1vw, 1.45rem);
  line-height: 1.25;
  color: var(--c-text);
  font-weight: 800;
}
.popup__lead {
  margin: 0;
  color: var(--c-text-muted);
  font-size: .95rem;
  line-height: 1.55;
}
.popup__lead--sub { color: var(--c-text-muted); }

.popup__timer-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  margin: .35rem auto .25rem;
  padding: .55rem .9rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  box-shadow: 0 8px 20px rgba(var(--c-accent-rgb), .25);
}
.popup__timer-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .85;
}
.popup__timer {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.popup__form { margin: 0; }
.popup__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
}
.popup__note {
  margin: 0;
  font-size: .8rem;
  color: var(--c-text-muted);
  line-height: 1.4;
}

@media (max-width: 480px) {
  .popup { padding: .7rem; }
  .popup__body { padding: 1.3rem 1.1rem 1.25rem; }
  .popup__timer { font-size: 1.35rem; }
}

/* ============================================================================
   Cookie consent — компактный баннер согласия на cookies.
   • Десктоп: фиксированный левый нижний угол, max-width 360px.
   • Мобильные: full-width, bottom 80px (над .floating-cta которая 12px).
   • Управляется CookieConsent в app.js через localStorage.
   ============================================================================ */
.cookie-consent {
  position: fixed;
  z-index: 50;
  /* На десктопе по умолчанию: левый нижний угол. */
  left: 16px;
  bottom: 16px;
  max-width: 360px;
  animation: cookie-slide-in .35s ease-out;
}
.cookie-consent.hidden { display: none !important; }

@keyframes cookie-slide-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cookie-consent__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .75rem .9rem;
  border-radius: 14px;
  background: var(--c-white);
  border: 1px solid rgba(var(--c-primary-rgb), .15);
  box-shadow:
    0 14px 38px rgba(15, 23, 42, .14),
    0 0 0 1px rgba(var(--c-primary-rgb), .04) inset;
}
.cookie-consent__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .12), rgba(var(--c-accent-rgb), .16));
  color: var(--c-primary);
  flex-shrink: 0;
}
.cookie-consent__icon svg { width: 22px; height: 22px; }
.cookie-consent__text {
  display: grid;
  gap: .15rem;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--c-text);
}
.cookie-consent__text strong { font-weight: 700; font-size: .88rem; }
.cookie-consent__text span { color: var(--c-text-muted); }
.cookie-consent__text a {
  color: var(--c-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.cookie-consent__text a:hover { color: var(--c-accent-dark); }
.cookie-consent__accept {
  flex-shrink: 0;
  padding: .55rem 1rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: var(--c-white);
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px rgba(var(--c-accent-rgb), .28);
}
.cookie-consent__accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(var(--c-accent-rgb), .38);
}

/* Mobile (< 760px): full-width, поднимаем над floating-cta.
   floating-cta находится на bottom: 12px (или 8px на узких).
   Cookie consent размещаем над ней с зазором — bottom: 84px (12+50+22 примерно).
   Высота floating-cta ~64px (padding 9 + кнопка 50 + safe margin). */
@media (max-width: 759px) {
  .cookie-consent {
    left: 8px;
    right: 8px;
    bottom: 84px;
    max-width: none;
  }
  .cookie-consent__inner {
    padding: .65rem .75rem;
    gap: .65rem;
  }
  .cookie-consent__icon { width: 32px; height: 32px; }
  .cookie-consent__icon svg { width: 18px; height: 18px; }
  .cookie-consent__text { font-size: .78rem; }
  .cookie-consent__text strong { font-size: .84rem; }
  .cookie-consent__accept { padding: .5rem .8rem; font-size: .84rem; }
}

/* Совсем узкие экраны — на странице где нет floating-cta баннер прижимается
   ниже. Сами это не контролируем — но если у body нет floating-cta, можно
   опустить ниже. Делаем через специальный класс который ставит JS, если
   floating-cta отсутствует. */
.cookie-consent--no-floating {
  bottom: 16px !important;
}

.metrika-pixel { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
:root {
  --c-primary: #252328;
  --c-primary-rgb: 37, 35, 40;
  --c-primary-dark: #1a191c;
  --c-accent: #f90d01;
  --c-accent-rgb: 249, 13, 1;
  --c-accent-dark: #c70a01;
  --bg-primary-dark-gradient: linear-gradient(135deg, #252328, #111012);
  --bg-primary-bright-gradient: linear-gradient(135deg, #252328, #717073);
}