/* Страница «Контекстная реклама»: монетный поток, золотые монеты идут по пяти этапам (клик, сайт, заявка, продажа, клиент), на каждом гном-замерщик.
   Читаемый исходник, без сборки. План: ADVERTISING-PAGE-PLAN.md. Шапка, меню, подвал, кнопки, вопросы и окно формы общие (css/site-*.css, слой site);
   здесь тема страницы и её экраны (cn-*), всё в слое page. Логические свойства (inline, block): страница готова к RTL.
   Папка coinflow, префикс cn-: блокировщики рекламы режут адреса и классы со словом «ad». */
@layer page {

body.cn {
  --site-bg: #0a0806;           /* тёплый чёрный */
  --site-dim: rgba(240, 232, 214, 0.72);
  --site-line: rgba(232, 184, 74, 0.22);
  --site-accent: #f2c75c;
  --site-accent-ink: #0a0806;
  --site-signal: #f2c75c;
  --site-wrap: 78rem;
  --bg-2: #14100a;
  --gold: #f2c75c;
  --gold-hi: #fff1bf;
  --gold-lo: #b07d22;
  --amber: #e8b84a;
  --ink: #0a0806;
  --team-card: rgba(232, 184, 74, 0.06);
  --team-line: rgba(242, 199, 92, 0.25);
  --team-accent: var(--gold);
  --faq-accent: var(--gold);
  --faq-accent-ink: var(--ink);
  --faq-radius: 0.6rem;
  --faq-line-open: rgba(242, 199, 92, 0.6);
}
html { scroll-behavior: smooth; }

/* ---------- каркас в теме страницы ---------- */
.site-head::before { background: linear-gradient(to bottom, rgba(10, 8, 6, 0.94) 55%, rgba(10, 8, 6, 0)); }
.site-head.is-scrolled::before { background: rgba(10, 8, 6, 0.9); }
.site-head__tag { position: relative; z-index: 2; }
.site-head__tag li:first-child { color: var(--gold-hi); }
.site-menu { background: rgba(10, 8, 6, 0.985); }
.site-menu__n { color: var(--gold); }
.site-menu__list a:hover { color: var(--gold-hi); }
.site-menu__list a[aria-current="page"] { color: var(--gold); }
.site-footer__col ul a:hover, .site-footer__col > p > a:hover { color: var(--gold-hi); }
.site-footer__col .site-footer__h { color: var(--gold); }
.site-top:hover { border-color: var(--gold); }
.site-head__lang { white-space: nowrap; }
.site-footer__col ul a { display: inline-block; padding-block: 0.35rem; margin-block: -0.35rem; }

.site-btn {
  min-height: 3.1rem; padding: 0 1.9rem; border: 1.5px solid transparent; border-radius: 3rem; background: none;
  transition: transform 0.25s, background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.site-btn:hover { border-color: transparent; }
.cn .site-btn--main { color: var(--ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo)); box-shadow: 0 0 0 0 rgba(242, 199, 92, 0.4); background-origin: border-box; }
.cn .site-btn--main:hover { box-shadow: 0 0 0 6px rgba(242, 199, 92, 0.14), 0 0 30px rgba(242, 199, 92, 0.3); }
.site-btn--main::after { content: none; }
.site-btn--ghost { border-color: rgba(242, 199, 92, 0.5); }
.site-btn--ghost:hover { border-color: var(--gold-hi); background: rgba(242, 199, 92, 0.08); }

.site-dialog { border-radius: 0.5rem; background: var(--bg-2); }
.site-dialog::backdrop { background: rgba(6, 5, 3, 0.8); }
.site-dialog__title { color: var(--gold-hi); }
.site-input { border-radius: 0.25rem; background: rgba(232, 184, 74, 0.06); }
.site-input:focus { border-color: var(--gold); }
.site-form__consent input { accent-color: var(--gold); }
.site-form__status[data-state="ok"] { color: var(--gold-hi); }

/* хлебные крошки */
.crumbs { margin: 0 0 0.4rem; font-size: 0.85rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0; padding: 0; list-style: none; color: var(--site-dim); }
.crumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; color: rgba(240, 232, 214, 0.35); }
.crumbs a { display: inline-block; padding-block: 0.5rem; text-decoration: none; color: var(--site-dim); }
.crumbs a:hover { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 0.2em; }
.crumbs [aria-current="page"] { color: var(--site-fg); }

/* ---------- общие элементы экранов ---------- */
.cn-sec { padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); }
.cn-eyebrow { margin: 0 0 0.9rem; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.cn-h2 { margin: 0 0 1rem; font-family: var(--site-font-head); font-weight: 400; text-transform: uppercase; line-height: 1.02; font-size: clamp(1.9rem, 4.6vw, 3.4rem); color: var(--gold-hi); }
.cn-lead { margin: 0 0 1.8rem; max-width: 46rem; color: var(--site-dim); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.6; }
.cn-note { margin: 1.2rem 0 0; max-width: 46rem; font-size: 0.9rem; color: var(--site-dim); }
.cn-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.cn-sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.cn-js .cn-rv--wait:not(.is-in) { opacity: 0; transform: translateY(1.2rem); }
.cn-rv { transition: opacity 0.7s ease, transform 0.7s ease; }
@keyframes cn-rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
.cn-rise { animation: cn-rise 0.8s ease both; animation-delay: calc(var(--i, 0) * 0.12s); }

.cn-pains { display: grid; gap: 0.5rem; margin: 0 0 1.8rem; padding: 0; list-style: none; max-width: 34rem; }
.cn-pains li { position: relative; padding-inline-start: 1.6rem; color: var(--site-fg); font-size: 0.98rem; line-height: 1.45; }
.cn-pains li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.28em; inline-size: 0.95rem; block-size: 0.95rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); box-shadow: 0 0 8px rgba(242, 199, 92, 0.6); }

/* ---------- R1. Первый экран: заголовок и сцена «путь клиента» ---------- */
.cn-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(5.5rem, 7vw, 6.5rem) var(--site-gutter) clamp(1.5rem, 3vw, 2.5rem);
  background: radial-gradient(60% 55% at 72% 70%, rgba(232, 184, 74, 0.13), transparent 70%), #0a0806;
}
.cn-fol { position: fixed; inset: 0; inline-size: 100%; block-size: 100%; z-index: 40; pointer-events: none; }
.cn-rain { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 0; pointer-events: none; }
.cn-hero__in { position: relative; z-index: 1; display: grid; gap: 1.6rem; inline-size: 100%; }
.cn-intro { max-inline-size: 38rem; }
@media (min-width: 62rem) {
  .cn-hero__in { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 2rem; }
}
.cn-h1 { margin: 0 0 1rem; font-family: var(--site-font-head); font-weight: 400; text-transform: uppercase; line-height: 1.02; font-size: clamp(1.8rem, 4vw, 3rem); color: var(--gold-hi); }
.cn-h1 span { display: block; }
.cn-h1 span:nth-child(2) { color: var(--gold); }
.cn-h1 .cn-h1__k { margin-block-end: 0.9rem; font-family: var(--site-font-body, inherit); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.22em; line-height: 1.4; color: var(--gold); }
.cn-sub { margin: 0 0 1.3rem; max-width: 40rem; color: var(--site-dim); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.55; }
.cn-hint { margin: 0.5rem 0 0; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--site-dim); }
.cn-story__note { margin: 0.6rem 0 0; font-size: 0.82rem; max-inline-size: none; text-align: center; }
.cn-tip-pop {
  position: absolute; z-index: 2; padding: 0.3rem 0.65rem; border: 1px solid var(--gold); border-radius: 0.4rem; background: rgba(10, 8, 6, 0.92);
  color: var(--gold-hi); font-size: 0.78rem; pointer-events: none; white-space: nowrap; transform: translate(-50%, -140%);
}

/* сцена: все размеры в долях ширины (1 условная единица = 1/820 ширины сцены), поэтому она точно масштабируется */
.cn-stage { container-type: inline-size; }
.cn-stage__in { --u: calc(100cqw / 820); position: relative; aspect-ratio: 820 / 900; }
.cn-glow, .cn-post, .cn-bill, .cn-mon, .cn-mon__neck, .cn-mon__foot, .cn-rep, .cn-btnp, .cn-tel, .cn-plq {
  position: absolute; left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u)); width: calc(var(--w, 0) * var(--u)); height: calc(var(--h, 0) * var(--u));
}
.cn-glow { background: radial-gradient(closest-side, rgba(232, 184, 74, 0.14), transparent); }
.cn-post { background: linear-gradient(to right, #7a5416, #e0b050 45%, #6b4a14); border-radius: 2px; }

.cn-bill {
  box-sizing: border-box; display: grid; align-content: center; justify-items: center; gap: calc(5 * var(--u)); padding: calc(5 * var(--u));
  background: linear-gradient(160deg, #2a1d0b, #150f07); border: max(2px, calc(2.5 * var(--u))) solid #c8973a; border-radius: calc(4 * var(--u));
  box-shadow: 0 0 calc(17 * var(--u)) rgba(242, 199, 92, 0.22), inset 0 0 calc(12 * var(--u)) rgba(0, 0, 0, 0.6);
}
.cn-bill__q { display: flex; align-items: center; gap: calc(4 * var(--u)); inline-size: 80%; block-size: calc(15 * var(--u)); padding-inline: calc(5 * var(--u)); border-radius: 3rem; background: rgba(240, 232, 214, 0.1); border: 1px solid rgba(240, 232, 214, 0.25); }
.cn-bill__q i { flex: none; inline-size: calc(7 * var(--u)); block-size: calc(7 * var(--u)); border: max(1.5px, calc(1.5 * var(--u))) solid var(--gold); border-radius: 50%; }
.cn-bill__q b { flex: 1; block-size: max(2px, calc(2.5 * var(--u))); border-radius: 2px; background: rgba(240, 232, 214, 0.35); }
.cn-bill__t { font-family: var(--site-font-head); font-size: max(0.72rem, calc(15 * var(--u))); text-transform: uppercase; color: var(--gold-hi); text-align: center; line-height: 1.05; }

.cn-scr__bar { display: flex; gap: calc(3 * var(--u)); inline-size: 100%; }
.cn-scr__bar i { inline-size: calc(4.5 * var(--u)); block-size: calc(4.5 * var(--u)); border-radius: 50%; background: rgba(240, 232, 214, 0.35); }
.cn-scr__hero { inline-size: 100%; block-size: calc(35 * var(--u)); border-radius: calc(2.5 * var(--u)); background: linear-gradient(120deg, rgba(242, 199, 92, 0.5), rgba(242, 199, 92, 0.12)); }
.cn-scr__row { display: flex; gap: calc(4 * var(--u)); inline-size: 100%; }
.cn-scr__row i { flex: 1; block-size: calc(17 * var(--u)); border-radius: calc(2 * var(--u)); background: rgba(240, 232, 214, 0.14); }
.cn-scr__t { font-size: max(0.55rem, calc(7 * var(--u))); line-height: 1.15; text-align: center; color: var(--gold-hi); }
.cn-scr__cta { inline-size: 40%; block-size: calc(9 * var(--u)); border-radius: 3rem; background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); }

/* монитор: тёмный корпус с тонкой кромкой, экран светлее баннера, подставка с основанием, чтобы не путать с рекламным щитом */
.cn-mon { box-sizing: border-box; padding: calc(7 * var(--u)) calc(7 * var(--u)) calc(15 * var(--u)); border-radius: calc(8 * var(--u)); background: linear-gradient(160deg, #6b4a14, #1f150a); border: max(2px, calc(4 * var(--u))) solid #c8973a; box-shadow: 0 0 calc(34 * var(--u)) rgba(242, 199, 92, 0.22), 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.6); }
.cn-mon__s { position: relative; box-sizing: border-box; display: grid; align-content: center; justify-items: center; gap: calc(7 * var(--u)); inline-size: 100%; block-size: 100%; padding: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #2a2010, #120d06); }
.cn-mon__s::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 240, 200, 0.14), rgba(255, 240, 200, 0) 38%); pointer-events: none; }
.cn-mon__neck { background: linear-gradient(to right, #7a5416, #e0b050 50%, #6b4a14); }
.cn-mon__foot { border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #e0b050, #4a330d 80%); box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.6); }
.cn-scr__bar b { flex: 1; block-size: calc(7 * var(--u)); border-radius: 3rem; background: rgba(240, 232, 214, 0.18); }
.cn-scr__bar { align-items: center; }

/* отчёт гнома: свиток с суммой потраченного на рекламу и заработанного */
.cn-rep { box-sizing: border-box; display: grid; align-content: center; gap: calc(6 * var(--u)); padding: calc(8 * var(--u)) calc(22 * var(--u)); border-radius: calc(5 * var(--u)); background: linear-gradient(#ecdcae, #cdb67e); color: #3a2a10; box-shadow: 0 calc(5 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.6); }
.cn-rep::before, .cn-rep::after { content: ""; position: absolute; inset-block: calc(-4 * var(--u)); inline-size: calc(14 * var(--u)); border-radius: calc(7 * var(--u)); background: linear-gradient(to right, #8d6a2c, #e6cf94 45%, #7a5a22); }
.cn-rep::before { inset-inline-start: calc(-6 * var(--u)); }
.cn-rep::after { inset-inline-end: calc(-6 * var(--u)); }
.cn-rep__r { display: flex; justify-content: space-between; align-items: baseline; gap: calc(8 * var(--u)); line-height: 1.05; }
.cn-rep__r em { font-style: normal; font-size: max(0.55rem, calc(10 * var(--u))); letter-spacing: 0.04em; text-transform: uppercase; }
.cn-rep__r b { display: inline-flex; align-items: center; font-family: var(--site-font-head); font-weight: 400; font-size: max(0.85rem, calc(22 * var(--u))); font-variant-numeric: tabular-nums; }
.cn-rep__r.is-win b { color: #6a4608; }
.cn-rep__r.is-roi { padding-block-start: calc(4 * var(--u)); border-block-start: 1px solid rgba(58, 42, 16, 0.35); }
.cn-rep__r.is-roi b::before { content: none; }
.cn-rep__r.is-roi b.is-neg { color: #8a2f1a; }
.cn-rep__r.is-roi b.is-pos { color: #3d5a12; }
.cn-rep__r b::before { content: ""; display: inline-block; inline-size: 0.55em; block-size: 0.55em; margin-inline-end: 0.3em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1bf, #f2c75c 55%, #a87420); }

.cn-btnp { border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #6b4a14, #241808 72%); box-shadow: 0 calc(3 * var(--u)) calc(9 * var(--u)) rgba(0, 0, 0, 0.7), 0 0 calc(15 * var(--u)) rgba(242, 199, 92, 0.18); }
.cn-btnp__cap {
  position: absolute; inset: 0 12% 24% 12%; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 28%, #ffe9a0, #eab040 55%, #9a5d12); color: #2a1604; font-weight: 700; text-transform: uppercase; font-size: max(0.5rem, calc(7.5 * var(--u))); letter-spacing: 0.06em;
  box-shadow: 0 calc(2 * var(--u)) 0 #7a4a0e; transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}
.cn-btnp.is-hit .cn-btnp__cap { transform: translateY(calc(2 * var(--u))); box-shadow: 0 0 0 #7a4a0e, 0 0 calc(17 * var(--u)) rgba(255, 224, 138, 0.9); filter: brightness(1.25); }

.cn-tel svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.cn-tel__s { fill: #b8862e; stroke: #6b4a14; stroke-width: 1.5; }
.cn-tel__h { fill: none; stroke: #e0b050; stroke-width: 8; stroke-linecap: round; }
.cn-tel__e { fill: #c8973a; stroke: #6b4a14; stroke-width: 1.5; }
.cn-tel__d { fill: #1a1208; stroke: #f2c75c; stroke-width: 2; }
.cn-tel__d2 { fill: #f2c75c; }
.cn-tel__a { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.cn-tel.is-ring .cn-tel__a { animation: cn-ring 0.7s ease-out 2; }
.cn-tel.is-ring .cn-tel__a2 { animation-delay: 0.12s; }
@keyframes cn-ring { 0% { opacity: 0; transform: scale(0.75); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.18); } }

.cn-stage__cv { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.cn-gn { transform-origin: 50% 100%; animation: cn-meas var(--d, 3s) ease-in-out infinite; position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); inline-size: calc(var(--w) * var(--u)); block-size: auto; transform: translate(-50%, -100%); pointer-events: none; }

.cn-plq {
  box-sizing: border-box; display: grid; place-items: center; align-content: center; gap: calc(1 * var(--u)); border-radius: calc(3.5 * var(--u)); text-align: center; line-height: 1;
  background: linear-gradient(#3a2a10, #1a1208); border: 1px solid rgba(242, 199, 92, 0.55); box-shadow: 0 0 calc(9 * var(--u)) rgba(242, 199, 92, 0.12);
}
.cn-plq span { font-size: max(0.55rem, calc(7 * var(--u))); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.cn-plq b { font-family: var(--site-font-head); font-weight: 400; font-size: max(0.9rem, calc(13 * var(--u))); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.cn-plq.is-bump b { animation: cn-bump 0.35s ease-out; }
@keyframes cn-bump { 40% { transform: scale(1.35); color: #fff; } }

@keyframes cn-meas { 0%, 100% { transform: translate(-50%, -100%) rotate(-2.5deg); } 50% { transform: translate(-50%, -100%) rotate(2.5deg) scaleY(1.025); } }
.cn-gn.is-act { animation: cn-act 0.45s ease-out; }
@keyframes cn-act { 40% { transform: translate(-50%, -100%) translateY(-9%) scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .cn-gn { animation: none; } }

/* телефон: на ширине сцены 300-400 px условная единица меньше пикселя, поэтому подписи, счётчики и свиток крупнее и размещены заново (!important перекрывает inline-переменные позиции) */
@media (max-width: 43.75rem) {
  .cn-bill { --x: 70 !important; --y: 26 !important; --w: 290 !important; --h: 150 !important; padding: calc(6 * var(--u)); gap: calc(8 * var(--u)); }
  .cn-bill__t { font-size: 0.56rem; line-height: 1.15; letter-spacing: 0.02em; }
  .cn-bill__q { display: none; }
  .cn-mon { --y: 8 !important; --h: 172 !important; }
  .cn-scr__t { font-size: 0.5rem; }
  .cn-btnp__cap { font-size: 0.44rem; letter-spacing: 0.02em; }
  .cn-plq { --w: 124 !important; --h: 78 !important; gap: calc(3 * var(--u)); }
  .cn-plq span { font-size: 0.5rem; letter-spacing: 0.03em; }
  .cn-plq b { font-size: 0.85rem; }
  .cn-plq[data-count="click"] { --x: 372 !important; --y: 282 !important; }
  .cn-plq[data-count="lead"] { --x: 672 !important; --y: 542 !important; }
  .cn-plq[data-count="call"] { --x: 185 !important; --y: 492 !important; --w: 215 !important; --h: 128 !important; }
  .cn-plq[data-count="client"] { --x: 224 !important; --y: 802 !important; }
  .cn-gn[data-gn="rep"] { --x: 790 !important; }
  .cn-rep { --x: 438 !important; --y: 640 !important; --w: 312 !important; --h: 236 !important; gap: calc(7 * var(--u)); padding: calc(10 * var(--u)) calc(30 * var(--u)); }
  .cn-rep__r { flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(2 * var(--u)); }
  .cn-rep__r em { font-size: 0.5rem; letter-spacing: 0; text-transform: none; }
  .cn-rep__r b { font-size: 0.8rem; }
  .cn-rep__r.is-roi { padding-block-start: calc(6 * var(--u)); }
}

/* ---------- R2. Путь монеты ---------- */
.cn-path { padding-block: clamp(2.5rem, 4.5vw, 3.8rem); background: linear-gradient(to bottom, #0a0806, #100c07 60%, #0a0806); }
.cn-path .cn-h2 { font-size: clamp(1.6rem, 3.1vw, 2.5rem); }
.cn-path .cn-lead { max-inline-size: 76rem; margin-block-end: 0.9rem; font-size: clamp(0.95rem, 1.3vw, 1.05rem); line-height: 1.5; }
.cn-path .cn-tip { margin-block-end: 0.7rem; }
.cn-tip { margin: 0 0 1.2rem; font-size: 0.85rem; color: var(--gold); letter-spacing: 0.08em; }
.cn-stages { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.8rem; counter-reset: none; }
.cn-st { border: 1px solid var(--site-line); border-radius: 1rem; background: rgba(20, 16, 10, 0.7); overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; }
.cn-st.is-hot { border-color: rgba(242, 199, 92, 0.6); box-shadow: 0 0 22px rgba(242, 199, 92, 0.14); }
.cn-st.is-on { border-color: rgba(242, 199, 92, 0.7); }
.cn-st__b {
  position: relative; display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); grid-template-areas: "g t";
  gap: 0.15rem 1rem; align-items: center; inline-size: 100%; padding: 0.9rem 1rem; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.cn-st__b:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.cn-st__n {
  position: absolute; inset-block-start: 0.7rem; inset-inline-start: 0.7rem; z-index: 1; display: grid; place-items: center; inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); color: var(--ink); font-size: 0.85rem; font-weight: 700; box-shadow: 0 0 12px rgba(242, 199, 92, 0.5);
}
.cn-st__g { grid-area: g; inline-size: 3.6rem; block-size: auto; }
.cn-st__t { grid-area: t; align-self: end; font-family: var(--site-font-head); font-size: 1.4rem; text-transform: uppercase; color: var(--gold-hi); line-height: 1.1; min-block-size: 2.2em; display: grid; align-content: end; }
.cn-st__tag { grid-area: tag; align-self: start; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--site-dim); }
.cn-st.is-pay .cn-st__tag { color: var(--gold); font-weight: 600; }
.cn-st__more { padding: 0 1rem 1.1rem; }
.cn-st__who { margin: 0 0 0.6rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.cn-st__more dl { display: grid; gap: 0.2rem; margin: 0; }
.cn-st__more dt { margin-block-start: 0.7rem; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.cn-st__more dt.is-leak { color: #e98a5b; }
.cn-st__more dd { margin: 0; color: var(--site-fg); line-height: 1.55; }
.cn-js .cn-st:not(.is-on) .cn-st__more { display: none; }

@media (min-width: 62rem) {
  .cn-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.9rem; }
  .cn-st { display: contents; border: 0; background: none; overflow: visible; }
  .cn-st__b {
    grid-template-columns: 1fr; grid-template-areas: "g" "t"; justify-items: center; text-align: center; gap: 0.5rem; padding: 0.8rem 0.8rem 0.8rem;
    border: 1px solid var(--site-line); border-radius: 1rem; background: radial-gradient(90% 60% at 50% 38%, rgba(232, 184, 74, 0.1), rgba(20, 16, 10, 0.85));
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  }
  .cn-st__b:hover { border-color: rgba(242, 199, 92, 0.6); transform: translateY(-3px); }
  .cn-st.is-on .cn-st__b, .cn-st.is-hot .cn-st__b { border-color: rgba(242, 199, 92, 0.75); box-shadow: 0 0 26px rgba(242, 199, 92, 0.16); }
  .cn-st__b::after { content: "›"; position: absolute; inset-block-start: 42%; inset-inline-end: -0.78rem; z-index: 2; color: var(--gold); font-size: 1.6rem; line-height: 1; }
  .cn-st:last-child .cn-st__b::after { content: none; }
  .cn-st__g { inline-size: min(100%, 5.6rem); }
  .cn-st__more { grid-column: 1 / -1; grid-row: 2; margin-block-start: 0.3rem; padding: 1rem 1.4rem 1.2rem; border: 1px solid rgba(242, 199, 92, 0.5); border-radius: 1rem; background: rgba(20, 16, 10, 0.85); }
  .cn-st__more dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }
  .cn-st__more dt { margin-block-start: 0; }
  .cn-st__more dd { margin-block-end: 0; }
  .cn-st__more dl > * { grid-row: auto; }
  .cn-st__more dt:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .cn-st__more dd:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .cn-st__more dt:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .cn-st__more dd:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .cn-st__more dt:nth-of-type(3) { grid-column: 3; grid-row: 1; }
  .cn-st__more dd:nth-of-type(3) { grid-column: 3; grid-row: 2; }
  .cn-js .cn-st:not(.is-on) .cn-st__more { display: none; }
}

/* ---------- R6. Что делаем ---------- */
.cn-do { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .cn-do { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cn-do { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-do li { position: relative; padding: 1.3rem 1.3rem 1.2rem; border: 1px solid var(--site-line); border-radius: 1rem; background: rgba(20, 16, 10, 0.6); }
.cn-do h3 { margin: 0 0 0.5rem; padding-inline-end: 3rem; font-family: var(--site-font-head); font-weight: 400; font-size: 1.2rem; text-transform: uppercase; color: var(--gold-hi); line-height: 1.15; }
.cn-do p { margin: 0; color: var(--site-dim); line-height: 1.55; }
.cn-do__s {
  position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; min-inline-size: 1.9rem; padding: 0.2rem 0.55rem; border-radius: 2rem; text-align: center;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 60%, var(--gold-lo)); color: var(--ink); font-size: 0.78rem; font-weight: 700;
}

/* ---------- R4. Тесты ---------- */
.cn-ab__row { display: grid; gap: 1rem; max-inline-size: 52rem; }
@media (min-width: 40rem) { .cn-ab__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cn-ad { margin: 0; padding: 1.2rem 1.3rem; border: 1px solid var(--site-line); border-radius: 1rem; background: rgba(20, 16, 10, 0.7); transition: border-color 0.4s, box-shadow 0.4s; }
.cn-ad__k { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.cn-ad__w { visibility: hidden; padding: 0.1rem 0.6rem; border-radius: 2rem; background: var(--gold); color: var(--ink); letter-spacing: 0.04em; }
.cn-ad__x { margin: 0 0 1rem; min-block-size: 3em; color: var(--site-fg); line-height: 1.5; }
.cn-ad__bar { block-size: 0.7rem; border-radius: 0.4rem; background: rgba(240, 232, 214, 0.12); overflow: hidden; }
.cn-ad__bar i { display: block; block-size: 100%; inline-size: calc(var(--v, 0) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--gold-lo), var(--gold)); }
.cn-ad__l { margin: 0.45rem 0 0; font-size: 0.78rem; color: var(--site-dim); }
.cn-ab.is-done .cn-ad.is-win, .cn-ab:not(.cn-ab--js) .cn-ad.is-win { border-color: rgba(242, 199, 92, 0.75); box-shadow: 0 0 26px rgba(242, 199, 92, 0.16); }
.cn-ab.is-done .cn-ad.is-win .cn-ad__w, .cn-ab:not(.cn-ab--js) .cn-ad.is-win .cn-ad__w { visibility: visible; }

/* ---------- R16. Кейсы ---------- */
.cn-cases { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .cn-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cn-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-case { padding: 1.4rem 1.4rem 1.3rem; border: 1px solid var(--site-line); border-radius: 1rem; background: radial-gradient(120% 80% at 100% 0%, rgba(232, 184, 74, 0.1), rgba(20, 16, 10, 0.7)); }
.cn-case__site { margin: 0; font-family: var(--site-font-head); font-size: 1.5rem; color: var(--gold-hi); overflow-wrap: anywhere; }
.cn-case__topic { margin: 0.2rem 0 1.1rem; font-size: 0.85rem; color: var(--site-dim); }
.cn-case dl { display: grid; gap: 0.8rem; margin: 0; }
.cn-case dl > div { display: grid; }
.cn-case dd { margin: 0; font-family: var(--site-font-head); font-size: 1.5rem; line-height: 1.1; color: var(--gold); }
.cn-case dl > .is-big dd { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--gold-hi); }
.cn-case dt { font-size: 0.85rem; color: var(--site-dim); line-height: 1.4; }

/* ---------- R14. Смежные услуги ---------- */
.cn-rel { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; max-inline-size: 64rem; }
@media (min-width: 48rem) { .cn-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-rel a { display: grid; gap: 0.5rem; align-content: start; block-size: 100%; padding: 1.2rem 1.3rem; border: 1px solid var(--site-line); border-radius: 1rem; background: rgba(20, 16, 10, 0.6); text-decoration: none; color: inherit; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.cn-rel a:hover, .cn-rel a:focus-visible { border-color: rgba(242, 199, 92, 0.6); transform: translateY(-3px); box-shadow: 0 0 24px rgba(242, 199, 92, 0.12); }
.cn-rel__t { font-size: 1.15rem; color: var(--gold-hi); }
.cn-rel__d { color: var(--site-dim); line-height: 1.5; }
.cn-rel__m { color: var(--gold); font-size: 0.9rem; }

/* ---------- R18. Финал ---------- */
.cn-end { background: linear-gradient(to right, rgba(10, 8, 6, 0.95) 0%, rgba(10, 8, 6, 0.82) 55%, rgba(10, 8, 6, 0.35) 100%), #0a0806 url("/coinflow/img/scene.webp") 80% center / cover no-repeat; }
.cn-nums { display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; margin: 2.4rem 0 0; padding: 1.4rem 0 0; list-style: none; border-block-start: 1px solid var(--site-line); }
.cn-nums li { display: grid; }
.cn-nums b { font-family: var(--site-font-head); font-weight: 400; font-size: 2.2rem; color: var(--gold-hi); }
.cn-nums span { color: var(--site-dim); font-size: 0.9rem; }

/* ---------- R3. Аукцион ---------- */
.cn-auc__grid { display: grid; gap: 1.6rem; }
@media (min-width: 52rem) { .cn-auc__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: 2.5rem; } }
.cn-rng { display: grid; gap: 0.5rem; margin-block-end: 1.3rem; }
.cn-rng__t { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: var(--site-fg); }
.cn-rng__t b { font-family: var(--site-font-head); font-weight: 400; font-size: 1.6rem; color: var(--gold-hi); }
.cn-rng__d { font-size: 0.82rem; color: var(--site-dim); }
.cn-rng input[type="range"] { inline-size: 100%; accent-color: var(--gold); block-size: 2rem; cursor: pointer; }
.cn-auc__res { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 1.5rem 0 0.8rem; }
.cn-auc__res > div { padding: 0.9rem 1rem; border: 1px solid var(--site-line); border-radius: 0.9rem; background: rgba(20, 16, 10, 0.7); }
.cn-auc__res dt { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.cn-auc__res dd { margin: 0.2rem 0 0; font-family: var(--site-font-head); font-size: 1.9rem; color: var(--gold-hi); }
.cn-auc__v { margin: 0; min-block-size: 3.2em; color: var(--site-dim); line-height: 1.55; }
.cn-auc__list { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.cn-ar { display: grid; gap: 0.3rem; padding: 0.7rem 0.9rem; border: 1px solid var(--site-line); border-radius: 0.8rem; background: rgba(20, 16, 10, 0.6); transition: border-color 0.3s, box-shadow 0.3s; }
.cn-ar__h { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; color: var(--site-dim); }
.cn-ar__bar { block-size: 0.55rem; border-radius: 0.4rem; background: rgba(240, 232, 214, 0.1); overflow: hidden; }
.cn-ar__bar i { display: block; block-size: 100%; inline-size: calc(var(--v, 0) * 1%); border-radius: inherit; background: rgba(240, 232, 214, 0.35); transition: inline-size 0.35s ease; }
.cn-ar.is-me { border-color: rgba(242, 199, 92, 0.75); box-shadow: 0 0 22px rgba(242, 199, 92, 0.14); }
.cn-ar.is-me .cn-ar__h { color: var(--gold-hi); }
.cn-ar.is-me .cn-ar__bar i { background: linear-gradient(90deg, var(--gold-lo), var(--gold)); }

/* ---------- R5. Калькулятор ---------- */
.cn-calc__grid { display: grid; gap: 1.6rem; }
@media (min-width: 52rem) { .cn-calc__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2.5rem; align-items: start; } }
.cn-calc__in { display: grid; gap: 0.9rem; padding: 1.4rem; border: 1px solid var(--site-line); border-radius: 1rem; background: rgba(20, 16, 10, 0.7); }
.cn-fld { display: grid; gap: 0.35rem; }
.cn-fld span { font-size: 0.82rem; color: var(--site-dim); }
.cn-fld input, .cn-fld select { box-sizing: border-box; inline-size: 100%; min-block-size: 2.8rem; padding: 0 0.9rem; border: 1px solid rgba(242, 199, 92, 0.35); border-radius: 0.5rem; background: rgba(240, 232, 214, 0.05); color: var(--site-fg); font: inherit; }
.cn-fld input:focus, .cn-fld select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 199, 92, 0.18); }
.cn-fld select option { background: #14100a; }
.cn-fun { display: grid; gap: 0.5rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.cn-fun li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: 2.6rem; padding: 0 1rem; border-radius: 0.6rem; overflow: hidden; background: rgba(240, 232, 214, 0.06); }
.cn-fun li i { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--w, 100) * 1%); background: linear-gradient(90deg, rgba(176, 125, 34, 0.55), rgba(242, 199, 92, 0.35)); transition: inline-size 0.45s ease; }
.cn-fun li span, .cn-fun li b { position: relative; }
.cn-fun li b { font-family: var(--site-font-head); font-weight: 400; font-size: 1.35rem; color: var(--gold-hi); }
.cn-calc__res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 0 0 1rem; }
.cn-calc__res > div { padding: 0.8rem 1rem; border: 1px solid var(--site-line); border-radius: 0.8rem; background: rgba(20, 16, 10, 0.7); }
.cn-calc__res dt { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.cn-calc__res dd { margin: 0.2rem 0 0; font-family: var(--site-font-head); font-size: 1.6rem; color: var(--gold-hi); }
.cn-calc__res dd em { font-style: normal; font-size: 0.8rem; color: var(--site-dim); }
.cn-calc__res .is-roi dd.is-pos { color: #9fd26a; }
.cn-calc__res .is-roi dd.is-neg { color: #e98a5b; }
.cn-calc__v { margin: 0 0 1.2rem; max-inline-size: 40rem; color: var(--site-dim); line-height: 1.55; min-block-size: 3.2em; }

/* ---------- R7. Чего не делаем ---------- */
.cn-no { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .cn-no { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cn-no { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cn-nc__b { display: grid; align-content: start; gap: 0.8rem; inline-size: 100%; min-block-size: 13rem; padding: 1.3rem; border: 1px solid var(--site-line); border-radius: 1rem; background: radial-gradient(120% 80% at 100% 0%, rgba(232, 184, 74, 0.1), rgba(20, 16, 10, 0.7)); color: inherit; font: inherit; text-align: start; cursor: pointer; transition: border-color 0.3s, transform 0.3s; }
.cn-nc__b:hover, .cn-nc__b:focus-visible { border-color: rgba(242, 199, 92, 0.7); transform: translateY(-3px); }
.cn-nc__b:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cn-nc__f, .cn-nc__k { display: grid; gap: 0.5rem; }
.cn-nc__f em, .cn-nc__k em { font-style: normal; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.cn-nc__f strong { font-family: var(--site-font-head); font-weight: 400; font-size: 1.45rem; line-height: 1.1; text-transform: uppercase; color: var(--gold-hi); text-decoration: line-through; text-decoration-color: rgba(233, 138, 91, 0.8); text-decoration-thickness: 2px; }
.cn-nc__k span { color: var(--site-fg); line-height: 1.55; font-size: 0.95rem; }
.cn-js .cn-nc__k { display: none; }
.cn-js .cn-nc__b[aria-pressed="true"] .cn-nc__k { display: grid; }
.cn-js .cn-nc__b[aria-pressed="true"] .cn-nc__f { display: none; }
.cn-js .cn-nc__b[aria-pressed="true"] { border-color: rgba(242, 199, 92, 0.75); }

/* ---------- R11. Первые 30 дней ---------- */
.cn-m__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 1.2rem; }
.cn-m__tabs button { min-block-size: 2.8rem; padding: 0 1.3rem; border: 1px solid var(--site-line); border-radius: 3rem; background: rgba(20, 16, 10, 0.6); color: var(--site-dim); font: inherit; cursor: pointer; transition: border-color 0.25s, color 0.25s, background-color 0.25s; }
.cn-m__tabs button:hover { border-color: rgba(242, 199, 92, 0.6); color: var(--gold-hi); }
.cn-m__tabs button[aria-selected="true"] { border-color: var(--gold); color: var(--ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.cn-m__tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cn-m__p { padding: 1.4rem 1.5rem; margin-block-end: 1rem; border: 1px solid var(--site-line); border-radius: 1rem; background: rgba(20, 16, 10, 0.7); }
.cn-js .cn-m__p:not(.is-on) { display: none; }
.cn-m__p h3 { margin: 0 0 0.9rem; font-family: var(--site-font-head); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; color: var(--gold-hi); }
.cn-m__p ul { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.cn-m__p li { position: relative; padding-inline-start: 1.5rem; color: var(--site-fg); line-height: 1.5; }
.cn-m__p li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.4em; inline-size: 0.8rem; block-size: 0.8rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); }
.cn-m__y { margin: 0; padding-block-start: 0.9rem; border-block-start: 1px solid var(--site-line); color: var(--site-dim); }
.cn-m__y b { color: var(--gold); font-weight: 600; }

/* ---------- R13. Самопроверка ---------- */
.cn-fit { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .cn-fit { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2.5rem; align-items: start; } }
.cn-fit__l { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.cn-fit__l li { padding: 0.9rem 1.1rem; border: 1px solid var(--site-line); border-radius: 0.9rem; background: rgba(20, 16, 10, 0.6); transition: border-color 0.3s; }
.cn-fit__l li.is-on { border-color: rgba(242, 199, 92, 0.7); }
.cn-fit__l label { display: flex; align-items: center; gap: 0.9rem; min-block-size: 2.4rem; cursor: pointer; color: var(--site-fg); line-height: 1.4; }
.cn-fit__l input { flex: none; inline-size: 1.35rem; block-size: 1.35rem; accent-color: var(--gold); cursor: pointer; }
.cn-fit__x { display: block; margin-block-start: 0.3rem; padding-inline-start: 2.25rem; color: var(--site-dim); font-size: 0.85rem; line-height: 1.45; }
.cn-js .cn-fit__x { display: none; }
.cn-fit__r { padding: 1.4rem; border: 1px solid rgba(242, 199, 92, 0.5); border-radius: 1rem; background: rgba(20, 16, 10, 0.8); }
.cn-fit__v { margin: 0 0 1.2rem; min-block-size: 5em; color: var(--gold-hi); font-size: 1.1rem; line-height: 1.5; }
.cn-fit__v small { display: block; margin-block-start: 0.5rem; color: var(--site-dim); font-size: 0.92rem; }

/* ---------- иллюстрации экранов: гном с тёплым свечением рядом с заголовком ---------- */
.cn-sec { position: relative; }
/* экраны ниже второго рисуются, когда до них доскроллят: меньше работы при загрузке (особенно на телефоне) */
.cn-sec:not(.cn-path):not(#home) { content-visibility: auto; contain-intrinsic-size: auto 62rem; }
.cn-ill { position: relative; isolation: isolate; display: block; inline-size: 5.6rem; margin: 0 0 0.8rem; pointer-events: none; }
.cn-ill::before { content: ""; position: absolute; z-index: -1; inset: 10% -45% -4%; background: radial-gradient(closest-side, rgba(242, 199, 92, 0.2), transparent); }
.cn-ill img { display: block; inline-size: 100%; block-size: auto; transform-origin: 50% 100%; filter: drop-shadow(0 0.6rem 0.9rem rgba(0, 0, 0, 0.65)); animation: cn-sway 4.2s ease-in-out infinite; }
@keyframes cn-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@media (min-width: 62rem) {
  .cn-ill { position: absolute; inset-block-start: clamp(2.5rem, 5vw, 4.5rem); inset-inline-end: max(var(--site-gutter), calc((100% - var(--site-wrap)) / 2)); inline-size: 8.4rem; margin: 0; }
}

/* ---------- R8. Площадки ---------- */
.cn-pl { display: grid; gap: 0.9rem; margin-block-end: 2rem; }
@media (min-width: 40rem) { .cn-pl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cn-pl__c { padding: 1.3rem 1.4rem; border: 1px solid var(--site-line); border-radius: 1rem; background: radial-gradient(120% 80% at 100% 0%, rgba(232, 184, 74, 0.1), rgba(20, 16, 10, 0.7)); }
.cn-pl__c h3 { margin: 0 0 0.5rem; font-family: var(--site-font-head); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; color: var(--gold-hi); }
.cn-pl__c p { margin: 0; color: var(--site-dim); line-height: 1.55; }
.cn-pl__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 1.1rem; }
.cn-pl__tabs button { min-block-size: 2.8rem; padding: 0 1.3rem; border: 1px solid var(--site-line); border-radius: 3rem; background: rgba(20, 16, 10, 0.6); color: var(--site-dim); font: inherit; cursor: pointer; transition: border-color 0.25s, color 0.25s, background-color 0.25s; }
.cn-pl__tabs button:hover { border-color: rgba(242, 199, 92, 0.6); color: var(--gold-hi); }
.cn-pl__tabs button[aria-selected="true"] { border-color: var(--gold); color: var(--ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.cn-pl__tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cn-pl__p { padding: 1.4rem 1.5rem; margin-block-end: 1rem; border: 1px solid var(--site-line); border-radius: 1rem; background: rgba(20, 16, 10, 0.7); }
.cn-js .cn-pl__p:not(.is-on) { display: none; }
.cn-pl__k { margin: 0 0 0.3rem; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.cn-pl__p h3 { margin: 0 0 0.9rem; font-family: var(--site-font-head); font-weight: 400; font-size: 1.45rem; text-transform: uppercase; color: var(--gold-hi); line-height: 1.15; }
.cn-pl__p ul { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.cn-pl__p li { position: relative; padding-inline-start: 1.5rem; color: var(--site-fg); line-height: 1.5; }
.cn-pl__p li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.4em; inline-size: 0.8rem; block-size: 0.8rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); }
.cn-pl__m { margin: 0; padding-block-start: 0.9rem; border-block-start: 1px solid var(--site-line); color: var(--site-dim); }
.cn-pl__m b { color: var(--gold); font-weight: 600; }

/* ---------- R10. Отчёт ---------- */
.cn-rp { max-inline-size: 62rem; border: 1px solid var(--site-line); border-radius: 1rem; background: rgba(20, 16, 10, 0.7); overflow: hidden; }
.cn-rp__head, .cn-rr__b { display: grid; grid-template-columns: 1.3fr 1fr 1fr 0.9fr; gap: 0.6rem; align-items: baseline; padding: 0.8rem 1.1rem; }
.cn-rp__head { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); border-block-end: 1px solid var(--site-line); }
.cn-rp__l { margin: 0; padding: 0; list-style: none; }
.cn-rr + .cn-rr { border-block-start: 1px solid rgba(232, 184, 74, 0.12); }
.cn-rr__b { inline-size: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background-color 0.25s; }
.cn-rr__b:hover { background: rgba(242, 199, 92, 0.06); }
.cn-rr__b:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.cn-rr.is-on .cn-rr__b { background: rgba(242, 199, 92, 0.09); }
.cn-rr__t { color: var(--site-fg); }
.cn-rr__n { font-family: var(--site-font-head); font-size: 1.25rem; color: var(--site-dim); font-variant-numeric: tabular-nums; }
.cn-rr__n.is-new { color: var(--gold-hi); }
.cn-rr__n.is-coin::before { content: ""; display: inline-block; inline-size: 0.5em; block-size: 0.5em; margin-inline-end: 0.3em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1bf, #f2c75c 55%, #a87420); }
.cn-rr__d { font-size: 0.95rem; color: var(--site-dim); }
.cn-rr__d.is-good { color: #9fd26a; }
.cn-rr__d.is-bad { color: #e98a5b; }
.cn-rp__tabs { padding: 0.9rem 1.1rem 0.2rem; margin: 0; }
.cn-rp__tabs button { min-block-size: 2.4rem; padding: 0 1rem; }
.cn-pl__tabs button[aria-pressed="true"] { border-color: var(--gold); color: var(--ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.cn-rr__more { padding: 0.7rem 1.1rem; }
.cn-rr__more p { margin: 0 0 0.35rem; color: var(--site-dim); line-height: 1.55; }
.cn-rr__more p:last-child { margin-block-end: 0; }
.cn-rr__more b { color: var(--gold); font-weight: 600; }
.cn-js .cn-rr:not(.is-on) .cn-rr__more { display: none; }
@media (max-width: 40rem) {
  .cn-rp__head, .cn-rr__b { grid-template-columns: 1.1fr 0.9fr 0.9fr 0.8fr; gap: 0.35rem; padding-inline: 0.8rem; }
  .cn-rp__head { font-size: 0.62rem; letter-spacing: 0.04em; }
  .cn-rr__n { font-size: 1rem; }
  .cn-rr__t, .cn-rr__d { font-size: 0.85rem; }
}

/* ---------- R12. Цена, R9. Оплата ---------- */
.cn-pk { display: grid; gap: 1.2rem; }
@media (min-width: 52rem) { .cn-pk { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 2.5rem; } }
.cn-pk__top h3 { margin: 0 0 0.5rem; }
.cn-pk__price { margin: 0 0 0.3rem; color: var(--site-dim); }
.cn-pk__price b { font-family: var(--site-font-head); font-weight: 400; font-size: 2.6rem; color: var(--gold-hi); }
.cn-pk__h { margin: 0; color: var(--gold); letter-spacing: 0.06em; }
.cn-pk ul { margin: 0; }
.cn-pk li.is-bonus b { color: var(--gold); font-weight: 600; }
.cn-pl__p.cn-pk ul { margin-block-end: 0; }
.cn-pl__tabs button[aria-pressed="true"] { border-color: var(--gold); color: var(--ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }

/* ---------- R15. Команда ---------- */
.cn-tm { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 62rem) { .cn-tm { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: 2.8rem; } }
.cn-tm__ph .site-team { display: grid; grid-template-columns: repeat(2, minmax(0, 15rem)); gap: 1rem; margin: 0; padding: 0; list-style: none; }

.cn-actions--lg { margin-block-start: 2.4rem; }
.cn-do + .cn-note { margin-block-start: 1.3rem; }
.cn-pk__h span { display: block; margin-block-start: 0.2rem; color: var(--site-dim); font-size: 0.88rem; letter-spacing: 0; }
.cn-rl { max-inline-size: 62rem; margin-block-start: 1.8rem; }
.cn-rl__h { margin: 0 0 0.8rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.cn-rl__l { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .cn-rl__l { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-rl__l li { display: grid; gap: 0.35rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--site-line); border-radius: 0.9rem; background: rgba(20, 16, 10, 0.6); }
.cn-rl__l b { color: var(--gold-hi); font-weight: 600; }
.cn-rl__l span { color: var(--site-dim); font-size: 0.92rem; line-height: 1.5; }

.cn-st__opt { margin-inline-start: 0.5rem; font-size: 0.8rem; letter-spacing: 0; text-transform: none; color: var(--site-dim); }
/* экран отчёта на десктопе помещается в один экран */
@media (min-width: 62rem) {
  .cn-report { padding-block: clamp(2rem, 3vw, 2.6rem); }
  .cn-report .cn-eyebrow { margin-block-end: 0.5rem; }
  .cn-report .cn-h2 { margin-block-end: 0.5rem; font-size: clamp(1.6rem, 2.7vw, 2.3rem); }
  .cn-report .cn-lead { margin-block-end: 0.9rem; font-size: 1rem; }
  .cn-report .cn-rp__tabs { padding: 0.6rem 1.1rem 0.1rem; }
  .cn-report .cn-rp__head, .cn-report .cn-rr__b { padding-block: 0.4rem; }
  .cn-report .cn-rr__n { font-size: 1.1rem; }
  .cn-report .cn-rr__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; align-items: center; padding-block: 0.5rem 0.55rem; }
  .cn-report .cn-rr__more p { margin: 0; }
  .cn-report .cn-rp__head, .cn-report .cn-rr__b { padding-block: 0.32rem; }
  .cn-report .cn-note { margin-block-start: 0.5rem; font-size: 0.8rem; }
  .cn-report .cn-rl { margin-block-start: 0.9rem; }
  .cn-report .cn-rl__h { margin-block-end: 0.45rem; }
  .cn-report .cn-rl__l li { padding: 0.55rem 0.9rem; gap: 0.2rem; }
  .cn-report .cn-rl__l span { font-size: 0.85rem; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-ill img { animation: none; }
  html { scroll-behavior: auto; }
  .cn-rise, .cn-rv { animation: none; transition: none; }
  .cn-js .cn-rv--wait:not(.is-in) { opacity: 1; transform: none; }
  .cn-rain, .cn-fol { display: none; }
  .cn-st__b, .cn-rel a { transition: none; }
}

}