/* BH Agency v2.0 — bonus.css · bonus-v2 (24.10.2026): сцена-«продукт» розбору ніші (.rs) — головна (секція .bx, вантажиться після load,
   коли секція близько — hero.js) і перший екран /smm-strategy. Розмітка — tools/bonus_build.py → stage() з даних content/offer.json.
   Усі розміри — cqi від ширини сцени (container query) → сцена масштабується цілою. Рух: transform/opacity (+ stroke-dashoffset кільця);
   вхід .is-in (або .rs--auto на першому екрані), петлі — лише .is-on (сцена на екрані, bonus.js); нахил за курсором — --rx/--ry (bonus.js).
   prefers-reduced-motion — статичний фінальний стан. Без filter:blur, лише radial-gradient (Safari). */
.rs{--rs-c1:#fff;--rs-c2:#f6f5f1;--rs-scr:#fbfaf7;--rs-line:rgba(20,20,19,.08);--rs-track:rgba(20,20,19,.055);--rs-lime:#a9dc1e;--rs-lime-t:#587500;
  --rs-tint:rgba(143,193,15,.16);--rs-glow:rgba(143,193,15,0);--rs-av1:#ecebe5;--rs-av2:#d3d1c8;--rs-av-t:#141413;--rs-floor:rgba(20,20,19,.16);
  --rs-sh:inset 0 1px 0 #fff,0 0 0 1px rgba(20,20,19,.07),0 2.6cqi 5cqi -2.2cqi rgba(20,20,19,.26),0 .8cqi 1.6cqi -1cqi rgba(20,20,19,.12);
  position:relative;width:100%;container-type:inline-size;perspective:1700px}
:root[data-theme="dark"] .rs{--rs-c1:#26282c;--rs-c2:#17181b;--rs-scr:#121315;--rs-line:rgba(255,255,255,.08);--rs-track:rgba(255,255,255,.065);--rs-lime:#c8ff3e;--rs-lime-t:#c8ff3e;
  --rs-tint:rgba(200,255,62,.13);--rs-glow:rgba(200,255,62,.2);--rs-av1:#4b4e54;--rs-av2:#24262a;--rs-av-t:#fff;--rs-floor:rgba(0,0,0,.55);
  --rs-sh:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.08),0 3.2cqi 6cqi -2.4cqi rgba(0,0,0,.85),0 1cqi 2cqi -1cqi rgba(0,0,0,.5)}
.rs::before{content:"";position:absolute;left:-6%;right:-6%;top:-4%;bottom:-6%;pointer-events:none;background:radial-gradient(closest-side at 55% 52%,var(--rs-glow),transparent 72%)}
.rs__in{position:relative;aspect-ratio:100/86;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s cubic-bezier(.16,1,.3,1)}
.rs-floor{position:absolute;left:6%;right:4%;bottom:-3%;height:26%;pointer-events:none;background:radial-gradient(closest-side,var(--rs-floor),transparent);transform:translateZ(-60px)}
.rs p,.rs ul,.rs ol{margin:0;padding:0;list-style:none}
.rs i{font-style:normal}

/* розкладка: елементи — абсолютно, кут/глибина — змінні; --fx/--fy — звідки «роздаються» (центр стосу) */
.rs-el{position:absolute;transform:translateZ(var(--z,0px)) rotate(var(--r,0deg));backface-visibility:hidden}
.rs-r{left:56cqi;top:1.5cqi;width:40cqi;--r:4.5deg;--z:-30px;--fx:-14cqi;--fy:24cqi}
.rs-v{left:1cqi;top:4cqi;width:44cqi;--r:-4.5deg;--z:0px;--fx:22cqi;--fy:22cqi}
.rs-c{left:2cqi;top:47cqi;width:37cqi;--r:3deg;--z:20px;--fx:24cqi;--fy:-8cqi}
.rs-p{left:25cqi;top:29cqi;width:48cqi;--r:-1.5deg;--z:45px;--fx:0cqi;--fy:2cqi}
.rs-ph{left:74.5cqi;top:23cqi;width:22.5cqi;--r:6deg;--z:85px;--fx:-26cqi;--fy:8cqi}
.rs-ring{left:44.5cqi;top:-2cqi;width:12.5cqi;--z:110px;--fx:6cqi;--fy:30cqi}
.rs-tag{left:47cqi;top:79cqi;--r:-2deg;--z:100px;--fx:0cqi;--fy:-26cqi}

/* картка-сторінка розбору */
.rs-card{border-radius:2.4cqi;padding:2cqi 2.3cqi 2.3cqi;background:linear-gradient(180deg,var(--rs-c1),var(--rs-c2));box-shadow:var(--rs-sh);font-family:var(--f-inter);color:var(--ink)}
.rs-k{display:flex;align-items:center;justify-content:space-between;gap:1cqi;margin-bottom:1.5cqi!important;padding-bottom:1.3cqi!important;border-bottom:1px solid var(--rs-line);font:700 1.35cqi/1 var(--f-manrope);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rs-k b{font:700 1.6cqi/1 var(--f-tight);letter-spacing:-.02em;color:var(--rs-lime-t)}
.rs-t{font:700 2.5cqi/1.1 var(--f-tight);letter-spacing:-.03em;color:var(--ink-strong)}

/* 01 головне (offer-v3 25.10: план 8 + 20 і обсяг зразка) */
.rs-v__big{font:700 6.2cqi/1 var(--f-tight);letter-spacing:-.045em;padding-bottom:.08em;background:var(--metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.rs-v__s{margin-top:.9cqi!important;font:500 1.35cqi/1.2 var(--f-inter);color:var(--muted);white-space:nowrap}
.rs-v__kp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9cqi;margin-top:1.5cqi!important}
.rs-v__kp li{display:grid;gap:.6cqi;align-content:start;padding:1.2cqi 1.1cqi;border-radius:1.3cqi;background:var(--rs-track)}
.rs-v__kp b{font:700 2.3cqi/1 var(--f-tight);letter-spacing:-.04em;color:var(--rs-lime-t);white-space:nowrap}
.rs-v__kp span{font:500 1.15cqi/1.2 var(--f-inter);color:var(--muted)}

/* 02 дошка платформ: стовпчики шансу новачка */
.rs-p__cols{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4cqi;height:20cqi;margin:2.2cqi .6cqi 3.6cqi!important;
  background:linear-gradient(var(--rs-line),var(--rs-line)) 0 100%/100% 1px no-repeat,repeating-linear-gradient(to top,transparent 0 calc(25% - 1px),var(--rs-line) calc(25% - 1px) 25%)}
.rs-p__cols li{position:relative}
.rs-p__cols i{position:absolute;left:14%;right:14%;bottom:0;height:calc(var(--h) * .8);border-radius:1cqi 1cqi .3cqi .3cqi;transform-origin:50% 100%;
  background:linear-gradient(180deg,var(--rs-lime),var(--rs-tint))}
.rs-p__cols .is-thin i{background:repeating-linear-gradient(135deg,var(--rs-lime) 0 .75cqi,transparent .75cqi 1.4cqi);box-shadow:inset 0 0 0 1.5px var(--rs-lime),0 0 3cqi -.4cqi var(--rs-lime)}
.rs-p__cols b{position:absolute;left:-1cqi;right:-1cqi;bottom:calc(var(--h) * .8 + .9cqi);text-align:center;font:700 1.9cqi/1 var(--f-tight);letter-spacing:-.035em;color:var(--ink-strong);white-space:nowrap}
.rs-p__cols .is-thin b{color:var(--rs-lime-t)}
.rs-p__cols span{position:absolute;left:-2cqi;right:-2cqi;top:100%;margin-top:1.1cqi;text-align:center;font:600 1.3cqi/1 var(--f-inter);color:var(--muted);white-space:nowrap}

/* 04 конкуренти */
.rs-r__l{display:grid;gap:1.2cqi}
.rs-r__l li{display:grid;grid-template-columns:3.4cqi auto minmax(0,1fr);align-items:center;gap:1.1cqi}
.rs-r__l i{display:grid;place-items:center;width:3.4cqi;height:3.4cqi;border-radius:50%;background:linear-gradient(135deg,var(--rs-av1),var(--rs-av2));font:700 1.45cqi/1 var(--f-tight);color:var(--rs-av-t)}
.rs-r__l b{font:700 1.6cqi/1 var(--f-tight);letter-spacing:-.02em;color:var(--ink-strong);white-space:nowrap}
.rs-r__l span{justify-self:start;padding:.55cqi .95cqi;border-radius:1cqi;background:var(--rs-tint);font:600 1.15cqi/1.1 var(--f-inter);color:var(--rs-lime-t);white-space:nowrap}

/* 05 план на місяць (offer-v3: 28 днів, тиждень у рядку, довгі — вт/пт) */
.rs-c__g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.65cqi}
.rs-c__g i{position:relative;display:grid;place-items:center;aspect-ratio:1.2;border-radius:.85cqi;background:var(--rs-track);font:600 1.15cqi/1 var(--f-inter);color:var(--faint);font-variant-numeric:tabular-nums}
.rs-c__g .is-m{background:var(--rs-tint);color:var(--ink-strong);box-shadow:inset 0 0 0 1px var(--rs-lime)}
.rs-c__g .is-m::after{content:"";position:absolute;right:.5cqi;top:.5cqi;width:.75cqi;height:.75cqi;border-radius:50%;background:#3ddc84}
.rs-c__g .is-m3::after{background:#f5c542}
.rs-c__g--w{grid-template-columns:repeat(7,minmax(0,1fr))}
.rs-c__f{margin-top:1.4cqi!important;font:500 1.2cqi/1.2 var(--f-inter);color:var(--muted);white-space:nowrap}

/* телефон: звіт — один файл, відкривається з телефона */
.rs-ph{aspect-ratio:9/19;padding:.85cqi;border-radius:4cqi;background:linear-gradient(155deg,#45474d 0%,#121315 34%,#0b0b0c 70%,#33353a 100%);
  box-shadow:inset 0 0 0 .22cqi rgba(255,255,255,.14),0 3.4cqi 6cqi -2.4cqi rgba(0,0,0,.75),0 1cqi 2cqi -1cqi rgba(0,0,0,.45)}
.rs-ph__s{position:relative;height:100%;overflow:hidden;padding:4cqi 1.5cqi 1.5cqi;border-radius:3.2cqi;background:radial-gradient(ellipse 120% 40% at 30% 0%,var(--rs-tint),transparent 70%),var(--rs-scr)}
.rs-ph__isl{position:absolute;top:1.05cqi;left:50%;width:6cqi;height:1.55cqi;margin-left:-3cqi;border-radius:1cqi;background:#000}
.rs-ph__u{display:flex;align-items:center;gap:.55cqi;padding:.75cqi .9cqi!important;border-radius:1.1cqi;background:var(--rs-track);font:500 1cqi/1 var(--f-inter);color:var(--muted);white-space:nowrap;overflow:hidden}
.rs-ph svg{flex:none;width:1.15cqi;height:1.15cqi}
.rs-ph__lk{display:inline-flex;align-items:center;gap:.5cqi;margin-top:1.5cqi!important;padding:.6cqi .95cqi!important;border-radius:1cqi;background:var(--rs-tint);font:700 1.05cqi/1 var(--f-inter);color:var(--rs-lime-t)}
.rs-ph__h{margin-top:1.3cqi!important;font:700 2.2cqi/1.05 var(--f-tight);letter-spacing:-.035em;color:var(--ink-strong)}
.rs-ph__s2{margin-top:.6cqi!important;font:500 1.15cqi/1 var(--f-inter);color:var(--muted)}
.rs-ph__l{display:grid;gap:.6cqi;margin-top:1.5cqi!important;counter-reset:none}
.rs-ph__l li{display:flex;align-items:center;gap:.8cqi;padding:.95cqi .9cqi;border-radius:1cqi;background:var(--rs-track);font:600 1.1cqi/1.1 var(--f-inter);color:var(--ink);white-space:nowrap}
.rs-ph__l b{font:700 1.1cqi/1 var(--f-tight);color:var(--rs-lime-t)}
.rs-ph__l li i{margin-left:auto;width:.7cqi;height:.7cqi;border-radius:50%;background:var(--rs-lime)}

/* кільце 48 год і чип «10 розділів» */
.rs-ring{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 32% 24%,var(--rs-c1),var(--rs-c2));box-shadow:var(--rs-sh)}
.rs-ring svg{position:absolute;left:7%;top:7%;width:86%;height:86%;transform:rotate(-90deg)}
.rs-ring__t{fill:none;stroke:var(--rs-track);stroke-width:3.2}
.rs-ring__p{fill:none;stroke:var(--rs-lime);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.rs-ring p{position:relative;display:grid;justify-items:center;gap:.3cqi;line-height:1}
.rs-ring b{font:700 3.7cqi/1 var(--f-tight);letter-spacing:-.05em;color:var(--ink-strong)}
.rs-ring span{font:600 1.25cqi/1 var(--f-inter);color:var(--muted)}
.rs-tag{display:inline-flex;align-items:center;gap:1cqi;padding:1.3cqi 2cqi 1.3cqi 1.6cqi!important;border-radius:3cqi;background:linear-gradient(180deg,var(--rs-c1),var(--rs-c2));box-shadow:var(--rs-sh);
  font:700 1.85cqi/1 var(--f-tight);letter-spacing:-.02em;color:var(--ink-strong);white-space:nowrap}
.rs-tag i{width:1.15cqi;height:1.15cqi;border-radius:50%;background:var(--rs-lime);box-shadow:0 0 1.4cqi var(--rs-lime)}

/* вузька сцена (телефон, ширина сцени < 560 px): без картки конкурентів, решта крупніша (scale складається з transform), сцена вища */
@container (max-width:559.98px){
  .rs__in{aspect-ratio:100/106}
  .rs-r{display:none}
  .rs-v{left:0cqi;top:2cqi;width:50cqi;scale:1.1;transform-origin:0 0;--fx:20cqi;--fy:30cqi}
  .rs-ring{left:57cqi;top:0cqi;width:15cqi;--fx:-10cqi;--fy:40cqi}
  .rs-ph{left:71cqi;top:6cqi;width:27cqi;--fx:-24cqi;--fy:20cqi}
  .rs-p{left:12cqi;top:35cqi;width:56cqi;scale:1.08;transform-origin:0 0;--fx:4cqi;--fy:10cqi}
  .rs-c{left:0cqi;top:67cqi;width:38cqi;scale:1.05;transform-origin:0 0;--fx:22cqi;--fy:-14cqi}
  .rs-tag{left:50cqi;top:90cqi;scale:1.25;transform-origin:0 0;--fx:-6cqi;--fy:-30cqi}
}

/* ───── рух ───── */
@keyframes rs-deal{from{opacity:0;transform:translate3d(var(--fx,0),var(--fy,0),0) rotate(0deg) scale(.82)}}
@keyframes rs-grow{from{transform:scaleY(0)}}
@keyframes rs-up{from{opacity:0;transform:translateY(1.2cqi)}}
@keyframes rs-pop{from{opacity:0;transform:scale(.4)}}
@keyframes rs-draw{from{stroke-dashoffset:100}}
@keyframes rs-float{to{translate:0 -1.1cqi}}
@keyframes rs-pulse{50%{opacity:.55}}
.rs:not(.rs--auto):not(.is-in) .rs-el{opacity:0}
.rs.is-in .rs-el,.rs--auto .rs-el{animation:rs-deal 1.05s cubic-bezier(.16,1,.3,1) backwards calc(var(--i) * 85ms + 80ms)}
.rs.is-in .rs-p__cols i,.rs--auto .rs-p__cols i{animation:rs-grow .95s cubic-bezier(.16,1,.3,1) backwards calc(var(--j) * 95ms + 620ms)}
.rs.is-in .rs-p__cols b,.rs--auto .rs-p__cols b{animation:rs-up .6s cubic-bezier(.16,1,.3,1) backwards calc(var(--j) * 95ms + 900ms)}
.rs.is-in .rs-c__g .is-m,.rs--auto .rs-c__g .is-m{animation:rs-pop .5s cubic-bezier(.34,1.56,.64,1) backwards calc(var(--j) * 60ms + 700ms)}
.rs.is-in .rs-ph__l li,.rs--auto .rs-ph__l li{animation:rs-up .55s cubic-bezier(.16,1,.3,1) backwards calc(var(--j) * 70ms + 760ms)}
.rs.is-in .rs-ring__p,.rs--auto .rs-ring__p{animation:rs-draw 1.5s cubic-bezier(.65,0,.35,1) backwards 650ms}
/* петлі: лише поки сцена на екрані (.is-on) і після входу */
.rs.is-in .rs-ph,.rs--auto .rs-ph{animation:rs-deal 1.05s cubic-bezier(.16,1,.3,1) backwards calc(var(--i) * 85ms + 80ms),rs-float 5.2s cubic-bezier(.45,0,.55,1) 1.6s infinite alternate}
.rs.is-in .rs-ring,.rs--auto .rs-ring{animation:rs-deal 1.05s cubic-bezier(.16,1,.3,1) backwards calc(var(--i) * 85ms + 80ms),rs-float 4.4s cubic-bezier(.45,0,.55,1) 2.2s infinite alternate}
.rs.is-in .rs-tag,.rs--auto .rs-tag{animation:rs-deal 1.05s cubic-bezier(.16,1,.3,1) backwards calc(var(--i) * 85ms + 80ms),rs-float 3.8s cubic-bezier(.45,0,.55,1) 1.9s infinite alternate-reverse}
.rs.is-in .is-thin i,.rs--auto .is-thin i{animation:rs-grow .95s cubic-bezier(.16,1,.3,1) backwards calc(var(--j) * 95ms + 620ms),rs-pulse 2.6s cubic-bezier(.45,0,.55,1) 2.4s infinite}
.rs:not(.is-on) .rs-ph,.rs:not(.is-on) .rs-ring,.rs:not(.is-on) .rs-tag,.rs:not(.is-on) .is-thin i{animation-play-state:running,paused}
@media (prefers-reduced-motion:reduce){
  .rs .rs-el,.rs .rs-el *{animation:none!important}
  .rs:not(.rs--auto):not(.is-in) .rs-el{opacity:1}
  .rs__in{transition:none}
}

/* fix-bonus 25.10 · вузька сцена (телефон): менше одночасних анімацій — лише вхід 6 карток (transform/opacity) + ріст 4 стовпчиків;
   без «поп» клітинок календаря, без стаггера списку в телефоні, без малювання кільця (stroke-dashoffset = перемальовка щокадру),
   без нескінченних петель (плавання телефона/кільця/чипа, пульс TikTok). Десктоп — без змін. */
@container (max-width:559.98px){
  .rs.is-in .rs-c__g .is-m,.rs--auto .rs-c__g .is-m,.rs.is-in .rs-ph__l li,.rs--auto .rs-ph__l li,.rs.is-in .rs-p__cols b,.rs--auto .rs-p__cols b,
  .rs.is-in .rs-ring__p,.rs--auto .rs-ring__p{animation:none}
  .rs.is-in .rs-ph,.rs--auto .rs-ph,.rs.is-in .rs-ring,.rs--auto .rs-ring,.rs.is-in .rs-tag,.rs--auto .rs-tag{animation:rs-deal .9s cubic-bezier(.16,1,.3,1) backwards calc(var(--i) * 70ms + 60ms)}
  .rs.is-in .rs-el,.rs--auto .rs-el{animation-duration:.9s;animation-delay:calc(var(--i) * 70ms + 60ms)}
  .rs.is-in .is-thin i,.rs--auto .is-thin i{animation:rs-grow .8s cubic-bezier(.16,1,.3,1) backwards calc(var(--j) * 80ms + 450ms)}
  .rs:not(.is-on) .rs-ph,.rs:not(.is-on) .rs-ring,.rs:not(.is-on) .rs-tag,.rs:not(.is-on) .is-thin i{animation-play-state:running}
}