/* ============================================================================
   «Финансы» — страница приложения.

   Приёмы взяты из промо-карусели (Branding/carousel-release): разобранная
   по слоям иконка в CSS-3D, тёмные плитки с синим свечением, зерно поверх
   градиента. Здесь они сделаны отзывчивыми — карусель собиралась под
   фиксированный холст 1080×1440, сайт живёт на любой ширине.

   Токены, шрифт и сетка — общие, из assets/css/site.css. Этот файл только
   добавляет два блока: героя со слоями и «Три уровня».
   ========================================================================= */

/* ── Разобранная иконка: основа, мятная карта, синяя карта, карман ──────── */

.fin-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  /* Перспектива на всю сцену: слои расходятся «от зрителя», а не вбок. */
  perspective: 1700px;
  perspective-origin: 50% 18%;
  /* Зазор между слоями считается от ширины самой сцены: translateZ берёт
     только абсолютную длину, поэтому проценты тут не годятся, а cqw — да. */
  container-type: inline-size;
}

.fin-stage__shadow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 9%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18, 35, 68, 0.2), rgba(18, 35, 68, 0));
  filter: blur(6px);
}

.fin-stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Тот же разворот, что на обложке карусели. */
  transform: rotateX(56deg) rotateZ(-34deg);
}

.fin-layer {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.fin-layer svg { display: block; overflow: visible; }

/* Зазор между слоями — в процентах ширины сцены, иначе на телефоне стопка
   разъезжается сильнее самой иконки. */
.fin-stack { --gap: 11.9cqw; }
.fin-layer:nth-child(1) { transform: translateZ(0); }
.fin-layer:nth-child(2) { transform: translateZ(var(--gap)); }
.fin-layer:nth-child(3) { transform: translateZ(calc(var(--gap) * 2)); }
.fin-layer:nth-child(4) { transform: translateZ(calc(var(--gap) * 3)); }

/* Пунктирные направляющие по углам кармана — показывают, что это один
   предмет, разобранный на слои, а не четыре картинки рядом. */
.fin-guide {
  position: absolute;
  width: 1.6px;
  height: calc(var(--gap) * 3);
  transform-origin: 0 0;
  transform: rotateX(90deg);
  background: repeating-linear-gradient(
    180deg,
    rgba(88, 108, 150, 0.55) 0 5px,
    rgba(88, 108, 150, 0) 5px 11px
  );
}

/* Лёгкое дыхание: стопка чуть качается, будто её держат в руке. */
@media (prefers-reduced-motion: no-preference) {
  .fin-stack { animation: fin-float 9s var(--e-out) infinite alternate; }
}
@keyframes fin-float {
  from { transform: rotateX(56deg) rotateZ(-34deg) translateZ(0); }
  to   { transform: rotateX(52deg) rotateZ(-30deg) translateZ(10px); }
}

/* ── Тёмная полоса «Три уровня» ─────────────────────────────────────────── */

.levels {
  position: relative;
  isolation: isolate;
  margin-top: var(--sec);
  padding: clamp(56px, 7vw, 104px) 0 clamp(60px, 7.4vw, 112px);
  background: #02050a;
  color: #fff;
  overflow: hidden;
}

/* Свечение из тёмной темы приложения: ирис сверху слева, лаванда снизу справа. */
.levels::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 42% at 0% 0%, rgba(26, 74, 160, 0.55), rgba(26, 74, 160, 0)),
    radial-gradient(50% 40% at 100% 100%, rgba(84, 70, 170, 0.3), rgba(84, 70, 170, 0));
}

/* На широком экране заголовок и пояснение стоят рядом: в одну колонку
   заголовок разгоняется на четыре строки и оставляет справа пустоту. */
.levels__head { max-width: 46ch; }
@media (min-width: 1000px) {
  .levels__head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 80px);
    align-items: end;
  }
  .levels__eyebrow { grid-column: 1 / -1; }
  .levels__title { margin-top: 12px; }
  .levels__lede { margin-top: 0; padding-bottom: 6px; }
}
.levels__eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.levels__title {
  margin-top: 14px;
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.levels__lede {
  margin-top: 16px;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

.levels__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(34px, 4vw, 54px);
  align-items: stretch;
}

/* ── Карточка уровня ────────────────────────────────────────────────────── */

.lvl {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.3vw, 30px);
  border-radius: var(--r-big);
  corner-shape: superellipse(2.2);
  background: linear-gradient(180deg, #17191f 0%, #111318 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* Средний уровень — тот, который чаще всего и нужен: у него акцентное кольцо
   и своё свечение, чтобы глаз останавливался на нём первым. */
.lvl--pick {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(51, 120, 230, 0.22), rgba(51, 120, 230, 0)),
    linear-gradient(180deg, #1a1e27 0%, #121520 100%);
  box-shadow:
    inset 0 0 0 1px rgba(107, 160, 255, 0.34),
    0 30px 70px -40px rgba(51, 120, 230, 0.75);
}

/* Название уровня и значок: у «Аналитика + Помощник» название длинное,
   поэтому значку разрешено уехать на свою строку, а не ломать карточку. */
.lvl__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.lvl__name {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}
.lvl__badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #cfe0ff;
  background: rgba(51, 120, 230, 0.2);
  box-shadow: inset 0 0 0 1px rgba(107, 160, 255, 0.28);
}
.lvl__badge--free {
  color: #b8e6cf;
  background: rgba(77, 163, 128, 0.18);
  box-shadow: inset 0 0 0 1px rgba(77, 163, 128, 0.32);
}

.lvl__price {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.lvl__sum {
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.lvl__per { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.5); }
.lvl__year {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.52);
}
.lvl__year b { color: rgba(255, 255, 255, 0.82); font-weight: 600; }

.lvl__list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
  font-size: 0.9375rem;
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.76);
}
.lvl__list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}
/* Галочка нарисована штрихом, а не шрифтом: в кириллическом наборе
   у «✓» разная ширина и она прыгает между строками. */
.lvl__list li::before {
  content: "";
  width: 11px;
  height: 7px;
  margin-top: 6px;
  border-left: 2px solid var(--fin-iris);
  border-bottom: 2px solid var(--fin-iris);
  transform: rotate(-45deg);
}
.lvl--free .lvl__list li::before { border-color: var(--fin-mint); }

.lvl__note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.46);
}
.lvl__foot { margin-top: auto; padding-top: 22px; }

.lvl__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border-radius: var(--r-fld);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background var(--m-press) var(--e-out), transform var(--m-press) var(--e-out);
}
.lvl__btn--solid { color: #fff; background: var(--fin-iris); }
.lvl__btn--solid:hover { background: #2a68cf; }
.lvl__btn--ghost {
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.lvl__btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }
.lvl__btn:active { transform: scale(0.985); }
.lvl__btn--done {
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

/* ── Три шага: как код попадает в приложение ────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(28px, 3.2vw, 42px);
  counter-reset: step;
}
.step {
  padding: 20px 22px 22px;
  border-radius: var(--r-srf);
  corner-shape: superellipse(2.2);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #cfe0ff;
  background: rgba(51, 120, 230, 0.22);
  box-shadow: inset 0 0 0 1px rgba(107, 160, 255, 0.3);
}
.step h3 {
  margin: 14px 0 6px;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.step p {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}
.step code {
  font-family: var(--mono);
  font-size: 0.875em;
  padding: 1px 6px;
  border-radius: 6px;
  color: #dbe7ff;
  background: rgba(255, 255, 255, 0.08);
}

.levels__fine {
  margin-top: clamp(24px, 2.6vw, 34px);
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.42);
}
.levels__fine a { color: rgba(255, 255, 255, 0.72); }
/* Ссылка в шаге («отправьте его себе ещё раз») видна как ссылка, но не спорит с текстом. */
.step p a { color: rgba(255, 255, 255, 0.86); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px; transition: text-decoration-color var(--m-press); }
.step p a:hover { text-decoration-color: rgba(255, 255, 255, 0.8); }

/* ── Узкие экраны ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .levels__grid, .steps { grid-template-columns: 1fr; }
  /* На телефоне выделенная карточка не должна «светить» сильнее соседних:
     порядок чтения и так сверху вниз. */
  .lvl--pick { box-shadow: inset 0 0 0 1px rgba(107, 160, 255, 0.34); }
}

/* ── Герой: сцена без рамки ─────────────────────────────────────────────── */

/* Стеклянная плитка вокруг слоёв только мешала: у иконки своя тень, и
   в пустом квадрате она читалась как «картинка в рамке», а не как предмет. */
.fin-hero-art {
  margin: 0;
  display: grid;
  place-items: center;
  position: relative;
}
/* Слои разлетаются за габарит сцены — им нужен запас, иначе стопка
   упирается в край колонки и обрезается. */
.fin-hero-art .fin-stage { max-width: min(440px, 76%); }
/* Мягкий ореол под предметом — вместо рамки. */
.fin-hero-art::before {
  content: "";
  position: absolute;
  inset: 4% -6% -2%;
  z-index: -1;
  background:
    radial-gradient(52% 44% at 42% 38%, rgba(51, 120, 230, 0.12), rgba(51, 120, 230, 0)),
    radial-gradient(46% 40% at 68% 72%, rgba(133, 122, 189, 0.12), rgba(133, 122, 189, 0));
  filter: blur(6px);
}

/* ── Три уровня прямо в герое ───────────────────────────────────────────── */

/* Раньше здесь стоял чип «Бесплатно», и модель читалась как «приложение
   просто бесплатное». Три строки объясняют её целиком, не уводя со страницы. */
.tiers {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  max-width: 52ch;
}
.tiers__row {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.45;
  color: var(--mute);
}
.tiers__row b { color: var(--ink); font-weight: 600; }
.tiers__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fin-iris);
  translate: 0 -1px;
}
.tiers__dot--free { background: var(--fin-mint); }

/* ── Макеты устройств: iPhone и монитор собираются скриптом ─────────────── */

/* Сцена рисуется в собственных координатах (как в карусели), а на странице
   просто масштабируется: SVG и текст остаются резкими на любой ширине. */
.fin-device {
  position: relative;
  width: 100%;
  /* Тень выходит за габарит сцены. Обрезка давала ей жёсткий прямой край —
     и мягкая тень превращалась в серую плиту. */
  overflow: visible;
}
.fin-device__inner {
  position: relative;
  transform-origin: 0 0;
  will-change: transform;
}
.fin-device__inner > * { position: absolute; left: 0; top: 0; }

/* Цена в герое — одной строкой: список с точками читался как перечень
   функций и спорил с заголовком. */
.hero-price {
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  max-width: 46ch;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.5;
  color: var(--mute);
}
.hero-price b { color: var(--ink); font-weight: 600; }

/* ── Снимок экрана как окно ─────────────────────────────────────────────── */

/* Раньше снимки лежали в бледной стеклянной плашке с большими полями:
   интерфейс получался мелким, контраст — никакой, и всё читалось как
   «картинка на подложке». Теперь снимок сам себе карточка: занимает всю
   ширину, с настоящей тенью и тонким кантом, как окно на столе. */
.shot {
  margin: 0;
  border-radius: clamp(14px, 1.4vw, 20px);
  corner-shape: superellipse(2.2);
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(11, 11, 14, 0.08),
    0 2px 6px rgba(11, 11, 14, 0.05),
    0 34px 70px -30px rgba(11, 11, 14, 0.4);
}
.shot img { display: block; width: 100%; height: auto; }

.shot-stack { display: grid; gap: clamp(18px, 2.4vw, 34px); }
/* Второй снимок сдвинут — пара перестаёт читаться как таблица из двух ячеек. */
@media (min-width: 900px) {
  .shot--offset { margin-left: clamp(24px, 4vw, 64px); }
}

/* Монитор в блоке «Расчёт» намеренно выходит за правый край колонки:
   это кадр, а не наклейка по центру пустого прямоугольника. */
@media (min-width: 1000px) {
  .fin-device--bleed { margin-right: clamp(-90px, -5vw, -40px); }
}

/* Мягкое пятно под предметом вместо проекции корпуса: у проекции видны
   грани, и на светлой бумаге она читается как серая плита. */
.fin-ground {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(16, 28, 56, 0.34), rgba(16, 28, 56, 0));
  filter: blur(14px);
  pointer-events: none;
}
.fin-device__inner > svg,
.fin-device__inner > div { z-index: 1; }

/* Галерея из трёх экранов — одна сцена, поэтому подпись общая. */
.gallery .fin-device figcaption {
  margin-top: clamp(14px, 1.6vw, 20px);
  text-align: center;
}

/* ── Уровни в герое ─────────────────────────────────────────────────────── */

/* Строкой это читалось как сноска, списком с точками — как перечень функций.
   Три одинаковые карточки: у всех одна типографика, разница только в цвете
   канта, поэтому ни один уровень не выглядит «главным» случайно. */
.plans {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 520px;
}
.plan {
  display: grid;
  gap: 3px;
  padding: 14px 14px 15px;
  border-radius: var(--r-fld);
  corner-shape: superellipse(2.2);
  background: var(--paper-hi);
  box-shadow: 0 0 0 1px var(--hair), var(--sh-1);
}
.plan__name {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fin-iris);
}
.plan--free .plan__name { color: var(--fin-mint-d); }
.plan__sum {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plan__sum i { font-style: normal; font-size: 0.72em; font-weight: 500; color: var(--mute); }
.plan__note { font-size: 0.75rem; line-height: 1.3; color: var(--fade); }

.plans__fine {
  margin-top: 12px;
  max-width: 520px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--mute);
}
.plans__fine a { color: var(--ink-2); text-underline-offset: 3px; }

@media (max-width: 560px) {
  .plans { grid-template-columns: 1fr 1fr; }
  .plans .plan:first-child { grid-column: 1 / -1; }
}

/* Крупный план уходит за правый край нарочно, но слева он не должен
   наезжать на текст: режем только левую кромку, вправо — свобода. */
.fin-device--bleed { clip-path: inset(-25% -100% -25% 0); }

/* Зеркальный вариант: сцена стоит в левой колонке, поэтому уходит влево,
   а режется по правому краю — там начинается текст. */
.fin-device--bleed-left { clip-path: inset(-25% 0 -25% -100%); }
@media (min-width: 1000px) {
  .fin-device--bleed-left { margin-left: clamp(-90px, -5vw, -40px); }
}

/* Две кнопки в карточке уровня: срок выбирается здесь же, промежуточная
   страница из пути к оплате уходит. */
.lvl__foot--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 420px) { .lvl__foot--pair { grid-template-columns: 1fr; } }

/* Карточка уровня в герое кликабельна целиком и ведёт к подробному разбору. */
.plan { position: relative; transition: box-shadow var(--m-press) var(--e-out); }
.plan:has(.plan__hit:hover) { box-shadow: 0 0 0 1px var(--hair-2), var(--sh-2); }
.plan__hit { position: absolute; inset: 0; border-radius: inherit; }
.plan__hit:focus-visible { outline: 2px solid var(--fin-iris); outline-offset: 2px; }