/* =========================================================================
   QR-CASH.CSS - раздел «Выдача наличными по QR-коду» (#qr) и его пункт в
   трёх навигациях. Создан 15.09.2026.

   ИСТОЧНИК: ТЗ партнёра от 14.09, п.4 («обязательно сделать отдельную
   вкладку про выдачу деньгами QR-кодами, это наша главная фишка»), решение
   владельца 15.09 «давай сделаем». Тексты раздела собраны только из фактов
   переписки: выдача через партнёров по QR-коду в отделениях банков,
   встреча по договорённости, сумма и город согласуются с менеджером,
   крипта в заморозке до кнопки «Завершить сделку». Цифр, сроков и
   обещаний, которых нет в источнике, в разделе нет.

   ВИД: карточки канала (эталон card_20.png). Плоский фон #0C0D11 без
   подложки section--alt, рубрика капсом с трекингом, крупный заголовок,
   линия #4FC4E9 3px со свечением 0 0 26px 3px rgba(79,196,233,.42),
   вторичный текст rgba(255,255,255,.55). Контейнеры, отступы и классы
   заголовка - те же, что у #services и #offline (.section > .wrap >
   .section__head), поэтому раздел не выглядит вставленным.

   ПОДКЛЮЧЁН ПОСЛЕДНИМ из таблиц стилей намеренно: блок В перебивает
   задел mobile.css на седьмую ячейку нижней панели, и побеждает он
   порядком при равной силе селектора, без !important.
   ========================================================================= */

/* -------------------------------------------------------------------------
   А. ШАПКА РАЗДЕЛА. Линейка эталона сайта серебряная (.rule); у карточек
   канала она голубая со свечением - здесь берём вторую, потому что раздел
   и есть «карточка канала» на сайте. Ширина и посадка остаются от .rule.
   ------------------------------------------------------------------------- */
.qr .qr__rule{
  background:#4FC4E9;
  box-shadow:0 0 26px 3px rgba(79,196,233,.42);
}
.qr .eyebrow .ico{ width:14px; height:14px; }
/* 18.09.2026: рубрика «Главная фишка» акцентная - цвет по тексту 10.6:1 и
   светящаяся точка 5px перед значком. Владелец: «выделить в разделах как
   основную, выделить цветом». Остальные рубрики страницы белые или серые,
   поэтому одна голубая читается как метка главного раздела. Точка - статичный
   псевдоэлемент, без анимации. */
.qr .eyebrow{ color:var(--accent-ink); }
.qr .eyebrow::before{
  content:""; flex:0 0 auto;
  width:5px; height:5px; border-radius:50%;
  background:#4FC4E9;
  box-shadow:0 0 8px 1px rgba(79,196,233,.75);
}

/* -------------------------------------------------------------------------
   Б. ЧЕТЫРЕ ШАГА. Каждая карточка повторяет строение эталона: рубрика
   (номер шага капсом) -> заголовок -> голубая линия со свечением ->
   текст. Рамка волосяная, заливки нет: фон карточки равен фону страницы,
   как на плоской карточке канала. Наведения нет - шаги не кнопки.
   ------------------------------------------------------------------------- */
.qr__steps{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
/* «QR-код» не рвётся по дефису на две строки: в узкой карточке заголовок
   «Получаете QR-/код» читался как опечатка (снято скрином на 1600). */
.qr__nb{ white-space:nowrap; }
.qr__step{
  position:relative;
  display:flex; flex-direction:column;
  padding:24px 22px 26px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r);
  background:#0C0D11;
}
.qr__num{
  font-family:var(--font-mono);
  font-size:12.5px; font-weight:600; line-height:1;
  letter-spacing:.27em; text-transform:uppercase;
  color:rgba(255,255,255,.55);              /* 6.2:1 на #0C0D11 */
}
.qr__t{
  margin-top:16px;
  font-size:var(--fs-600); font-weight:600; line-height:1.28;
  letter-spacing:-.015em; color:#FFFFFF;
}
.qr__line{
  margin-top:14px; width:56px; height:3px; border-radius:1px;
  background:#4FC4E9;
  box-shadow:0 0 26px 3px rgba(79,196,233,.42);
}
.qr__p{
  margin-top:16px;
  font-size:var(--fs-300); line-height:1.7;
  color:rgba(255,255,255,.55);
}
.qr__p b{ font-weight:600; color:#E9EEF4; }

/* Появление: короткий ход, как у карточек услуг (styles.css, блок
   «Мелкое и повторяющееся»). Шапка раздела только проявляется - это уже
   задано общим правилом .section__head.reveal. */
.qr__step.reveal:not(.is-visible){ transform:translateY(12px) scale(.995); }

/* -------------------------------------------------------------------------
   В. ОГОВОРКА И ДЕЙСТВИЯ. Плашка с акцентной полосой слева - тот же знак,
   что у «честных оговорок» (.honest::before): условие сделки, а не
   украшение. Кнопка - только обводкой (.btn--tg, как в #services): заливка
   на странице у одной главной кнопки, вторую не добавляем.
   ------------------------------------------------------------------------- */
.qr__foot{ margin-top:22px; display:grid; gap:20px; }
.qr__note{
  position:relative; isolation:isolate;
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 20px 16px 26px;
  border:1px solid rgba(255,255,255,.10); border-radius:var(--r);
  font-size:var(--fs-300); line-height:1.6;
  color:rgba(255,255,255,.72);
  max-width:var(--measure);
}
.qr__note::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:var(--bar);
  border-radius:var(--r) 0 0 var(--r);
  background:var(--accent);
  box-shadow:var(--accent-glow);
}
.qr__note .ico{ width:14px; height:14px; margin-top:.25em; }
.qr__cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;
}
.qr__ask{
  font-size:var(--fs-300); line-height:1.5;
  color:rgba(255,255,255,.74);
  text-decoration:none;
  transition:color var(--t-base);
  /* 17.09.2026: цель нажатия. Замер на 375/390: ссылка 334x24 - единственная
     цель на странице ниже планки 44px (не считая подписи в подвале). Поля
     10px сверху и снизу дают 44px, текст на месте: отрицательный margin
     возвращает строке прежнее положение в ряду .qr__foot. */
  display:inline-block; padding:10px 0; margin:-10px 0;
}
.qr__ask b{ font-weight:600; color:var(--accent-ink); }
.qr__ask:hover{ color:#FFFFFF; text-decoration:underline; text-underline-offset:4px; }

/* Сетка по ширине ЦЕНТРА, как у .cards: 2 по умолчанию, 4 только когда
   карточке достаётся >= 250px (центр >= 1100, окна от ~1720 с панелями).
   На 1600 (центр 980) четыре колонки давали карточку 219px: заголовок
   шага 04 ложился в 5 строк - снято скрином, порог поднят. */
@container center (min-width:1100px){
  .qr__steps{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@container center (max-width:560px){
  .qr__steps{ grid-template-columns:1fr; gap:10px; }
  .qr__step{ padding:18px 18px 20px; }
  .qr__t{ margin-top:10px; }
  .qr__line{ margin-top:12px; }
  .qr__p{ margin-top:12px; }
  .qr__note{ padding:14px 16px 14px 22px; }
  .qr__cta .btn{ width:100%; }
}

/* -------------------------------------------------------------------------
   Г. ПУНКТ «ВЫДАЧА ПО QR» В НАВИГАЦИЯХ.

   Левая колонка (>=1200): обычная строка списка, подпись полная.
   Нижняя панель телефона (<1200): подпись короткая «QR» - полная не
   помещается в ячейку (замер на 375: «Выдача по QR» при 10px = 69px,
   ячейка 47px). Имя для читалки держит aria-label самой ссылки.
   Шапка: короткое «QR». Меню-пилюля центровано абсолютом, и на 1440
   (центр 820) до правки стояло в 13.1px от знака и в 35.8px от кнопки
   (замер прода 15.09). Пункт «QR» берёт 26.3px, поэтому место выкроено
   и меню сдвинуто: поля пунктов 5 -> 4px (-12px), поля пилюли 3 -> 2px
   (-2px), сдвиг +32 -> +40px. Замер после: 13.9px до знака, 20.7px до
   кнопки, одна строка.
   ПОЛОСА 1400-1432 (центр 780-812, «ужатая сборка» styles.css): на проде
   меню УЖЕ налезало на знак на 22.5px при 1400 и на 6.5px при 1432 -
   знак удлинили 11.09 после того, как сборка была посчитана, а сдвига
   у неё нет вовсе (transform базовый, -50%). С седьмым пунктом стало бы
   38px. Чиню причину, а не показание: сдвиг +44px (справа было 64-80px
   пустых) и поля пунктов 7 -> 5px. Замер после - в отчёте.
   ------------------------------------------------------------------------- */
.qcard--qr .qcard__t-s{ display:none; }
@media (max-width:1199px){
  .qcard--qr .qcard__t-l{ display:none; }
  .qcard--qr .qcard__t-s{ display:inline; }
}
@container center (min-width:813px){
  .nav{ padding:2px; transform:translate(calc(-50% + 40px),-50%); }
  /* 18.09.2026: поля пунктов 4 -> 3px. Точка перед «QR» (5px + зазор 6px)
     прибавила меню 11px, и на 1440 просвет до знака упал до 8.5px, до кнопки
     до 15.2. Семь пунктов по 2px отдают 14px: замер после - в отчёте. */
  .nav a{ padding:0 3px; }
}
@container center (min-width:780px) and (max-width:812px){
  .nav{ transform:translate(calc(-50% + 44px),-50%); }
  .nav a{ padding:7px 5px; }
}

/* 18.09.2026: пункт QR в шапке - второй после «Курс», акцентный. Владелец:
   «через комп наверху тоже выделить». Цвет #4FC4E9 (9.6:1 на #0C0D11) и
   светящаяся точка 5px перед подписью; остальные пункты серые, так что один
   голубой читается как «главное». Ссылка становится inline-flex ради
   выравнивания точки по центру строки - как flex-элемент .nav она и так
   блочная, вид не меняется. Сила селектора .nav a.nav__qr (0,2,1) равна
   .nav a:hover, правило позже - побеждает порядком. */
.nav a.nav__qr{
  display:inline-flex; align-items:center; gap:6px;
  color:#4FC4E9; font-weight:500;
}
.nav a.nav__qr::before{
  content:""; flex:0 0 auto;
  width:5px; height:5px; border-radius:50%;
  background:#4FC4E9;
  box-shadow:0 0 7px 1px rgba(79,196,233,.8);
}
.nav a.nav__qr:hover{ color:var(--accent-ink); background:rgba(79,196,233,.10); }

/* 18.09.2026: левая колонка «Разделы» (>=1200): строка QR помечена как главная.
   Подпись акцентная, значок тот же неоновый, слева тонкая линия 2px - это
   штатный псевдоэлемент строки (.side .qcard::before, styles.css 7.6), который
   у остальных строк спит (opacity 0) и загорается только у текущего раздела.
   У QR он горит всегда, но тоньше и тише (2px, .62), чтобы «главная фишка»
   не путалась с «вы здесь»; когда раздел QR на экране, линия становится
   полной - правило .is-current из styles.css сильнее (0,3,1), ширину
   возвращаю своим правилом той же силы, оно позже. */
@media (min-width:1200px){
  .side .qcard--qr .qcard__t{ color:var(--accent-ink); font-weight:600; }
  .side .qcard--qr:hover .qcard__t{ color:#FFFFFF; }
  .side .qcard--qr::before{ opacity:.62; width:2px; }
  .side .qcard--qr.is-current::before{ opacity:1; width:3px; }
}

/* -------------------------------------------------------------------------
   Д. НИЖНЯЯ ПАНЕЛЬ ТЕЛЕФОНА - СНЯТО 18.09.2026.
   Здесь стояла сетка под седьмую ячейку QR (7 дорожек + «Рынок» 44px, пороги
   415/407/374/359 с кеглем 10px, ужатой ячейкой 32px и скрытием QR ниже 360).
   По скриншоту владельца («иконки снизу - как будто их очень много») панель
   держит 5 ячеек (QR, Услуги, Гарантии, Рынок, Меню), и вся её сетка живёт в
   bottom-nav-strip.css, подключённом последним. Подпись «QR» для телефона
   (блок Г выше) остаётся, ячейка QR первая через order.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Е. ПЛАШКА «ГЛАВНАЯ ФИШКА» НА ПЕРВОМ ЭКРАНЕ (18.09.2026).
   Владелец: «самое главное - наверх её поднять и выделить». Ссылка на #qr
   лежит последним элементом сетки героя (.wrap.hero__grid), разметка - в
   index.html после списка гарантий. Строение: акцентная линия 3px слева
   (::before, канонное свечение линии), значок QR на плитке, заголовок +
   одна строка пояснения, справа «Подробнее» со стрелкой.

   Цвет только там, где положено: линия, значок и подпись «Подробнее».
   Фон и рамка плашки нейтральные, как у панелей страницы, - иначе на
   первом экране появился бы второй голубой предмет рядом с кнопкой.

   Место в сетке: на двух колонках (центр >= 1081) - третий ряд во всю
   ширину, под калькулятором и списком гарантий; калькулятор занимает ряды
   1-2 и не двигается. На одной колонке - через order сразу под
   калькулятором, перед гарантиями, шириной с калькулятор (max-width
   520/640, по центру). На телефоне (центр <= 560) «Подробнее»
   переезжает под текст, иначе заголовок ложился бы в три строки, а сама
   плашка через order встаёт между текстом героя и калькулятором - на
   второй экран (после гарантий она уходила на третий).

   Появление - та же анимация aeHeroIn, что у соседей по сетке (styles.css,
   зона 1 п.10), задержка следующая по ряду: 230ms после списка 170ms.
   Заставки нет (18.09.2026, класс intro-lock никто не ставит), плашка
   стартует вместе с соседями по сетке. Движение только transform/opacity;
   при prefers-reduced-motion анимации нет.
   ------------------------------------------------------------------------- */
.qrtop-card{
  position:relative; isolation:isolate; z-index:1;   /* над .hero__glow (z 0) */
  display:flex; align-items:center; gap:14px;
  padding:14px 18px 14px 22px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-card);
  background:rgba(255,255,255,.035);
  color:#FFFFFF; text-decoration:none;
  transition:transform var(--t-fast);   /* 19.09.2026 приёмка: только transform/opacity, смена рамки и фона по наведению - мгновенно */
}
.qrtop-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  border-radius:var(--r-card) 0 0 var(--r-card);
  background:#4FC4E9;
  box-shadow:0 0 26px 3px rgba(79,196,233,.42), 0 0 62px 9px rgba(79,196,233,.16);
  pointer-events:none;
}
.qrtop-ico{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:40px; height:40px;
  border-radius:var(--r-inner);
  background:rgba(79,196,233,.10); border:1px solid rgba(79,196,233,.38);
}
.qrtop-ico .ico{ width:20px; height:20px; stroke-width:1.6; }
.qrtop-body{ display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:0; }
.qrtop-title{
  font-size:15px; font-weight:600; line-height:1.3; letter-spacing:-.01em;
  color:#FFFFFF;
}
.qrtop-desc{ font-size:13px; line-height:1.5; color:rgba(255,255,255,.62); }   /* 7.3:1 */
.qrtop-more{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  font-family:var(--font-mono); font-size:11px; font-weight:600; line-height:1;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);
  white-space:nowrap;
}
.qrtop-arr{
  width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--t-fast);
}
.qrtop-card:hover{ border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.055); }
.qrtop-card:hover .qrtop-arr{ transform:translateX(3px); }
.qrtop-card:active{ transform:scale(.995); }
.qrtop-card:focus-visible{ outline:2px solid #4FC4E9; outline-offset:3px; }

/* Появление вместе с соседями по сетке. */
.hero__grid > .qrtop-card{
  animation:aeHeroIn .6s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:230ms;
}

/* Место в сетке героя. */
@container center (min-width:1081px){
  .hero__grid > .qrtop-card{ grid-column:1 / -1; grid-row:3; }
}
/* Одна колонка: ширина как у калькулятора над ней (styles.css .calc 520px;
   на планшете 621-1199 mobile.css расширяет его до 640 - повторяем), тогда
   калькулятор, гарантии и плашка стоят одним столбом. Замер на 1440: список
   гарантий 497px, калькулятор 520, плашка на 640 торчала на 60px с каждой
   стороны. */
@container center (max-width:1080px){
  .hero__grid > .qrtop-card{ width:100%; max-width:520px; margin-left:auto; margin-right:auto; }
  /* Порядок на одной колонке: текст, калькулятор, плашка, гарантии - плашка
     прямо под калькулятором. Замер на 1440x900: после гарантий она стояла на
     1992px (третий экран), под калькулятором встаёт на 1782px. Разметка не
     меняется, только order; ряды сетки авто. */
  .hero__grid > .calc{ order:1; }
  .hero__grid > .qrtop-card{ order:2; }
  .hero__grid > .trust{ order:3; }
}
@media (min-width:621px) and (max-width:1199px){
  .hero__grid > .qrtop-card{ max-width:640px; }
}
@container center (max-width:560px){
  .qrtop-card{ flex-wrap:wrap; gap:10px 12px; padding:14px 16px 14px 20px; }
  .qrtop-ico{ width:36px; height:36px; }
  .qrtop-ico .ico{ width:18px; height:18px; }
  .qrtop-body{ flex:1 1 0; }
  /* В створ текста: значок 36 + зазор 12. Скептик 18.09.2026: 100% ПЛЮС поле
     48px при flex-shrink 0 выталкивали «Подробнее» за карточку на 31px и за
     экран на 17px (scrollWidth 407 при 390, Chrome ужимал страницу до 0.958)
     - поле вычитается из базы. */
  .qrtop-more{ flex-basis:calc(100% - 48px); margin-left:48px; }
  /* Телефон: плашка поднимается между текстом и калькулятором. Замер на
     390x844: текст героя кончается на 847, калькулятор 865-1929, гарантии
     до 2327 - плашка после них стояла на 2361, третий экран, а владелец
     просил «наверх». Порядок задан order (гарантии остаются третьими из
     правила выше): разметка не меняется. Калькулятор сдвигается вниз на
     высоту плашки плюс зазор ряда (~170px), сам не меняется. */
  .hero__grid > .qrtop-card{ order:1; }
  .hero__grid > .calc{ order:2; }
}

/* Меньше движения: карточки не едут, только проявляются. */
@media (prefers-reduced-motion:reduce){
  .qr__step.reveal:not(.is-visible){ transform:none; }
  .hero__grid > .qrtop-card{ animation:none; opacity:1; transform:none; }
  .qrtop-card:hover .qrtop-arr{ transform:none; }
  .qrtop-card:active{ transform:none; }
}