/* Layout: beige drafting-paper canvas with a faint grid and framing rails; pill header; centered headline with an animated dark slab; CTA + offer in one row; a fan of tilted case cards that deal out on load and lift on hover. Single deliberate light look. */
:root{
  --paper:#f5f0ea;
  --grid:rgba(60,45,30,.03);
  --frame:#cfc6bb;
  --ink:#1d1b19;
  --muted:#6f675e;
  --card:#fbf8f4;
  --card-edge:rgba(29,27,25,.1);
  --yellow:#f6e36a;
  --orange:#e8813a;
  --surface:#ffffff;
  --surface-ink:#1d1b19;
  --hover:#f3eee8;
  --on-accent:#1d1b19;
  --on-orange:#1d1b19;
  --sh:60,45,30;
  --f:"Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cw:clamp(150px,min(calc(19.5 * var(--vw,1vw)),calc(33 * var(--vh,1vh))),320px);
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
button,input,select,textarea{font-family:inherit}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--f);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:12px}

.hero{position:relative;background-color:var(--paper);padding:calc(2.2 * var(--vh,1vh)) 16px calc(2.6 * var(--vh,1vh));overflow:hidden;
  min-height:calc(100 * var(--vh,1vh));min-height:calc(100 * var(--vh,1vh));display:flex;flex-direction:column}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 55%,transparent 96%);mask-image:linear-gradient(to bottom,#000 0,#000 55%,transparent 96%)}
.hero > *{position:relative}
.hero > .rail{position:absolute}
.gap{position:relative;height:clamp(160px,calc(28 * var(--vh,1vh)),300px);background:var(--paper)}
.gap .rail{position:absolute}
.rail{position:absolute;top:0;bottom:0;width:1px;background:var(--frame);pointer-events:none}
.rail.l{left:max(16px,calc(50% - 680px))}
.rail.r{right:max(16px,calc(50% - 680px))}

/* HEADER — как на текущем сайте: логотип, пункты меню, Telegram и WhatsApp */
.nav{position:relative;z-index:20;width:100%;max-width:1040px;margin:0 auto;background:var(--surface);color:var(--surface-ink);border-radius:999px;
  display:flex;align-items:center;gap:24px;padding:8px 8px 8px 26px;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 30px -12px rgba(var(--sh),.18)}
.logo{display:block;color:var(--surface-ink);line-height:0;flex:none}
.logo svg{width:112px;height:auto}
.links{display:flex;gap:4px;margin:0 auto;padding:0;list-style:none}
.links a{display:block;padding:10px 14px;border-radius:999px;font-weight:500;font-size:15px;text-decoration:none;transition:background .2s}
.links a:hover{background:var(--hover)}
.has-badge{position:relative}
.has-badge{padding-right:26px!important}
.badge{position:absolute;top:1px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#2bc84a;color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--surface)}
.badge.in{position:static;display:inline-block;margin-left:6px;vertical-align:2px;box-shadow:none}
.socials{display:flex;gap:8px;flex:none}
.soc{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface-ink);color:var(--surface);text-decoration:none;transition:transform .2s}
.soc:hover{transform:translateY(-2px)}
.burger{display:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--hover);cursor:pointer;place-items:center;flex:none}
.burger i{display:grid;gap:4px}.burger b{display:block;width:18px;height:2px;background:var(--surface-ink);border-radius:2px}
.mnav{position:absolute;left:16px;right:16px;top:calc(100% + 8px);background:var(--surface);color:var(--surface-ink);border-radius:24px;padding:10px;box-shadow:0 20px 40px -16px rgba(var(--sh),.3)}
.mnav a{display:block;padding:14px 16px;font-weight:600;text-decoration:none;border-radius:14px}
.mnav a:hover{background:var(--hover)}

/* HEADLINE */
.head{position:relative;z-index:3;text-align:center;max-width:1100px;margin:calc(5 * var(--vh,1vh)) auto 0;display:grid;justify-items:center;gap:min(22px,calc(2.4 * var(--vh,1vh)))}
.kicker{position:relative;display:inline-block;font-size:16px;color:var(--ink);font-weight:600;margin-bottom:min(18px,calc(2 * var(--vh,1vh)));padding-bottom:4px}
.kicker svg{position:absolute;left:-6%;bottom:-10px;width:112%;height:14px;overflow:visible}
.kicker path{fill:none;stroke:var(--orange);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.anim .kicker path{stroke-dasharray:420;stroke-dashoffset:420;animation:draw .9s var(--ease) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
h1{margin:0;font-weight:800;font-size:clamp(34px,min(calc(6.8 * var(--vw,1vw)),calc(8.8 * var(--vh,1vh))),100px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
/* выделение как на примере: тёмная плашка «прорисовывается» слева направо, текст меняет цвет вслед за ней */
.hl{position:relative;display:inline-block;white-space:nowrap;padding:0 .3em;margin:0 .1em 0 0;transform:rotate(-3deg);transform-origin:50% 60%}
.hl .bg{position:absolute;inset:.02em 0 -.16em;background:var(--ink);border-radius:.16em;transform-origin:0 50%;transform:scaleX(1)}
.hl .tx{position:relative;color:var(--paper)}
.hl .tx2{position:absolute;inset:0;padding:0 .3em;color:var(--ink);clip-path:inset(0 0 0 100%)}
.anim .hl .bg{animation:sweep .7s var(--ease) .35s both}
.anim .hl .tx2{animation:reveal .7s var(--ease) .35s both}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes reveal{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}

.offer{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:min(26px,calc(2.8 * var(--vh,1vh)))}
.btn-y{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:var(--yellow);color:var(--on-accent);border:1px solid var(--card-edge);border-radius:999px;padding:min(16px,calc(1.8 * var(--vh,1vh))) 28px;font:600 17px var(--f);text-decoration:none;transition:transform .2s;flex:none}
.btn-y:hover{transform:translateY(-2px)}
.offer p{margin:0;text-align:left;max-width:380px;font-size:clamp(14px,min(calc(1.3 * var(--vw,1vw)),calc(2 * var(--vh,1vh))),17px);line-height:1.4;color:var(--muted)}
.offer p b{color:var(--ink);font-weight:600}

/* FAN */
.fan{position:relative;z-index:2;flex:1 1 auto;min-height:clamp(190px,min(calc(30 * var(--vw,1vw)),calc(34 * var(--vh,1vh))),420px);width:100%;max-width:1400px;margin:calc(3.4 * var(--vh,1vh)) auto 0}
.slot{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:11/6;
  transform:translate(-50%,-50%) translateX(calc(var(--x) * var(--spread,1))) translateY(var(--y)) rotate(calc(var(--r) * var(--spread,1)));
  transition:transform .55s var(--ease)}
.slot .lift{position:absolute;inset:0;transition:transform .45s var(--ease)}
.slot:hover,.slot:focus-within{z-index:30!important}
.slot:hover .lift,.slot:focus-within .lift{transform:translateY(-14px) scale(1.09)}
/* стартовое состояние до раздачи — все карточки стопкой в центре, как на примере */
.pre .slot{transform:translate(-50%,-50%) translateY(150px) scale(1.12) rotate(-10deg);opacity:0;transition:none}
.deal .slot{transition:transform 1s var(--ease) calc(var(--i) * .09s),opacity .5s ease calc(var(--i) * .09s)}

.card{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--card-edge);
  box-shadow:0 24px 40px -22px rgba(var(--sh),.4);transition:box-shadow .45s var(--ease)}
.slot:hover .card{box-shadow:0 34px 50px -20px rgba(var(--sh),.5)}
.card img,.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
button.card{padding:0;font:inherit;color:inherit;cursor:pointer;background:#151311;border:0;width:100%;height:100%}
.vph{position:absolute;inset:0;background:linear-gradient(135deg,#2a2622,#151311)}
.vph span{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#d8cfc4;font-size:12px;font-weight:500}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.slot:hover .play{transform:translate(-50%,-50%) scale(1.1)}

.s1{--x:-212%;--y:22px;--r:-11deg;--i:0;z-index:1}
.s2{--x:-128%;--y:0px;--r:-7deg;--i:1;z-index:2}
.s3{--x:-43%;--y:-12px;--r:-2.5deg;--i:2;z-index:3}
.s4{--x:43%;--y:-12px;--r:2.5deg;--i:3;z-index:4}
.s5{--x:128%;--y:0px;--r:7deg;--i:4;z-index:5}
.s6{--x:212%;--y:22px;--r:11deg;--i:5;z-index:6}

/* плашки привязаны к карточке: сверху или снизу по центру, выпрыгивают пружиной после раздачи */
.tag{position:absolute;left:50%;z-index:2;background:var(--surface);color:var(--surface-ink);font-weight:600;font-size:15px;padding:9px 17px;border-radius:999px;
  box-shadow:0 8px 20px -10px rgba(var(--sh),.45);white-space:nowrap;pointer-events:none;
  transform:translateX(-50%) rotate(var(--tr,0deg));transition:transform .5s var(--spring) calc(1.05s + var(--i) * .09s),opacity .25s ease calc(1.05s + var(--i) * .09s)}
.tag::after{content:"";position:absolute;left:50%;width:10px;height:10px;margin-left:-5px;background:inherit;transform:rotate(45deg)}
.tag.top{bottom:calc(100% + 12px)}.tag.top::after{bottom:-4px}
.tag.bot{top:calc(100% + 12px)}.tag.bot::after{top:-4px}
.tag.ty{background:var(--orange);color:var(--on-orange)}
.pre .tag{opacity:0;transform:translateX(-50%) scale(.6) rotate(var(--tr,0deg))}
.s1 .tag{--tr:3deg}.s3 .tag{--tr:1deg}.s5 .tag{--tr:-3deg}.s6 .tag{--tr:-6deg}

.stats{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 40px;margin:calc(3.4 * var(--vh,1vh)) auto 0;max-width:900px}
.stat{display:flex;align-items:baseline;gap:10px;font-size:15px;color:var(--muted)}
.stat b{font-weight:800;font-size:clamp(20px,calc(3 * var(--vh,1vh)),28px);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}

/* VIDEO POPUP */
.modal{position:fixed;inset:0;z-index:100;background:rgba(20,18,16,.8);display:grid;place-items:center;padding:16px}
.modal-wrap{position:relative;width:min(1100px,100%)}
.modal-in{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(86 * var(--vh,1vh));background:#000;border-radius:20px;overflow:hidden}
.modal-in video,.modal-in iframe{width:100%;height:100%;border:0;display:block;background:#000}
.modal-close{position:absolute;top:-56px;right:0;width:44px;height:44px;border-radius:50%;border:0;background:var(--yellow);color:var(--on-accent);font:600 22px/1 var(--f);cursor:pointer}
.fallback{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;color:#eee;text-align:center;padding:24px;line-height:1.5}
.fallback a{color:var(--on-accent);background:var(--yellow);padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:600}

@media (max-width:1000px){
  .links,.socials{display:none}
  .burger{display:grid}
  .nav{justify-content:space-between;padding-left:20px}
}
@media (max-width:900px){
  .s1,.s5{display:none}
  .s2{--x:-118%}.s6{--x:118%;--y:0px;--r:7deg}
  :root{--cw:clamp(150px,min(calc(31 * var(--vw,1vw)),calc(30 * var(--vh,1vh))),260px)}
  .offer{flex-direction:column;gap:12px}.offer p{text-align:center}
}
@media (max-width:560px){
  .head{margin-top:44px}
  .kicker{font-size:14px}
  :root{--cw:calc(44 * var(--vw,1vw))}
  .s2{--x:-86%}.s3{--x:-30%}.s4{--x:30%}.s6{--x:86%}
  .tag{font-size:12px;padding:7px 12px}
  .s2 .tag{display:none}
  .vph span{display:none}.play{width:42px;height:42px}
  .fan{min-height:220px}
}
@media (prefers-reduced-motion:reduce){
  .slot,.slot .lift,.tag,.btn-y,.card{transition:none!important}
  .anim .hl .bg,.anim .hl .tx2,.anim .kicker path{animation:none;stroke-dashoffset:0}
}
/* ПАЛИТРЫ: те же роли цветов, другие значения */
:root[data-pal="2"]{ /* Графит и кобальт */
  --paper:#eef1f4;--grid:rgba(20,40,70,.035);--frame:#c4ccd6;--ink:#0f1b2b;--muted:#5d6878;--card:#f8fafc;--card-edge:rgba(15,27,43,.12);
  --yellow:#3d6bff;--on-accent:#ffffff;--orange:#ff5b3a;--on-orange:#ffffff;--surface:#ffffff;--surface-ink:#0f1b2b;--hover:#e7ecf2;--sh:20,40,70}
:root[data-pal="3"]{ /* Ночь и лайм */
  --paper:#141414;--grid:rgba(255,255,255,.035);--frame:#2e2e2e;--ink:#f1eee8;--muted:#9a958d;--card:#1e1e1e;--card-edge:rgba(255,255,255,.1);
  --yellow:#c8f04a;--on-accent:#141414;--orange:#ff6a3d;--on-orange:#141414;--surface:#222222;--surface-ink:#f1eee8;--hover:#2d2d2d;--sh:0,0,0;color-scheme:dark}
:root[data-pal="4"]{ /* Лаванда и малина */
  --paper:#f0ecf7;--grid:rgba(60,30,110,.035);--frame:#cfc5e0;--ink:#1d1430;--muted:#6c6280;--card:#faf8fd;--card-edge:rgba(29,20,48,.1);
  --yellow:#cdb8ff;--on-accent:#1d1430;--orange:#ff4f86;--on-orange:#ffffff;--surface:#ffffff;--surface-ink:#1d1430;--hover:#ece6f6;--sh:60,30,110}
:root[data-pal="5"]{ /* Шалфей и терракота */
  --paper:#e8ebe2;--grid:rgba(30,50,30,.04);--frame:#c3cab9;--ink:#1c261f;--muted:#5f6a60;--card:#f5f6f1;--card-edge:rgba(28,38,31,.12);
  --yellow:#d4572f;--on-accent:#ffffff;--orange:#2f6b4f;--on-orange:#ffffff;--surface:#fbfbf8;--surface-ink:#1c261f;--hover:#eef0e9;--sh:30,50,30}

/* Ночь и лайм: варианты цвета тёмных блоков */
:root[data-pal="3"][data-dk="g"]{--dk:#1d1e21;--dk2:#26272b;--dk3:#303136;--dk-ink:#f1eee8;--dk-muted:#a19c94;--dk-line:rgba(241,238,232,.12)}
:root[data-pal="3"][data-dk="w"]{--dk:#24201c;--dk2:#2e2924;--dk3:#39332c;--dk-ink:#f3eee7;--dk-muted:#a89e92;--dk-line:rgba(243,238,231,.12)}
:root[data-pal="3"][data-dk="s"]{--dk:#1a2026;--dk2:#222930;--dk3:#2c343c;--dk-ink:#eef1f3;--dk-muted:#9aa3ab;--dk-line:rgba(238,241,243,.12)}
:root[data-pal="3"]:not([data-dk]),:root[data-pal="3"][data-dk="t"]{--dk:#0f2427;--dk2:#163033;--dk3:#1e3c40;--dk-ink:#eef4f3;--dk-muted:#93aaa8;--dk-line:rgba(238,244,243,.12)}
/* петроль по умолчанию */
.dks{display:none;flex-direction:column;gap:4px;border-top:1px solid #ece6df;margin-top:4px;padding-top:6px}
:root[data-pal="3"] .dks{display:flex}
.dks span{font-size:10px;font-weight:600;color:#6f675e;padding:0 6px;text-transform:uppercase;letter-spacing:.08em}
.dks button{display:flex;align-items:center;gap:8px;border:0;background:none;font:600 12px var(--f);color:#1d1b19;padding:6px 8px;border-radius:12px;cursor:pointer;text-align:left}
.dks button i{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.dks button[aria-pressed="true"]{background:#f1ece6}
/* Ночь и лайм: светлые карточки команды и подписи клиентов в отзывах */
:root[data-pal="3"] .tm-card,:root[data-pal="3"] .rvH-top{background:#ffffff;color:#161616}
:root[data-pal="3"] .tm-b p,:root[data-pal="3"] .rvH-top .rv-who small{color:#6b655e}
/* переключатель палитр */
.pals{position:fixed;right:12px;top:110px;z-index:90;display:flex;flex-direction:column;align-items:stretch;gap:4px;border-radius:22px!important;
  background:#ffffff;color:#1d1b19;border-radius:999px;padding:6px;box-shadow:0 12px 30px -10px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06);max-width:calc(calc(100 * var(--vw,1vw)) - 32px);overflow-x:auto}
.pals > span{font-size:11px;font-weight:600;padding:4px 8px 2px;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;color:#6f675e}
.pal{display:flex;align-items:center;gap:8px;border:0;background:none;border-radius:999px;padding:6px 12px 6px 6px;font:600 13px var(--f);color:#1d1b19;cursor:pointer;white-space:nowrap}
.pal:hover{background:#f2f2f2}
.pal[aria-pressed="true"]{background:#1d1b19;color:#ffffff}
.sw{display:flex;border-radius:999px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.sw i{display:block;width:12px;height:22px}
.pal b{display:none}.pal{padding:6px;justify-content:center}
.pal:hover b,.pal:focus-visible b{display:block;position:absolute;right:calc(100% + 8px);background:#1d1b19;color:#fff;padding:6px 10px;border-radius:8px;font-size:12px;pointer-events:none}
.pal{position:relative}
@media (max-width:700px){.pals{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));right:50%;transform:translateX(50%);flex-direction:row}.pals > span{display:none}}

/* БЛОК 2 — «Знакомо?»: жёлтый лист поднимается ступенями, как на nithinmwarrier.com */
.sec{position:relative;z-index:5;background-color:var(--yellow);color:var(--on-accent);
  background-image:radial-gradient(color-mix(in srgb,var(--on-accent) 22%,transparent) 1px,transparent 1.3px);background-size:16px 16px;background-attachment:fixed;
  padding:min(110px,calc(12 * var(--vh,1vh))) 16px 0;overflow:visible}
.steps{position:absolute;left:0;right:0;bottom:100%;height:0;pointer-events:none}
.steps i{position:absolute;bottom:0;background:inherit;background-color:var(--yellow);
  background-image:radial-gradient(color-mix(in srgb,var(--on-accent) 22%,transparent) 1px,transparent 1.3px);background-size:16px 16px;background-attachment:fixed}
.steps .p1{left:20%;right:20%;height:calc(var(--s1,1) * 90px)}
.steps .p2{left:40%;right:40%;height:calc(var(--s2,1) * 150px)}
.sec .rail{background:color-mix(in srgb,var(--on-accent) 25%,transparent)}
.wrap{position:relative;z-index:2;max-width:1240px;margin:0 auto}
.pain-h{margin:0 auto;max-width:900px;text-align:center;font-weight:800;font-size:clamp(24px,calc(2.6 * var(--vw,1vw)),38px);line-height:1.08;letter-spacing:-.035em;color:var(--on-accent)}
.pain-h .acc{color:var(--acc-h,color-mix(in srgb,var(--orange) 62%,var(--on-accent)))}

/* плашка «но заявок по-прежнему нет» — как «+ реклама», цвет выбирается */
.sec{--phc:#161616}
.sec[data-ph="orange"]{--phc:#e8722c}.sec[data-ph="blue"]{--phc:#3466f0}.sec[data-ph="violet"]{--phc:#6a3df0}.sec[data-ph="red"]{--phc:#e5262d}
.pain-h .phl{margin-top:0;top:-.03em;transform:rotate(-1.2deg)}
.pain-h .phl .bg{background:var(--phc);transition:background .3s}
.pain-h .phl .tx{color:#fff}
.pain-h .phl .tx2{color:var(--on-accent)}
.phl:not(.go) .bg{transform:scaleX(0)}.phl:not(.go) .tx2{clip-path:inset(0 0 0 0)}
.phl.go .bg{animation:sweep .7s var(--ease) .15s both}.phl.go .tx2{animation:reveal .7s var(--ease) .15s both}
.phsw{margin:0 auto 26px;width:max-content;max-width:100%}
.phsw i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
@media (max-width:520px){.pain-h .phl{white-space:normal}}
:root:not([data-pal]){--acc-h:#d22f27}
:root[data-pal="3"]{--acc-h:#ffffff}
@media (max-width:700px){.pain-h br{display:none}}
.stage{position:relative;height:clamp(440px,calc(62 * var(--vh,1vh)),620px);margin-top:min(40px,calc(4 * var(--vh,1vh)))}
.photo{position:absolute;left:50%;bottom:0;width:clamp(240px,calc(26 * var(--vw,1vw)),380px);aspect-ratio:4/5;transform:translate(-50%,calc(var(--py,0) * 1%));
  border-radius:28px 28px 0 0;background:color-mix(in srgb,var(--on-accent) 9%,var(--yellow));border:2px dashed color-mix(in srgb,var(--on-accent) 35%,transparent);border-bottom:0;
  display:grid;place-items:center;align-content:center;gap:10px;text-align:center;color:var(--on-accent);font-size:14px;font-weight:600;z-index:2}
.photo svg{opacity:.55}
.scribble{position:absolute;left:50%;top:6%;width:min(1000px,92%);transform:translateX(-50%);z-index:1;overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:var(--surface);stroke-width:26;stroke-linecap:round;stroke-linejoin:round;opacity:.95;stroke-dasharray:3200;stroke-dashoffset:calc(3200 * (1 - var(--draw,1)))}
.pill{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;max-width:min(380px,calc(50% - clamp(120px,calc(13 * var(--vw,1vw)),190px) - 24px));background:var(--ink);color:var(--paper);border-radius:999px;padding:14px 22px 14px 14px;
  font-size:clamp(14px,calc(1.05 * var(--vw,1vw)),15px);font-weight:600;line-height:1.25;box-shadow:0 16px 30px -16px rgba(0,0,0,.45);
  transform:rotate(var(--pr,0deg));transition:transform .55s var(--spring),opacity .3s ease}
.pill br.dk{display:inline}
@media (max-width:900px){.pill br.dk{display:none}}
.pill .xx{flex:none;width:30px;height:30px;border-radius:50%;background:var(--orange);color:var(--on-orange);display:grid;place-items:center}
.pill.p1{left:0;top:28%;--pr:-3deg}
.pill.p2{left:3%;top:60%;--pr:2deg}
.pill.p3{right:0;top:22%;--pr:3deg}
.pill.p4{right:3%;top:56%;--pr:-2deg}
@media (min-width:1800px) and (max-width:2000px){html:not(.wide) .pill.p4{right:-3%}}
.wide .pill.p1{left:-9%}.wide .pill.p2{left:-6%}.wide .pill.p3{right:-9%}.wide .pill.p4{right:-6%}.wide .pill{max-width:380px}
.js .sec:not(.on) .pill{opacity:0;transform:translateY(16px) scale(.7) rotate(var(--pr,0deg))}
.js .sec.on .pill:nth-of-type(1){transition-delay:.05s}.js .sec.on .pill:nth-of-type(2){transition-delay:.15s}
.js .sec.on .pill:nth-of-type(3){transition-delay:.25s}.js .sec.on .pill:nth-of-type(4){transition-delay:.35s}
@media (max-width:900px){
  .stage{height:auto;display:flex;flex-direction:column;gap:12px;align-items:center;padding-bottom:0}
  .pill{position:static;max-width:520px;width:100%;--pr:0deg!important;padding:12px 18px 12px 12px}
  .photo{position:relative;left:auto;transform:none;margin-top:24px;width:min(300px,calc(80 * var(--vw,1vw)));order:9}
  .scribble{top:auto;bottom:40px}
  .steps .p1{left:10%;right:10%}.steps .p2{left:32%;right:32%}
}
@media (prefers-reduced-motion:reduce){.pill{transition:none}}


/* «Капля» из частиц: фиксированное число точек одного цвета; лицо — это пустоты, которые точки обтекают */
.blobc{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
@media (max-width:760px){.blobc{display:none}}
/* Пушистый 3D-шарик (Three.js): мех из слоёв-оболочек, глаза и веки — геометрия, брови и рот — в шейдере меха */
.fur{position:absolute;z-index:6;left:0;top:0;width:230px;height:230px;pointer-events:none;will-change:transform}
@media (max-width:760px){.fur{display:none}}
.ball2{--bd:min(600px,calc(32.5 * var(--vw,1vw)));--bc:calc(var(--bd) / .86);position:absolute;left:50%;top:0;bottom:0;width:var(--bc);transform:translateX(-50%);overflow:visible;clip-path:inset(-300vh -150vw 0 -150vw);z-index:4;pointer-events:none}
.ball2 canvas{position:absolute;left:0;top:calc((var(--bd) - var(--bc)) / 2);width:var(--bc);height:var(--bc)}
@media (max-width:900px){.ball2{position:relative;left:auto;transform:none;width:320px;height:300px;order:9;margin-top:16px}.ball2 canvas{width:320px;height:320px}}
/* ===== БЛОК 3 — «Одна система»: тёмный фон, 4 этапа с живыми иллюстрациями, один менеджер ===== */
:root{--dk:#151412;--dk2:#211f1c;--dk3:#2c2925;--dk-ink:#f5f0ea;--dk-muted:#a39a8f;--dk-line:rgba(245,240,234,.12)}
:root[data-pal="2"]{--dk:#0d1726;--dk2:#16233a;--dk3:#1f3050;--dk-ink:#eef1f4;--dk-muted:#93a1b5;--dk-line:rgba(238,241,244,.12)}
:root[data-pal="3"][data-dk="o"]{--dk:#232a14;--dk2:#2d361b;--dk3:#394423;--dk-ink:#f3f6e8;--dk-muted:#a9b38f;--dk-line:rgba(243,246,232,.14)}
:root[data-pal="4"]{--dk:#1b1230;--dk2:#261a42;--dk3:#322355;--dk-ink:#f3eefc;--dk-muted:#a99cc4;--dk-line:rgba(243,238,252,.12)}
:root[data-pal="5"]{--dk:#18221b;--dk2:#212e25;--dk3:#2b3b30;--dk-ink:#eef1ea;--dk-muted:#9aa89c;--dk-line:rgba(238,241,234,.12)}
.sys{position:relative;z-index:6;background:var(--dk);color:var(--dk-ink);padding:clamp(48px,calc(7 * var(--vh,1vh)),80px) 16px clamp(36px,calc(5 * var(--vh,1vh)),56px);min-height:calc(100 * var(--vh,1vh));min-height:calc(100 * var(--vh,1vh));display:flex;flex-direction:column;
}
.sys .rail{background:var(--dk-line)}
.sys::before{content:"";position:absolute;top:0;left:max(16px,calc(50% - 680px));right:max(16px,calc(50% - 680px));height:1px;background:var(--dk-line);z-index:3}
.sys .in{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;flex:1;display:flex;flex-direction:column}
.sys h2{margin:0;font-weight:800;font-size:clamp(24px,calc(2.6 * var(--vw,1vw)),38px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.sys h2 em{font-style:normal;color:var(--yellow)}
.chips3{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips3 span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--dk2);border:1px solid var(--dk-line);font-size:14px;font-weight:500;color:var(--dk-ink)}
.chips3 span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow)}
.vsw{position:absolute;right:0;top:-6px;display:flex;gap:4px;background:var(--dk2);border:1px solid var(--dk-line);border-radius:999px;padding:4px;z-index:5}
.vsw button{border:0;background:none;color:var(--dk-muted);font:600 13px var(--f);padding:8px 14px;border-radius:999px;cursor:pointer}
.vsw button[aria-pressed="true"]{background:var(--yellow);color:var(--on-accent)}
.var{display:none;flex:1}
.var.on{display:flex}

/* карточки этапов */
.st{position:relative;background:var(--dk2);border:1px solid var(--dk-line);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px;overflow:hidden;min-width:0}
.st .n{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--dk-muted)}
.st h3{margin:0;font-size:clamp(16px,calc(1.35 * var(--vw,1vw)),19px);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--dk-ink)}
.st p{margin:0;font-size:13px;line-height:1.4;color:var(--dk-muted)}
.vis{position:relative;flex:1;min-height:110px;border-radius:14px;background:var(--dk3);overflow:hidden}

/* 1. анализ ниши: карточки конкурентов, лупа ходит по ним, столбики растут */
.v1 .cc{position:absolute;bottom:14px;width:22%;height:58%;border-radius:8px;background:rgba(255,255,255,.07);display:flex;align-items:flex-end;gap:3px;padding:6px}
.v1 .cc:nth-child(1){left:8%}.v1 .cc:nth-child(2){left:39%}.v1 .cc:nth-child(3){left:70%}
.v1 .cc i{flex:1;border-radius:2px;background:var(--dk-muted);opacity:.5;animation:bar 3.2s var(--ease) infinite}
.v1 .cc i:nth-child(2){animation-delay:.2s}.v1 .cc i:nth-child(3){animation-delay:.4s}
.v1 .cc:nth-child(2) i{animation-delay:.9s}.v1 .cc:nth-child(3) i{animation-delay:1.7s}
@keyframes bar{0%{height:15%}40%{height:85%}70%{height:55%}100%{height:15%}}
.v1 .lens{position:absolute;top:18%;left:4%;width:58px;height:58px;border-radius:50%;border:3px solid var(--yellow);box-shadow:0 0 0 999px rgba(0,0,0,.18),inset 0 0 0 2px rgba(255,255,255,.15);animation:lens 4.8s var(--ease) infinite}
.v1 .lens::after{content:"";position:absolute;right:-12px;bottom:-12px;width:18px;height:4px;border-radius:2px;background:var(--yellow);transform:rotate(45deg)}
@keyframes lens{0%,8%{transform:translate(0,0)}30%,38%{transform:translate(calc(var(--w,220px)*.33),10px)}60%,68%{transform:translate(calc(var(--w,220px)*.64),0)}92%,100%{transform:translate(0,0)}}

/* 2. копирайтинг и дизайн: заголовок печатается, блоки макета собираются */
.v2{padding:12px}
.v2 .ttl{height:12px;border-radius:3px;background:var(--dk-ink);opacity:.85;width:0;animation:type 4.8s steps(14) infinite}
@keyframes type{0%{width:0}30%,100%{width:78%}}
.v2 .ln{height:6px;border-radius:3px;background:var(--dk-muted);opacity:.45;margin-top:7px;transform-origin:0 50%;animation:grow 4.8s var(--ease) infinite}
.v2 .ln.b{width:60%;animation-delay:.15s}
@keyframes grow{0%,28%{transform:scaleX(0)}42%,100%{transform:scaleX(1)}}
.v2 .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:10px}
.v2 .row i{height:34px;border-radius:6px;background:rgba(255,255,255,.08);transform:scale(.6);opacity:0;animation:pop 4.8s var(--spring) infinite}
.v2 .row i:nth-child(2){animation-delay:.12s}.v2 .row i:nth-child(3){animation-delay:.24s}
@keyframes pop{0%,45%{transform:scale(.6);opacity:0}58%,100%{transform:scale(1);opacity:1}}
.v2 .btn{margin-top:10px;width:42%;height:16px;border-radius:999px;background:var(--yellow);transform:scale(.6);opacity:0;animation:pop2 4.8s var(--spring) infinite}
@keyframes pop2{0%,62%{transform:scale(.6);opacity:0}74%,100%{transform:scale(1);opacity:1}}

/* 3. Директ: запрос печатается в поиске, появляется наше объявление с пометкой «Реклама» */
.v3{padding:12px;display:flex;flex-direction:column;gap:8px}
.v3 .q{display:flex;align-items:center;gap:8px;height:30px;border-radius:999px;background:#fff;color:#1d1b19;padding:0 12px;font-size:12px;font-weight:600;overflow:hidden;white-space:nowrap}
.v3 .q b{display:inline-block;overflow:hidden;width:0;animation:qtype 5s steps(17) infinite;vertical-align:bottom}
@keyframes qtype{0%{width:0}28%,100%{width:13.2ch}}
.v3 .ad{border-radius:10px;background:rgba(255,255,255,.08);padding:8px 10px;transform:translateY(14px);opacity:0;animation:adin 5s var(--ease) infinite}
.v3 .ad.two{opacity:0;animation-delay:.25s}
@keyframes adin{0%,32%{transform:translateY(14px);opacity:0}44%,92%{transform:none;opacity:1}100%{opacity:0}}
.v3 .ad .lb{font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--dk-muted)}
.v3 .ad .t{font-size:12px;font-weight:700;color:var(--yellow);margin:2px 0}
.v3 .ad.two .t{color:var(--dk-muted)}
.v3 .ad i{display:block;height:5px;width:80%;border-radius:3px;background:var(--dk-muted);opacity:.4}

/* 4. ведение и аналитика: график цены заявки падает, счётчик заявок растёт */
.v4 svg{position:absolute;inset:10px 10px 26px 10px;width:calc(100% - 20px);height:calc(100% - 36px);overflow:visible}
.v4 .grid line{stroke:var(--dk-line);stroke-width:1}
.v4 .cpl{fill:none;stroke:var(--yellow);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400;animation:draw4 4.6s var(--ease) infinite}
@keyframes draw4{0%{stroke-dashoffset:400}55%,100%{stroke-dashoffset:0}}
.v4 .dot{fill:var(--orange);opacity:0;animation:dot4 4.6s ease infinite}
@keyframes dot4{0%,50%{opacity:0}58%,100%{opacity:1}}
.v4 .lbl{position:absolute;left:12px;bottom:8px;font-size:11px;font-weight:600;color:var(--dk-muted)}
.v4 .lbl b{color:var(--dk-ink)}
.v4 .cnt{position:absolute;right:12px;top:10px;font-size:11px;font-weight:700;background:var(--orange);color:var(--on-orange);padding:4px 8px;border-radius:999px}

/* 5. один менеджер */
.mgr{position:relative;background:var(--dk2);border:1px solid var(--dk-line);border-radius:22px;padding:18px;display:flex;align-items:center;gap:16px;min-width:0}
.ava{position:relative;flex:none;width:64px;height:64px;border-radius:50%;background:var(--yellow);color:var(--on-accent);display:grid;place-items:center;font-weight:800;font-size:22px;letter-spacing:-.02em}
.ava::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--yellow);opacity:.5;animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.35);opacity:0}}
.mgr .who b{display:block;font-size:17px;font-weight:700}
.mgr .who span{font-size:13px;color:var(--dk-muted)}
.mgr h3{margin:0 0 4px;font-size:clamp(17px,calc(1.4 * var(--vw,1vw)),20px);font-weight:800;letter-spacing:-.015em}
.bub{display:inline-block;margin-top:8px;background:var(--dk3);border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:13px;color:var(--dk-ink);min-height:34px}
.bub .typing i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--dk-muted);margin-right:3px;animation:tdot 1.2s infinite}
.bub .typing i:nth-child(2){animation-delay:.15s}.bub .typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-3px);opacity:1}}

/* --- Вариант A: конвейер — 4 этапа в ряд, нить проходит через все и приходит к менеджеру --- */
.vA{flex-direction:column;gap:14px;margin-top:22px}
.vA .row4{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;flex:1;min-height:0}
.vA .thread{position:absolute;left:4%;right:4%;top:calc(100% + 7px);height:2px;background:var(--dk-line)}
.vA .thread i{position:absolute;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(246,227,106,.2);animation:runA 6s linear infinite}
@keyframes runA{0%{left:0}100%{left:100%}}
.vA .mgr{margin-top:6px}
.vA .mgr .snums{margin-left:auto;display:flex;gap:6px}
.vA .mgr .snums span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--dk3);font-size:12px;font-weight:700;color:var(--dk-muted)}

/* --- Вариант B: бенто — менеджер в центре, этапы вокруг --- */
.vB{display:none;margin-top:22px;grid-template-columns:1fr 1.1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;min-height:0}
.vB.on{display:grid}
.vB .mgr{grid-column:2;grid-row:1/3;flex-direction:column;justify-content:center;text-align:center;padding:24px}
.vB .mgr .ava{width:96px;height:96px;font-size:30px}
.vB .mgr .lines{position:absolute;inset:0;pointer-events:none}
.vB .mgr .lines i{position:absolute;width:44px;height:2px;background:linear-gradient(90deg,var(--yellow),transparent);top:50%}
.vB .st{flex-direction:row;align-items:stretch}
.vB .st .tx{display:flex;flex-direction:column;gap:6px;width:42%;flex:none}
.vB .st .vis{min-height:0}

/* --- Вариант C: путь — слева заголовок и менеджер, справа этапы по вертикали, менеджер «идёт» по ним --- */
.vC{display:none;margin-top:0;gap:36px;min-height:0}
.vC.on{display:grid;grid-template-columns:.9fr 1.3fr;align-items:center;margin-top:0}
.vC .left{display:flex;flex-direction:column;gap:18px;justify-content:center}
.vC .path{position:relative;display:grid;grid-template-rows:repeat(4,1fr);gap:10px;padding-left:44px;height:clamp(540px,calc(calc(100 * var(--vh,1vh)) - 190px),640px)}
.vC .left h2{font-size:clamp(24px,calc(2.6 * var(--vw,1vw)),38px)}
.vC .path::before{content:"";position:absolute;left:15px;top:12px;bottom:12px;width:2px;background:var(--dk-line)}
.vC .walker{position:absolute;left:0;width:32px;height:32px;border-radius:50%;background:var(--yellow);color:var(--on-accent);display:grid;place-items:center;font-weight:800;font-size:11px;box-shadow:0 0 0 2px var(--yellow),0 0 0 6px var(--dk);transition:top .8s var(--ease);top:0}
.vC .st{flex-direction:row;align-items:center;padding:12px 14px;gap:16px;transition:border-color .4s,background .4s}
.vC .st.cur{border-color:var(--yellow)}
.vC .st .tx{flex:1;min-width:0}
.vC .st{min-height:0}
.vC .st .vis{flex:none;width:44%;min-height:0;align-self:stretch}
.ahead{position:relative}
@media (max-width:1000px){
  .vA .row4{grid-template-columns:1fr 1fr}.vA .thread{display:none}
  .vB.on{grid-template-columns:1fr 1fr;grid-template-rows:auto}.vB .mgr{grid-column:1/3;grid-row:auto}
  .vC.on{grid-template-columns:1fr}
  .vsw{position:static;margin:0 0 16px;align-self:flex-start}
  .sys{min-height:0}
}
@media (max-width:600px){.vA .row4,.vB.on{grid-template-columns:1fr}.vB .mgr{grid-column:auto}.vB .st{flex-direction:column}.vB .st .tx{width:auto}.vA .mgr .snums{display:none}.vis{min-height:120px}}
@media (prefers-reduced-motion:reduce){.sys *{animation:none!important}.v2 .ttl{width:78%}.v2 .row i,.v2 .btn,.v3 .ad{opacity:1;transform:none}.v3 .q b{width:13.2ch}.v4 .cpl{stroke-dashoffset:0}.v4 .dot{opacity:1}}

.mgr2{flex-direction:column;align-items:stretch;gap:14px;padding:18px 20px}
.mgr-top{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dk-muted);padding-bottom:14px;border-bottom:1px solid var(--dk-line)}
.mdot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 25%,transparent)}
.mgr-row{display:flex;align-items:center;gap:18px}
.mcol{display:flex;flex-direction:column;gap:10px;min-width:0}
.mgr2 .ava{width:96px;height:96px;font-size:28px;margin:6px 0 6px 6px;background-size:cover;background-position:center}
.mgr2 .who b{font-size:18px;margin-bottom:2px}
.mgr2 .bub{margin-top:0;align-self:flex-start}
.sys h2 em{color:var(--orange)}
.v4 .cnt{background:#2bc84a;color:#fff}

.mdot{background:#2bc84a;box-shadow:none;position:relative}
.mdot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #2bc84a;animation:ring 1.8s ease-out infinite}
.mgr2 .ava::after{display:none}
/* анимация идёт только у этапа, на котором сейчас менеджер; остальные стоят в спокойном итоговом виде */
.vC .st:not(.cur) .vis *,.vC .st:not(.cur) .vis *::after{animation:none!important}
.vC .st:not(.cur) .v2 .ttl{width:78%}
.vC .st:not(.cur) .v2 .row i,.vC .st:not(.cur) .v2 .btn,.vC .st:not(.cur) .v3 .ad{opacity:1;transform:none}
.vC .st:not(.cur) .v3 .q b{width:13.2ch}
.vC .st:not(.cur) .v4 .cpl{stroke-dashoffset:0}
.vC .st:not(.cur) .v4 .dot{opacity:1}
.vC .st:not(.cur) .v1 .cc i{height:45%}.vC .st:not(.cur) .v1 .cc i:nth-child(2){height:70%}
.vC .st:not(.cur) .vis{opacity:.55;transition:opacity .4s}
.vC .st.cur .vis{opacity:1;transition:opacity .4s}

.vC .st .n{display:inline-block;align-self:flex-start;font-size:11px;letter-spacing:.02em;text-transform:none;font-weight:700;color:var(--dk-ink);background:var(--dk3);border:1px solid var(--dk-line);border-radius:999px;padding:3px 9px;margin-bottom:6px}
.vC .st.cur .n{background:var(--yellow);color:var(--on-accent);border-color:transparent}
.vC .st .tx{display:flex;flex-direction:column;align-items:flex-start}
.vC .st h3{margin-bottom:4px}
.st br.dk{display:inline}
@media (max-width:900px){.st br.dk{display:none}}

/* ===== БЛОК 4 — Портфолио: снова бежевый лист в клетку; режимы «С цифрами / Только дизайн»; 4 варианта подачи ===== */
.pf{position:relative;z-index:6;background-color:var(--paper);padding:clamp(56px,calc(8 * var(--vh,1vh)),96px) 16px clamp(56px,calc(8 * var(--vh,1vh)),96px)}
.pf::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 60%);mask-image:linear-gradient(to bottom,#000,transparent 60%)}
.pf-in{position:relative;z-index:2;max-width:1240px;margin:0 auto}
.pf-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.pf-head h2{margin:0;font-weight:800;font-size:clamp(24px,calc(2.6 * var(--vw,1vw)),38px);line-height:1.08;letter-spacing:-.035em}
.pf .k2{position:relative;display:inline-block;font-size:16px;font-weight:600;color:var(--ink);padding-bottom:4px;margin-bottom:22px}
.pf .k2 svg{position:absolute;left:-6%;bottom:-10px;width:112%;height:14px;overflow:visible}
.pf .k2 path{fill:none;stroke:var(--orange);stroke-width:2.6;stroke-linecap:round}
.pf-mode{position:relative;display:inline-flex;background:var(--surface);border-radius:999px;padding:5px;box-shadow:0 0 0 1px var(--card-edge)}
.pf-mode .pill-bg{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--ink);transition:transform .45s var(--ease),width .45s var(--ease);z-index:0}
.pf-mode button{position:relative;z-index:1;border:0;background:none;color:var(--muted);font:600 15px var(--f);padding:12px 20px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .35s}
.pf-mode button[aria-selected="true"]{color:var(--paper)}
.pf-mode .cnt{font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;background:var(--hover);color:var(--ink)}
.pf-mode .cnt{transition:background .35s,color .35s}
.pf-mode button[aria-selected="true"] .cnt{background:#2bc84a;color:#fff}
.pvsw{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:22px 0 26px;padding:6px;border:1px dashed var(--frame);border-radius:16px;width:max-content;max-width:100%}
.pvsw span{font-size:12px;color:var(--muted);padding:0 6px}
.pvsw button{border:0;background:none;color:var(--ink);font:600 13px var(--f);padding:8px 12px;border-radius:10px;cursor:pointer}
.pvsw button[aria-pressed="true"]{background:var(--surface);box-shadow:0 0 0 1px var(--card-edge)}
.pf-mode-des .pvsw,.pf-mode-des .pnum{display:none}
.pv{display:none}.pv.on{display:block}
.ptag{display:inline-block;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--hover);color:var(--ink);margin:0 6px 6px 0}
.plbl{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pp{margin:0 0 10px;font-size:15px;line-height:1.45;color:var(--muted)}
.pp b{color:var(--ink);font-weight:700}
.pres{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pres li{position:relative;padding-left:22px;font-size:15px;line-height:1.4;font-weight:600;color:var(--ink)}
.pres li::before{content:"";position:absolute;left:0;top:.35em;width:12px;height:12px;border-radius:50%;background:#2bc84a;box-shadow:inset 0 0 0 3px color-mix(in srgb,#2bc84a 35%,var(--surface))}
.pmore{display:inline-block;margin-top:14px;font-weight:700;font-size:15px;text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:2px;color:var(--ink)}
.pf img{display:block;width:100%;height:100%;object-fit:cover}
.pf h3{margin:0;font-weight:800;letter-spacing:-.02em;color:var(--ink)}

/* A — карусель по две */
.pa-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 22px)/2);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.pa-track::-webkit-scrollbar{display:none}
.pa-card{scroll-snap-align:start;background:var(--surface);border-radius:26px;overflow:hidden;box-shadow:0 0 0 1px var(--card-edge),0 24px 40px -30px rgba(var(--sh),.5);display:flex;flex-direction:column}
.pa-img{position:relative;aspect-ratio:1000/652;overflow:hidden}
.pa-img img{transition:transform .8s var(--ease)}
.pa-card:hover .pa-img img{transform:scale(1.04)}
.pa-tags{position:absolute;left:14px;top:14px}
.pa-tags .ptag{background:var(--surface);box-shadow:0 4px 10px -4px rgba(0,0,0,.25)}
.pa-body{padding:22px 24px 24px;display:flex;flex-direction:column}
.pa-body h3{font-size:26px;margin-bottom:12px}
.pa-res{margin-top:6px;padding-top:14px;border-top:1px solid var(--card-edge)}
.pa-nav{display:flex;align-items:center;gap:14px;margin-top:20px}
.pa-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--frame);background:var(--surface);color:var(--ink);font:600 18px var(--f);cursor:pointer}
.pa-btn:hover{background:var(--ink);color:var(--paper)}
.pa-bar{flex:1;height:3px;border-radius:3px;background:var(--frame);overflow:hidden}
.pa-bar i{display:block;height:100%;width:50%;background:var(--ink);border-radius:3px;transition:transform .3s var(--ease)}

/* B — сетка 2×2 */
.pvB.on{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pb-card{background:var(--surface);border-radius:26px;overflow:hidden;box-shadow:0 0 0 1px var(--card-edge);display:flex;flex-direction:column}
.pb-img{position:relative;aspect-ratio:16/9;overflow:hidden}
.pb-big{position:absolute;left:16px;bottom:16px;max-width:70%;background:var(--ink);color:var(--paper);border-radius:18px;padding:12px 16px;display:flex;align-items:center;gap:12px;transform:rotate(-2deg)}
.pb-big b{white-space:nowrap;font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--yellow)}
.pb-big span{font-size:13px;line-height:1.3;font-weight:600}
.pb-body{padding:20px 22px 22px}
.pb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pb-head h3{font-size:24px}
.pb-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* C — полосы-аккордеон */
.pvC.on{display:flex;gap:12px;height:min(640px,calc(78 * var(--vh,1vh)))}
.pc-slat{position:relative;flex:1;min-width:0;border-radius:26px;overflow:hidden;background:var(--ink);cursor:pointer;transition:flex .7s var(--ease);outline-offset:3px}
.pc-slat.open{flex:4.2;cursor:default}
.pc-bg{position:absolute;inset:0}
.pc-bg img{filter:saturate(.9);transition:transform .8s var(--ease)}
.pc-slat:not(.open) .pc-bg img{transform:scale(1.15)}
.pc-slat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(10,9,8,.86));pointer-events:none}
.pc-closed{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:20px 16px;color:#fff;transition:opacity .3s}
.pc-slat.open .pc-closed{opacity:0;pointer-events:none}
.pc-num{font-size:13px;font-weight:700;opacity:.8}
.pc-vname{writing-mode:vertical-rl;transform:rotate(180deg);font-size:24px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.pc-vbig{font-size:30px;font-weight:800;color:var(--yellow);letter-spacing:-.03em}
.pc-open{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 28px 28px;color:#fff;opacity:0;transform:translateY(16px);transition:opacity .4s .25s,transform .5s .25s var(--ease);max-width:760px}
.pc-slat.open .pc-open{opacity:1;transform:none}
.pc-open h3{color:#fff;font-size:34px;margin:6px 0 12px}
.pc-open .ptag{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px)}
.pc-open .pp{color:rgba(255,255,255,.78)}.pc-open .pp b{color:#fff}
.pc-open .plbl{color:rgba(255,255,255,.6);margin-top:6px}
.pc-open .pres li{color:#fff}
.pc-open .pres{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 18px}
.pc-open .pmore{color:#fff}

/* D — две колонки со сдвигом */
.pvD.on{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin-top:44px}
.pd-col{display:grid;gap:26px}
.pd-col.r{margin-top:120px}
.pd-card{background:var(--surface);border-radius:28px;padding:14px 14px 24px;box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -36px rgba(var(--sh),.55)}
.pd-img{position:relative;aspect-ratio:1000/652;border-radius:18px;overflow:visible}
.pd-img img{border-radius:18px}
.pd-sticker{position:absolute;right:-10px;top:-16px;background:var(--yellow);color:var(--on-accent);border-radius:20px;padding:12px 16px;font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1;transform:rotate(5deg);box-shadow:0 14px 26px -12px rgba(var(--sh),.6);max-width:220px}
.pd-sticker small{display:block;font-size:12px;font-weight:600;letter-spacing:0;line-height:1.25;margin-top:6px}
.pd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:18px 10px 6px}
.pd-head h3{font-size:26px}
.pd-flow{list-style:none;margin:6px 10px 0;padding:0;counter-reset:fl}
.pd-flow > li{position:relative;padding:0 0 14px 34px;border-left:2px dashed var(--frame);margin-left:10px}
.pd-flow > li:last-child{border-left-color:transparent;padding-bottom:0}
.pd-flow > li::before{counter-increment:fl;content:counter(fl);position:absolute;left:-12px;top:-2px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:11px;font-weight:700;display:grid;place-items:center}
.pd-flow > li.r::before{background:#2bc84a;color:#fff;content:"✓"}
.pd-flow span{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pd-flow p{margin:0;font-size:15px;line-height:1.45;color:var(--ink)}
.pd-card .pmore{margin-left:10px}

/* «Только дизайн» */
.pdes{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:22px;grid-auto-flow:dense}
.pdes-i{margin:0;grid-column:span 4;border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--card-edge),0 26px 40px -34px rgba(var(--sh),.6);position:relative}
.pdes-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.pdes-i::before{content:"";display:block;aspect-ratio:11/6}
.pdes-i:hover img{transform:scale(1.04)}
.pdsw{display:none}.pf-mode-des .pdsw{display:flex}
/* A — ритм 3 · 2 · 3 · 1 */
.pdes[data-dl="A"] .pdes-i:nth-child(4),.pdes[data-dl="A"] .pdes-i:nth-child(5){grid-column:span 6}
.pdes[data-dl="A"] .pdes-i:nth-child(n+6){grid-column:span 3}
/* B — мозаика: крупный экран + два малых столбиком, ряд из трёх, затем зеркально */
.pdes[data-dl="B"] .pdes-i:nth-child(1),.pdes[data-dl="B"] .pdes-i:nth-child(9){grid-column:span 8;grid-row:span 2}
.pdes[data-dl="B"] .pdes-i:nth-child(1)::before,.pdes[data-dl="B"] .pdes-i:nth-child(9)::before{aspect-ratio:auto;height:100%}
.pdes[data-dl="B"] .pdes-i:nth-child(9){grid-column:5 / span 8}
.pdes[data-dl="B"] .pdes-i:nth-child(7),.pdes[data-dl="B"] .pdes-i:nth-child(8){grid-column:1 / span 4}
/* C — лесенка: три колонки, средняя опущена вниз */
.pdes[data-dl="C"]{display:block;columns:3;column-gap:18px;padding-bottom:70px}
.pdes[data-dl="C"] .pdes-i{break-inside:avoid;margin:0 0 18px;display:block}
.pdes[data-dl="C"] .pdes-i:nth-child(n+4):nth-child(-n+6){transform:translateY(70px)}
.pdes figcaption{padding:12px 16px;font-weight:700;font-size:15px}
/* портфолио — дополнительные варианты подачи «С цифрами» (каждая карточка целиком влезает в экран) */
.pe-steps{margin:0;display:grid;gap:10px}
.pe-steps div{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:baseline}
.pe-steps dt,.pe-lbl,.pg-line span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pe-steps dd{margin:0;font-size:15px;line-height:1.45;color:var(--ink)}
.pe-res{margin-top:16px;padding:16px 18px;border-radius:18px;background:color-mix(in srgb,#2bc84a 9%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,#2bc84a 30%,transparent)}
.pe-lbl{display:block;margin-bottom:10px;color:#1f9a39}
/* E — горизонтальные карточки */
.pvE.on{display:grid;gap:26px;margin-top:26px}
.pe-card{display:grid;grid-template-columns:1.12fr 1fr;gap:34px;align-items:center;background:var(--surface);border-radius:28px;padding:14px 34px 14px 14px;box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -36px rgba(var(--sh),.55)}
.pe-card.rev{grid-template-columns:1fr 1.12fr;padding:14px 14px 14px 34px}.pe-card.rev .pe-img{order:2}
.pe-img{position:relative;aspect-ratio:1000/652;border-radius:18px}.pe-img img{border-radius:18px}
.pe-card.rev .pd-sticker{right:auto;left:-10px;transform:rotate(-4deg)}
.pe-body{padding:16px 0}
.pe-top{margin-bottom:18px}.pe-body .pd-flow{margin:0}.pe-body .pmore{margin-left:10px}.pe-top h3{font-size:26px;margin-bottom:10px}
/* F — витрина: вкладки с цифрами и одна большая карточка */
.pvF.on{display:block;margin-top:26px}
.pfx-tabs{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin-bottom:18px}
.pfx-tab{flex:1 1 180px;text-align:left;border:0;cursor:pointer;background:var(--surface);color:var(--ink);border-radius:18px;padding:12px 16px;box-shadow:0 0 0 1px var(--card-edge);font:inherit;display:grid;gap:2px;transition:background .3s,color .3s,transform .3s}
.pfx-tab b{font-size:24px;font-weight:800;letter-spacing:-.04em;line-height:1}
.pfx-tab span{font-size:13px;font-weight:600;color:var(--muted)}
.pfx-tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}.pfx-tab[aria-selected="true"] span{color:color-mix(in srgb,var(--paper) 70%,transparent)}
.pfx-tab[aria-selected="true"] b{color:var(--yellow)}
.pfx-nav{display:flex;gap:8px;align-items:center}
.pfx-stage{position:relative;display:grid}
.pfx-slide{grid-area:1/1;display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center;background:var(--surface);border-radius:28px;padding:14px 34px 14px 14px;box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -36px rgba(var(--sh),.55);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .5s,transform .6s var(--ease),visibility .5s}
.pfx-slide.on{opacity:1;visibility:visible;transform:none}
.pfx-img{aspect-ratio:1000/652;border-radius:18px;overflow:hidden}
.pfx-big{font-size:clamp(44px,calc(4.4 * var(--vw,1vw)),64px);font-weight:800;letter-spacing:-.05em;line-height:.95;margin-bottom:14px}
.pfx-big small{display:block;font-size:14px;letter-spacing:0;font-weight:600;color:var(--muted);margin-top:8px;max-width:30ch;line-height:1.35}
.pfx-body h3{font-size:24px;margin-bottom:8px}.pfx-body .pe-steps{margin-top:12px}
/* G — компактная сетка 2×2, результат раскрывается */
.pvG.on{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px;align-items:start}
.pg-card{background:var(--surface);border-radius:28px;padding:14px 14px 20px;box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -36px rgba(var(--sh),.55)}
.pg-img{position:relative;aspect-ratio:16/9;border-radius:18px}.pg-img img{border-radius:18px;object-position:top}
.pg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:16px 8px 8px}.pg-head h3{font-size:24px}
.pg-line{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:6px 8px;align-items:baseline}
.pg-line p{margin:0;font-size:15px;line-height:1.45}
.pg-more{margin:10px 8px 0;border-radius:16px;background:color-mix(in srgb,#2bc84a 9%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,#2bc84a 30%,transparent);padding:0 16px}
.pg-more summary{cursor:pointer;list-style:none;padding:13px 0;font-weight:700;color:#1f9a39;display:flex;justify-content:space-between}
.pg-more summary::-webkit-details-marker{display:none}
.pg-more summary::after{content:"+";font-size:20px;line-height:1;transition:transform .3s}.pg-more[open] summary::after{transform:rotate(45deg)}
.pg-more .pres{padding-bottom:14px}.pg-more .pmore{margin:0 0 14px}
@media (max-width:1000px){
  .pe-card,.pe-card.rev,.pfx-slide{grid-template-columns:1fr;padding:14px 14px 20px}.pe-card.rev .pe-img{order:0}.pe-body{padding:6px 8px 0}
  .pvG.on{grid-template-columns:1fr}.pe-steps div{grid-template-columns:1fr;gap:4px}.pfx-nav{display:none}
}
.pf-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px}
/* портфолио: горизонтальные карточки складываются стопкой при прокрутке, показ по 4 */
.pvE.on{display:block;margin-top:26px}
.pvE .pe-card{position:sticky;top:calc(28px + var(--i) * 18px);margin-bottom:34px;transform-origin:50% 0;transition:filter .3s}
.pvE .pe-card:last-child{margin-bottom:0}
.pvE .pe-card[hidden]{display:none}
.pf-cta{justify-content:center}
.pf-more{border:1px solid var(--frame);background:transparent;color:var(--ink);border-radius:999px;padding:min(16px,calc(1.8 * var(--vh,1vh))) 28px;font:600 17px var(--f);cursor:pointer;transition:background .3s,opacity .3s}
.pf-more:hover:not(:disabled){background:var(--surface)}
.pf-more:disabled{opacity:.45;cursor:default}
@media (max-width:1000px){.pvE .pe-card{position:relative;top:auto;margin-bottom:22px}}
.pf-all{font-weight:700;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px}

@media (max-width:900px){
  .pa-track{grid-auto-columns:88%}
  .pvB.on,.pvD.on{grid-template-columns:1fr}.pd-col.r{margin-top:0}
  .pb-cols{grid-template-columns:1fr}
  .pvC.on{flex-direction:column;height:auto}.pc-slat{min-height:90px}.pc-slat.open{min-height:620px}.pc-vname{writing-mode:horizontal-tb;transform:none}
  .pc-closed{flex-direction:row;align-items:center}
  .pdes{grid-template-columns:1fr 1fr}.pdes .pdes-i{grid-column:auto!important;grid-row:auto!important}.pdes .pdes-i::before{aspect-ratio:11/6!important;height:auto!important}.pdes .pdes-i:nth-child(3n+1){grid-column:1 / -1!important}
}

/* ===== БЛОК 5 — Квиз: тёмный фон, пошагово; подсказки говорит пушистый маскот ===== */
.qzs{position:relative;z-index:6;background:var(--dk);color:var(--dk-ink);padding:clamp(56px,calc(8 * var(--vh,1vh)),96px) 16px}
.qzs .rail{background:var(--dk-line)}
.qzs::before{content:"";position:absolute;top:0;left:max(16px,calc(50% - 680px));right:max(16px,calc(50% - 680px));height:1px;background:var(--dk-line)}
.qz-head{margin-bottom:28px}
.qzs .qz-head h2{max-width:none}
.qz-in{position:relative;z-index:2;max-width:1240px;margin:0 auto}
.qz-head h2{margin:0;font-weight:800;font-size:clamp(24px,calc(2.6 * var(--vw,1vw)),38px);line-height:1.08;letter-spacing:-.035em;max-width:820px;text-wrap:balance}
.qz-head h2 em{font-style:normal;color:var(--orange)}
.qz-head p{margin:12px 0 0;color:var(--dk-muted);font-size:17px;max-width:none}
.qz-head br.dk{display:inline}@media (max-width:700px){.qz-head br.dk{display:none}}
.qvsw{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:22px 0 24px;padding:6px;border:1px dashed var(--frame);border-radius:16px;width:max-content;max-width:100%}
.qvsw span{font-size:12px;color:var(--muted);padding:0 6px}
.qvsw button{border:0;background:none;color:var(--ink);font:600 13px var(--f);padding:8px 12px;border-radius:10px;cursor:pointer}
.qvsw button[aria-pressed="true"]{background:var(--surface);box-shadow:0 0 0 1px var(--card-edge)}
.qz{display:none}
.qs[hidden]{display:none}
.qs{animation:qin .45s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.qq{margin:0 0 18px;font-weight:800;font-size:clamp(22px,calc(2 * var(--vw,1vw)),30px);letter-spacing:-.025em;line-height:1.15}
.qsub{margin:-8px 0 18px;font-size:15px;opacity:.7}
.qopts{display:grid;gap:10px}
.qo{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;cursor:pointer;transition:background .2s,box-shadow .2s,transform .2s}
.qo input,.qm input{position:absolute;opacity:0;pointer-events:none}
.qo .qt{flex:1;font-weight:600;font-size:16px}
.qo .qc{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;opacity:.35}
.qo:has(input:checked) .qc{opacity:1;background:var(--yellow);box-shadow:inset 0 0 0 6px var(--yellow),inset 0 0 0 11px var(--on-accent)}
.qo:hover{transform:translateX(3px)}
.qo:has(input:focus-visible){outline:2px solid var(--yellow);outline-offset:2px}
.qi{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.qi svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qn{font-weight:800;font-size:15px}
.qf{display:block;margin-bottom:16px}
.qf input{width:100%;padding:16px 18px;border-radius:16px;border:0;font:500 16px var(--f);outline:none}
.qfl{display:block;font-size:13px;font-weight:700;margin-bottom:8px;opacity:.7}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.qmsg{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.qm span{display:inline-block;padding:10px 16px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer}
.qcons{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.45;opacity:.75}
.qcons a{color:inherit}
.qcons input{margin-top:2px;accent-color:var(--yellow)}
.qnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}
.qback{border:0;background:none;font:600 15px var(--f);cursor:pointer;color:inherit;opacity:.7;padding:10px 0}
.qback[hidden]{visibility:hidden;display:block}
.qnext{border:0;cursor:pointer}
.qnext:disabled{opacity:.4;cursor:not-allowed;transform:none}
.qdone{text-align:center;padding:30px 0}
.qok{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:#2bc84a;color:#fff;font-size:34px;font-weight:800;display:grid;place-items:center}
.qz-ball{position:relative;width:200px;height:200px;flex:none}
.qz-ball canvas{width:100%!important;height:100%!important;display:block}
.bub-fx{transition:opacity .55s ease .12s,transform .7s cubic-bezier(.22,1,.36,1) .12s,min-height .35s ease;transform-origin:50% 100%}
.bub-fx.bub-off{opacity:0!important;transform:translateY(14px) scale(.97)!important;pointer-events:none;transition:opacity .25s ease,transform .3s ease,min-height .35s ease}
.qsay{position:relative;background:var(--surface);color:var(--surface-ink);border-radius:20px;padding:14px 16px;font-size:14px;line-height:1.45;font-weight:500;box-shadow:0 18px 30px -18px rgba(0,0,0,.6);min-height:64px}
.qsay::before{content:"";position:absolute;width:14px;height:14px;background:inherit;transform:rotate(45deg)}
.qsay .pn,.fq-bub .pn{letter-spacing:-.1em;margin-left:.24em}
.qsay .caret{display:inline-block;width:2px;height:15px;background:currentColor;margin-left:2px;vertical-align:-2px;animation:caret .8s steps(1) infinite}

/* A — диалог: маскот слева со «словами», вопрос справа в светлой карточке */
.qzA.on{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:center}
.qa-side{display:flex;flex-direction:column;align-items:center;gap:6px}
.qa-side .qsay::before{left:50%;bottom:-6px;margin-left:-7px}
.qa-side .qsay{width:100%}
.qa-card{background:var(--surface);color:var(--surface-ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);border-radius:30px;padding:28px 32px 26px;min-height:470px;display:flex;flex-direction:column}
.qa-card .qnav{margin-top:auto;padding-top:24px}
.qa-top{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.qcount{font-size:14px;color:var(--muted)}.qcount b{color:var(--surface-ink)}
.qbar{flex:1;height:6px;border-radius:6px;background:var(--hover);overflow:hidden}
.qbar i{display:block;height:100%;width:25%;background:var(--orange);border-radius:6px;transition:width .5s var(--ease)}
.qzA .qo{background:var(--hover)}
.qzA .qo:has(input:checked){background:var(--surface);box-shadow:0 0 0 2px var(--surface-ink)}
.qzA .qf input{background:var(--hover);color:var(--surface-ink)}
.qzA .qm span{background:var(--hover)}
.qzA .qm input:checked+span{background:var(--surface-ink);color:var(--surface)}

/* B — карточка: этапы сверху, маскот сидит на краю карточки и подглядывает */
.qzB.on{display:block}
.qb-steps{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;counter-reset:qb}
.qb-steps li{counter-increment:qb;padding-top:12px;border-top:3px solid var(--frame);font-size:14px;font-weight:600;color:var(--muted);transition:border-color .4s,color .4s}
.qb-steps li::before{content:"0" counter(qb) " ";color:var(--muted);font-weight:700;margin-right:4px}
.qb-steps li.done{border-color:var(--orange);color:var(--ink)}
.qb-steps li.cur{border-color:var(--ink);color:var(--ink)}
.qb-card{position:relative;color:var(--dk-ink);background:var(--dk2);border:1px solid var(--dk-line);border-radius:30px;padding:40px 40px 32px;display:grid;grid-template-columns:1fr 290px;gap:28px;margin-top:120px}
.qb-mascot{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;margin-top:-140px}
.qb-mascot .qsay::before{left:50%;top:-6px;margin-left:-7px}
.qb-body{grid-column:1;grid-row:1}
.qzB .qopts{grid-template-columns:1fr 1fr}
.qzB .qo{background:var(--dk3);flex-direction:column;align-items:flex-start;padding:18px;min-height:128px}
.qzB .qo .qc{position:absolute;right:16px;top:16px}
.qzB .qi{background:rgba(255,255,255,.07);color:var(--yellow)}
.qzB .qo:has(input:checked){background:var(--yellow);color:var(--on-accent)}
.qzB .qo:has(input:checked) .qi{background:rgba(0,0,0,.1);color:var(--on-accent)}
.qzB .qo:has(input:checked) .qc{background:var(--on-accent);box-shadow:inset 0 0 0 6px var(--on-accent),inset 0 0 0 11px var(--yellow)}
.qzB .qf input{background:var(--dk3);color:var(--dk-ink);box-shadow:inset 0 0 0 1px var(--dk-line)}
.qzB .qm span{background:var(--dk3)}
.qzB .qm input:checked+span{background:var(--yellow);color:var(--on-accent)}

/* C — панель: слева тёмный столбик с крупным номером шага и маскотом, справа большие плитки ответов */
.qzC.on{display:grid;grid-template-columns:340px 1fr;border-radius:30px;overflow:hidden;box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -36px rgba(var(--sh),.5);background:var(--surface);color:var(--surface-ink);min-height:540px}
.qc-side{background:var(--dk2);color:var(--dk-ink);padding:28px;display:flex;flex-direction:column;gap:18px;border-right:1px solid var(--dk-line)}
.qc-big{display:flex;align-items:baseline;gap:6px}
.qc-big b{font-size:84px;font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--yellow)}
.qc-big span{font-size:22px;font-weight:700;color:var(--dk-muted)}
.qc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qc-list li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--dk-muted)}
.qc-list li::before{content:"";width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--dk-muted)}
.qc-list li.done{color:var(--dk-ink)}.qc-list li.done::before{background:#2bc84a;box-shadow:none}
.qc-list li.cur{color:var(--dk-ink)}.qc-list li.cur::before{background:var(--yellow);box-shadow:0 0 0 4px rgba(246,227,106,.2)}
.qc-mascot{margin-top:auto;display:flex;align-items:flex-end;gap:0;flex-direction:column}
.qc-mascot .qz-ball{width:150px;height:150px;align-self:flex-start;margin:-10px 0 -6px -8px}
.qc-mascot .qsay{order:-1;font-size:13px}
.qc-mascot .qsay::before{left:40px;bottom:-6px}
.qc-main{padding:40px 44px 32px;display:flex;flex-direction:column}
.qc-main .qnav{margin-top:auto;padding-top:24px}
.qzC .qopts{grid-template-columns:1fr 1fr;gap:14px}
.qzC .qo{background:var(--surface);box-shadow:0 0 0 1px var(--card-edge);flex-direction:row;padding:20px;min-height:96px}
.qzC .qi{background:var(--hover);color:var(--surface-ink)}
.qzC .qo:has(input:checked){box-shadow:0 0 0 2px var(--orange);background:color-mix(in srgb,var(--orange) 8%,var(--surface))}
.qzC .qo:has(input:checked) .qi{background:var(--orange);color:var(--on-orange)}
.qzC .qo:has(input:checked) .qc{background:var(--orange);box-shadow:inset 0 0 0 6px var(--orange),inset 0 0 0 11px var(--surface)}
.qzC .qf input{background:var(--hover);color:var(--surface-ink);font-size:18px;padding:20px}
.qzC .qm span{background:var(--hover)}
.qzC .qm input:checked+span{background:var(--orange);color:var(--on-orange)}

@media (max-width:900px){
  .qzA.on,.qzC.on{grid-template-columns:1fr}
  .qa-side{flex-direction:row}.qa-side .qz-ball{width:120px;height:120px}.qa-side .qsay::before{left:-6px;top:24px;margin:0}
  .qb-card{grid-template-columns:1fr;padding:24px}.qb-mascot{grid-column:1;flex-direction:row;margin-top:-90px}.qb-mascot .qz-ball{width:130px;height:130px}.qb-body{grid-row:2}
  .qzB .qopts,.qzC .qopts{grid-template-columns:1fr}
  .qc-big b{font-size:56px}.qc-list{display:none}
  .qb-steps li{font-size:0}.qb-steps li::before{font-size:13px}
}

.qrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.qrow{grid-template-columns:1fr}}
.qerr{display:block;font-size:12px;color:#d22f27;margin-top:6px;visibility:hidden}
.qf.bad input{box-shadow:inset 0 0 0 2px #d22f27}
.qf.bad .qerr{visibility:visible}
/* ===== БЛОК 6 — Этапы: тёмный, въезжает ступенями как блок 2; у каждого этапа своя анимация-слот под картинку ===== */
.wk{position:relative;z-index:6;background:var(--dk);color:var(--dk-ink);padding:clamp(64px,calc(9 * var(--vh,1vh)),110px) 16px clamp(56px,calc(8 * var(--vh,1vh)),96px)}
.wk .rail{background:var(--dk-line)}
.wsteps i{background:var(--dk)!important;background-image:none!important}
.wk::before{content:"";position:absolute;top:0;left:max(16px,calc(50% - 680px));right:max(16px,calc(50% - 680px));height:1px;background:var(--dk-line);z-index:3}
.wk-in{position:relative;z-index:2;max-width:1240px;margin:0 auto}
.wk-h{margin:0;font-weight:800;font-size:clamp(24px,calc(2.6 * var(--vw,1vw)),38px);line-height:1.08;letter-spacing:-.035em}
.wk-h span{color:var(--orange)}
.wk-sub{margin:14px 0 0;color:var(--dk-muted);font-size:17px}
.wvsw{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 28px;padding:6px;border:1px dashed var(--dk-line);border-radius:16px;width:max-content;max-width:100%}
.wvsw span{font-size:12px;color:var(--dk-muted);padding:0 6px}
.wvsw button{border:0;background:none;color:var(--dk-ink);font:600 13px var(--f);padding:8px 12px;border-radius:10px;cursor:pointer}
.wvsw button[aria-pressed="true"]{background:var(--dk3)}
.wkv{display:none}
.wn{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--dk-muted)}
.wk h3{margin:0;font-size:clamp(18px,calc(1.5 * var(--vw,1vw)),22px);font-weight:700;letter-spacing:-.015em;color:var(--dk-ink)}
.wk p{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--dk-muted)}

/* слот: анимация по умолчанию, позже сюда встаёт картинка */
.wslot{position:relative;border-radius:18px;background:var(--dk3);overflow:hidden;aspect-ratio:4/3}
.wslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wv{position:absolute;left:50%;top:50%;width:300px;height:225px;transform:translate(-50%,-50%) scale(var(--sc,1));display:grid;place-items:center}
/* неактивный этап: анимация стоит, показан итоговый кадр */
.paused .wv *,.paused .wv *::before,.paused .wv *::after{animation:none!important}
.paused .wv-copy .h{width:100%}.paused .wv-copy mark{background-size:100% 100%}
.paused .wv-copy .ok,.paused .wv-design i,.paused .wv-ads .kw span,.paused .wv-ads .ad,.paused .wv-launch .nt{opacity:1;transform:none}
.paused .wv-call .wave i{height:40%}.paused .wv-call .wave i:nth-child(3n){height:80%}
/* 1 созвон */
.wv-call{grid-template-rows:1fr auto auto;padding:14% 10% 10%;gap:10px}
.wv-call .ph{position:relative;width:64px;height:64px;border-radius:50%;background:#2bc84a;display:grid;place-items:center;animation:shake 2.4s ease-in-out infinite}
.wv-call .ph svg{width:30px;height:30px;fill:#fff}
.wv-call .ring{position:absolute;inset:0;border-radius:50%;border:2px solid #2bc84a;animation:ring 2.4s ease-out infinite}
.wv-call .ring.r2{animation-delay:.6s}
@keyframes shake{0%,60%,100%{transform:rotate(0)}64%{transform:rotate(-12deg)}68%{transform:rotate(12deg)}72%{transform:rotate(-8deg)}76%{transform:rotate(8deg)}80%{transform:rotate(0)}}
.wv-call .wave{display:flex;gap:4px;align-items:center;height:34px}
.wv-call .wave i{width:4px;border-radius:2px;background:var(--yellow);height:20%;animation:wave 1.1s ease-in-out infinite}
.wv-call .wave i:nth-child(odd){animation-delay:.2s}.wv-call .wave i:nth-child(3n){animation-delay:.4s}.wv-call .wave i:nth-child(4n){animation-delay:.1s}
@keyframes wave{0%,100%{height:15%}50%{height:100%}}
.wv-call .tm{font-weight:700;font-size:15px;color:var(--dk-muted);font-variant-numeric:tabular-nums}.wv-call .tm b{color:var(--dk-ink)}
/* 2 копирайтинг */
.wv-copy .doc{width:78%;background:#fff;color:#1d1b19;border-radius:12px;padding:14px 16px;box-shadow:0 18px 30px -16px rgba(0,0,0,.6)}
.wv-copy .h{font-weight:800;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;width:0;animation:typew 4.4s steps(28) infinite}
@keyframes typew{0%{width:0}35%,100%{width:100%}}
.wv-copy mark{background:linear-gradient(transparent 55%,var(--yellow) 55%) no-repeat 0 0/0 100%;color:inherit;animation:hl 4.4s ease infinite}
@keyframes hl{0%,40%{background-size:0 100%}55%,100%{background-size:100% 100%}}
.wv-copy .doc i{display:block;height:6px;border-radius:3px;background:#d9d4cc;margin-top:8px}
.wv-copy .doc i.s{width:70%}
.wv-copy .ok{margin-top:10px;display:inline-block;font-size:11px;font-weight:700;color:#fff;background:#2bc84a;border-radius:999px;padding:4px 9px;opacity:0;transform:scale(.6);animation:okp 4.4s var(--spring) infinite}
@keyframes okp{0%,62%{opacity:0;transform:scale(.6)}72%,100%{opacity:1;transform:none}}
/* 3 дизайн */
.wv-design{grid-auto-flow:column;gap:10px;align-items:end;padding:10%}
.wv-design .lap{width:150px;height:96px;border-radius:8px;background:#fff;padding:8px;display:grid;gap:5px;grid-template-rows:8px 1fr 14px}
.wv-design .mob{width:44px;height:84px;border-radius:9px;background:#fff;padding:5px;display:grid;gap:4px;grid-template-rows:6px 1fr 1fr 10px}
.wv-design b{border-radius:3px;background:#1d1b19}
.wv-design i{border-radius:4px;background:#e7e2da;transform:scale(.4);opacity:0;animation:blk 4s var(--spring) infinite}
.wv-design .lap .a{animation-delay:.1s}.wv-design .lap .b{background:#cfc8bd;animation-delay:.35s}.wv-design .lap .c{background:var(--yellow);width:45%;animation-delay:.6s}
.wv-design .mob i{animation-delay:1s}.wv-design .mob i:nth-child(3){animation-delay:1.2s}.wv-design .mob .k{background:var(--yellow);animation-delay:1.4s}
@keyframes blk{0%,8%{transform:scale(.4);opacity:0}22%,100%{transform:none;opacity:1}}
/* 4 реклама */
.wv-ads{grid-template-rows:1fr auto;padding:9%;gap:10px}
.wv-ads .kw{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-content:center}
.wv-ads .kw span{font-size:11px;font-weight:600;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--dk-ink);opacity:0;transform:translateY(8px);animation:kwi 4.6s ease infinite}
.wv-ads .kw span:nth-child(2){animation-delay:.2s}.wv-ads .kw span:nth-child(3){animation-delay:.4s}.wv-ads .kw span:nth-child(4){animation-delay:.6s}.wv-ads .kw span:nth-child(5){animation-delay:.8s}
@keyframes kwi{0%{opacity:0;transform:translateY(8px)}12%,100%{opacity:1;transform:none}}
.wv-ads .ad{width:100%;background:#fff;color:#1d1b19;border-radius:10px;padding:9px 11px;opacity:0;transform:translateY(12px);animation:adi 4.6s var(--ease) infinite}
@keyframes adi{0%,40%{opacity:0;transform:translateY(12px)}52%,100%{opacity:1;transform:none}}
.wv-ads .ad small{font-size:9px;font-weight:700;color:#8a837a;letter-spacing:.06em;text-transform:uppercase}
.wv-ads .ad b{display:block;font-size:12px;color:#d06b1e;margin:2px 0 5px}
.wv-ads .ad i{display:block;height:5px;width:80%;border-radius:3px;background:#e2ddd5}
/* 5 запуск */
.wv-launch{align-content:center;gap:8px;padding:10%}
.wv-launch .nt{display:flex;align-items:center;gap:8px;background:#fff;color:#1d1b19;border-radius:12px;padding:9px 12px;font-size:13px;font-weight:700;width:180px;opacity:0;transform:translateX(30px);animation:nti 4.8s var(--spring) infinite}
.wv-launch .nt span{color:#2bc84a}
.wv-launch .n2{animation-delay:.5s;margin-left:16px}.wv-launch .n3{animation-delay:1s;margin-left:32px}
@keyframes nti{0%,6%{opacity:0;transform:translateX(30px)}18%,88%{opacity:1;transform:none}100%{opacity:0}}
.wv-launch .cpl{font-size:13px;font-weight:600;color:var(--dk-muted);margin-top:6px}
.wv-launch .cpl b{color:#2bc84a;display:inline-block;animation:dn 1.4s ease-in-out infinite}
@keyframes dn{50%{transform:translateY(4px)}}

/* A — сцена: слева заголовок и большая сцена, справа список; активный этап меняется по очереди */
.wkA.on{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.wa-stage{position:relative;margin-top:28px;aspect-ratio:4/3;max-width:520px}
.wa-vis{position:absolute;inset:0;opacity:0;transform:scale(.96);transition:opacity .5s,transform .6s var(--ease)}
.wa-vis.cur{opacity:1;transform:none}
.wa-vis .wslot{position:absolute;inset:0;aspect-ratio:auto}
.wa-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wa-it{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:20px;border:1px solid var(--dk-line);cursor:pointer;transition:background .3s,border-color .3s}
.wa-it .wn{margin-top:4px}
.wa-it.cur{background:var(--dk2);border-color:var(--yellow)}
.wa-it.cur .wn{color:var(--yellow)}
.wa-it:not(.cur) p{display:none}
/* B — лента: пять карточек в ряд и линия времени от «1 час» до «2–3 недели» */
.wkB.on{display:block}
.wb-line{display:flex;align-items:center;gap:14px;margin:30px 0 18px;font-weight:700;font-size:14px}
.wb-l{color:var(--yellow)}.wb-r{color:#2bc84a}
.wb-track{flex:1;height:2px;background:var(--dk-line);position:relative}
.wb-track i{position:absolute;left:0;top:0;bottom:0;width:var(--wp,20%);background:linear-gradient(90deg,var(--yellow),#2bc84a);transition:width .6s var(--ease)}
.wb-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.wb-card{background:var(--dk2);border:1px solid var(--dk-line);border-radius:22px;padding:12px 12px 18px;display:flex;flex-direction:column;gap:8px;transition:border-color .3s,transform .4s var(--ease)}
.wb-card .wn{margin-top:6px;padding:0 4px}.wb-card h3,.wb-card p{padding:0 4px}
.wb-card.cur{border-color:var(--yellow);transform:translateY(-6px)}
.wb-card.cur .wn{color:var(--yellow)}
/* C — лестница: этапы спускаются ступенями слева направо */
.wkC.on{display:grid;grid-template-columns:1fr 1.6fr;gap:40px}
.wc-head{position:sticky;top:120px;align-self:start}
.wc-stair{display:grid;gap:14px}
.wc-card{display:grid;grid-template-columns:1fr 200px;gap:18px;align-items:center;background:var(--dk2);border:1px solid var(--dk-line);border-radius:22px;padding:14px 14px 14px 22px;margin-left:calc(var(--i) * 34px);transition:border-color .3s}
.wc-card .wslot{aspect-ratio:16/10}
.wc-card.cur{border-color:var(--yellow)}.wc-card.cur .wn{color:var(--yellow)}
@media (max-width:1000px){
  .wkA.on,.wkC.on{grid-template-columns:1fr}.wc-head{position:static}
  .wb-row{grid-template-columns:1fr 1fr}.wc-card{margin-left:0}
  .wa-it:not(.cur) p{display:block}
}
@media (max-width:600px){.wb-row{grid-template-columns:1fr}.wc-card{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.wk .wv *{animation:none!important;opacity:1!important;transform:none!important;width:auto!important}}

/* ===== БЛОК — команда: наклонённые карточки с фото ===== */
.tm{position:relative;z-index:6;background-color:var(--dk);color:var(--dk-ink);padding:clamp(64px,calc(9 * var(--vh,1vh)),110px) 16px}
.tm .rail{background:var(--dk-line)}
.tm::after{content:"";position:absolute;top:0;left:max(16px,calc(50% - 680px));right:max(16px,calc(50% - 680px));height:1px;background:var(--dk-line);z-index:3}
.tm-in{position:relative;z-index:2;max-width:1240px;margin:0 auto}
.tm-h{margin:0;font-weight:800;font-size:clamp(24px,calc(2.6 * var(--vw,1vw)),38px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.tm-h br.dk{display:inline}
.tmsw button{color:var(--dk-ink)}.tmsw button[aria-pressed="true"]{color:var(--ink)}
.tmsw{margin-top:0}@media (max-width:700px){.tm-h br.dk{display:none}}
.tm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:clamp(32px,calc(5 * var(--vh,1vh)),56px)}
.tm-card{background:var(--surface);color:var(--surface-ink);border-radius:26px;overflow:hidden;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);backface-visibility:hidden;outline:1px solid transparent;box-shadow:0 14px 24px -18px rgba(0,0,0,.55);transform:rotate(var(--r));transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.tm-card:hover{transform:rotate(0) translateY(-8px);box-shadow:0 20px 30px -20px rgba(0,0,0,.6)}
.tm-ph{aspect-ratio:1/1;overflow:hidden;margin:-1px -1px 0}
.tm-ph img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform .8s var(--ease)}
.tm-card:hover .tm-ph img{transform:scale(1.04)}
.tm-b{padding:20px 22px 24px}
.tm-role{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--pb);color:#fff;padding:6px 11px;border-radius:999px}
.tm-b p br.dk{display:inline}
.tm-b h3{margin:14px 0 10px;font-size:21px;font-weight:800;letter-spacing:-.02em}
.tm-b p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
@media (max-width:1000px){.tm-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tm-grid{grid-template-columns:1fr;gap:26px}.tm-card{max-width:380px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){.tm-card,.tm-ph img{transition:none}}

/* ===== БЛОК — видеоотзывы: вертикальные ролики крутятся без звука, текст рядом, не поверх ===== */
.rv{position:relative;z-index:6;background:var(--dk);color:var(--dk-ink);padding:clamp(64px,calc(9 * var(--vh,1vh)),110px) 16px clamp(8px,calc(1.5 * var(--vh,1vh)),20px);overflow-x:clip}
.rv .rail{background:var(--dk-line)}
.rv::after{content:"";position:absolute;top:0;left:max(16px,calc(50% - 680px));right:max(16px,calc(50% - 680px));height:1px;background:var(--dk-line);z-index:3}
.rv-in{position:relative;z-index:2;max-width:1240px;margin:0 auto}
.rvsw{margin-top:0}
.rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap}
.rv-h{margin:0;font-weight:800;font-size:clamp(24px,calc(2.6 * var(--vw,1vw)),38px);line-height:1.08;letter-spacing:-.035em}
.rv-p{margin:0;max-width:420px;color:var(--dk-muted);font-size:16px;line-height:1.45}
.rvv{display:none;margin-top:clamp(28px,calc(4 * var(--vh,1vh)),44px)}.rvv.on{display:block}
.rv q{quotes:none}
/* ролик 9:16 — без текста поверх */
.rv-v{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#111;cursor:pointer;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);outline:none}
.rv-v:focus-visible{box-shadow:0 0 0 3px var(--orange)}
.rv-m{position:absolute;inset:0;overflow:hidden}
.rv-m img,.rv-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rv-m video{opacity:0;transition:opacity .4s}.rv-m video.ready{opacity:1}
.rv-poster{animation:rvkb 14s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1)}
@keyframes rvkb{0%{transform:scale(1.1) translate(-3%,1%)}100%{transform:scale(1.22) translate(4%,-2%)}}
.rv-play{position:absolute;z-index:3;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;transition:transform .35s var(--ease)}
.rv-play svg{width:22px;height:22px;fill:#111;margin-left:3px}
.rv-v:hover .rv-play{transform:scale(1.1)}
.rv-snd{position:absolute;z-index:3;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);display:grid;place-items:center}
.rv-snd svg{width:18px;height:18px;fill:#fff}.rv-snd .i-on{display:none}
.rv-v.on .rv-snd{background:var(--orange)}.rv-v.on .i-on{display:block}.rv-v.on .i-off{display:none}
.rv-v.on{box-shadow:0 0 0 3px var(--orange)}
.rv-who b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em}
.rv-who small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
/* H — бесконечная лента: крутится сама, на наведении стоп и под роликом всплывает цитата */
.rvH-row{overflow:hidden;margin:0 calc(50% - calc(50 * var(--vw,1vw)));padding:6px 0 108px}
.rvH-track{display:flex;gap:18px;width:max-content;animation:rvmq 60s linear infinite}
.rvH-row.static .rvH-track{animation:none;margin:0 auto}.rvH-row.static .rvH-c[aria-hidden]{display:none}
.rvH-row:has(.rv-v:hover) .rvH-track,.rvH-row:has(.rv-v:focus-visible) .rvH-track{animation-play-state:paused}
@keyframes rvmq{to{transform:translateX(calc(-50% - 9px))}}
.rvH-c{position:relative;width:clamp(200px,calc(17 * var(--vw,1vw)),240px);flex:none;display:flex;flex-direction:column;gap:10px}
.rvH-top{display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--surface-ink);border-radius:999px;padding:6px 14px 6px 6px;box-shadow:0 0 0 1px var(--card-edge)}
.rvH-top img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.rvH-top .rv-who b{font-size:13px}.rvH-top .rv-who small{font-size:11px}
.rvH-c .rv-v{transition:transform .5s var(--ease),box-shadow .5s}
.rvH-c .rv-v:hover{transform:translateY(-4px);box-shadow:0 22px 34px -24px rgba(var(--sh),.7)}
.rvH-q{position:absolute;left:0;right:0;top:100%;margin-top:10px;background:var(--yellow);color:var(--on-accent);border-radius:18px;padding:14px 16px;font-size:14px;font-weight:700;line-height:1.35;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .35s,transform .45s var(--ease);z-index:2}
.rvH-q::before{content:"";position:absolute;top:-7px;left:24px;width:14px;height:14px;background:inherit;transform:rotate(45deg);border-radius:2px}
.rvH-c .rv-v:hover~.rvH-q,.rvH-c .rv-v:focus-visible~.rvH-q{opacity:1;transform:none}
@media (hover:none){.rvH-track{animation-duration:80s}}
/* поп-ап: ролик слева, текст справа */
.rv-mw{position:relative;width:min(900px,100%)}
.rv-mbox{display:grid;grid-template-columns:auto 1fr;background:var(--surface);color:var(--surface-ink);border-radius:24px;overflow:hidden}
.rv-mv{position:relative;height:min(calc(76 * var(--vh,1vh)),640px);aspect-ratio:9/16;background:#000}
.rv-mv img,.rv-mv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rv-mv video:not([src]){display:none}
.rv-mt{padding:34px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.rv-mnote{align-self:flex-start;font-size:12px;color:var(--muted);background:var(--hover);border-radius:999px;padding:6px 12px;margin-bottom:auto}
.rv-mt q{font-size:clamp(20px,calc(2.2 * var(--vw,1vw)),30px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:18px}
.rv-mt small{color:var(--muted)}
@media (max-width:1000px){
  .rv-mbox{grid-template-columns:1fr}.rv-mv{height:auto;width:100%;max-height:calc(60 * var(--vh,1vh))}.rv-mt{padding:20px}
}
@media (prefers-reduced-motion:reduce){.rv-poster,.rvH-track{animation:none}.rvH-row{overflow-x:auto}}

/* ===== БЛОК — «Бесплатный расчёт и аудит»: жёлтый, форма + Михаил ===== */
.au{position:relative;z-index:6;background-color:var(--yellow);color:var(--on-accent);
  background-image:radial-gradient(color-mix(in srgb,var(--on-accent) 22%,transparent) 1px,transparent 1.3px);background-size:16px 16px;background-attachment:fixed;
  padding:clamp(56px,calc(8 * var(--vh,1vh)),96px) 16px;overflow-x:clip}
.au .rail{background:color-mix(in srgb,var(--on-accent) 25%,transparent)}
.au-in{position:relative;z-index:2;max-width:1240px;margin:0 auto}
.ausw{margin-bottom:28px}
.auv{display:none}
.au .au-p{color:color-mix(in srgb,var(--on-accent) 72%,var(--yellow));margin-top:16px}
.au-card{background:var(--surface);color:var(--surface-ink);border-radius:30px;padding:30px 32px;box-shadow:0 0 0 1px rgba(0,0,0,.05),22px 18px 44px -14px rgba(0,0,0,.3)}
.au-card .fs-f input,.au-card .fs-msg span{background:var(--hover);box-shadow:none}
.au-ft h3{margin:0;font-size:26px;font-weight:800;letter-spacing:-.025em}
.au-ft p{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.45}
.au-mgr{display:inline-flex;align-items:center;gap:14px;background:var(--surface);color:var(--surface-ink);border-radius:999px;padding:6px 22px 6px 6px;box-shadow:0 14px 26px -18px rgba(0,0,0,.4)}
.au-mgr img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.au-mgr span{font-size:13px;color:var(--muted);line-height:1.3}.au-mgr b{display:block;font-size:17px;color:var(--surface-ink)}
/* A — форма слева, справа заголовок и крупное фото Михаила с подписью-пузырём */
.auA.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.auA-ph{position:relative;margin-top:34px;width:max-content}
.auA-ph img{width:clamp(150px,calc(14 * var(--vw,1vw)),200px);aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 8px var(--surface);display:block}
.auA-bub{position:absolute;left:calc(100% - 10px);top:20%;white-space:nowrap;background:var(--ink);color:var(--paper);border-radius:22px 22px 22px 6px;padding:14px 20px;font-size:14px;line-height:1.3;transform:rotate(-3deg)}
.auA-bub b{display:block;font-size:19px}
/* B — сообщение от Михаила: шапка чата, пузырь с текстом, форма */
.auB.on{display:block}
.auB-head{text-align:center;margin-bottom:30px}
.auB-chat{max-width:760px;margin:0 auto;padding:26px 30px 30px}
.auB-top{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--card-edge)}
.auB-top img{width:58px;height:58px;border-radius:50%;object-fit:cover}
.auB-top b{display:block;font-size:18px}.auB-top small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;margin-top:2px}
.auB-top i{width:8px;height:8px;border-radius:50%;background:#2bc84a;box-shadow:0 0 0 3px color-mix(in srgb,#2bc84a 25%,transparent)}
.auB-msg{margin:20px 0 6px;max-width:560px;background:var(--hover);border-radius:6px 22px 22px 22px;padding:16px 20px;font-size:16px;line-height:1.5}
/* C — визитка: тёмная карточка, слева большое фото, справа форма */
.auC.on{display:block}
.auC-head{max-width:780px;margin-bottom:30px}
.auC-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);background:var(--ink);color:var(--paper);border-radius:32px;overflow:hidden;box-shadow:22px 18px 44px -14px rgba(0,0,0,.35)}
.auC-ph{position:relative;min-height:100%}
.auC-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.auC-tag{position:absolute;left:20px;bottom:20px;background:var(--surface);color:var(--surface-ink);border-radius:18px;padding:12px 18px;font-size:13px;color:var(--muted);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.auC-tag b{display:block;font-size:18px;color:var(--surface-ink)}
.auC-f{padding:34px 36px}
.auC-f .au-ft p{color:color-mix(in srgb,var(--paper) 65%,transparent)}
.auC-f .fs-f span,.auC-f .fs-lbl{color:var(--paper)}
.auC-f .fs-f input{background:rgba(255,255,255,.1);color:var(--paper);box-shadow:none}
.auC-f .fs-f input::placeholder{color:rgba(255,255,255,.45)}
.auC-f .fs-msg span{background:rgba(255,255,255,.1);color:var(--paper);box-shadow:none}
.auC-f .fs-msg input:checked+span{background:var(--yellow);color:var(--on-accent)}
.auC-f .fs-cons{color:rgba(255,255,255,.6)}.auC-f .fs-cons a{color:inherit}
/* D — полоса: сверху заголовок и Михаил, снизу форма одной строкой */
.auD.on{display:block}
.auD-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-bottom:30px}
.auD-top .au-mgr{transform:rotate(2deg)}
.auD-bar{padding:6px 26px 22px}
.auD-bar .fs-form{grid-template-columns:1fr 1fr auto;align-items:end;column-gap:14px}
.auD-bar .fs-row{grid-column:1/3}
.auD-bar .fs-lbl{display:none}
.auD-bar .fs-msg{grid-column:3;grid-row:1;align-self:end;padding-bottom:4px}
.auD-bar .fs-cons{grid-column:1/3;align-self:center;margin:0}
.auD-bar .fs-btn,.auD-bar .fs-ok{grid-column:3;grid-row:2;width:auto}
@media (max-width:1000px){
  .auA.on,.auC-card{grid-template-columns:1fr}.auC-ph{min-height:320px}
  .auD-bar .fs-form{grid-template-columns:1fr}.auD-bar .fs-row,.auD-bar .fs-msg,.auD-bar .fs-cons,.auD-bar .fs-btn{grid-column:auto;grid-row:auto}.auD-bar .fs-lbl{display:block}
}
@media (max-width:600px){.au-card,.auC-f{padding:22px 18px}.auA-bub{position:static;display:inline-block;margin-top:14px;white-space:normal}.auA-ph{width:auto}}

/* левая плашка с текстом: три варианта оформления */
.au-panel{position:relative;border-radius:30px;padding:clamp(28px,calc(3 * var(--vw,1vw)),40px);overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 22px 40px -26px rgba(0,0,0,.4)}
.au-panel .fs-h,.au-panel .au-p{position:relative;z-index:1}
.au[data-ap="1"] .au-panel{background:var(--ink);color:var(--paper)}
.au[data-ap="1"] .au-panel .au-p{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.au[data-ap="1"] .auA-bub{background:var(--surface);color:var(--surface-ink)}
.au[data-ap="1"] .auA-ph img{box-shadow:0 0 0 6px var(--yellow)}
.au[data-ap="2"] .au-panel{background-color:var(--paper);color:var(--ink);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.au[data-ap="2"] .au-panel .au-p{color:var(--muted)}
.au[data-ap="2"] .auA-bub{background:var(--orange);color:#fff}
.au[data-ap="3"] .au-panel{background:var(--orange);color:#fff}
.au[data-ap="3"] .au-panel .au-p{color:rgba(255,255,255,.85)}
.au[data-ap="3"] .au-panel .fs-h em{background:var(--ink);color:var(--paper)}
.au[data-ap="3"] .auA-bub{background:var(--surface);color:var(--surface-ink)}
.au[data-ap="3"] .au-panel::after{content:"";position:absolute;right:-80px;bottom:-80px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.12)}
.auA.on{align-items:stretch}
.auA .au-card{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.auA .au-panel{display:flex;flex-direction:column;justify-content:center}
.auA .auA-ph{margin-top:28px}
/* цвет оранжевой плашки — варианты */
.au{--apb:var(--orange);--apf:#fff;--ape:var(--ink);--apeF:var(--paper)}
.au[data-pc="k"]{--apb:#161616;--apf:#fff;--ape:var(--orange);--apeF:#fff}
.au[data-pc="g"]{--apb:#2bc84a;--apf:#fff;--ape:#161616;--apeF:#fff}
.au[data-pc="b"]{--apb:#4f9cf9;--apf:#fff;--ape:#161616;--apeF:#fff}
.au[data-pc="p"]{--apb:#ff8fc4;--apf:#161616;--ape:#161616;--apeF:#fff}
.au[data-ap="3"] .au-panel{background:var(--apb);color:var(--apf)}
.au[data-ap="3"] .au-panel .au-p{color:color-mix(in srgb,var(--apf) 85%,transparent)}
.au[data-ap="3"] .au-panel .fs-h em{background:var(--ape);color:var(--apeF);transform:rotate(-3deg);margin:.08em 0}
.au[data-pc="k"] .au-panel::after{background:rgba(255,255,255,.07)!important}
/* ===== БЛОК — частые вопросы: отвечает маскот ===== */
.fq{position:relative;z-index:6;background:var(--paper);padding:clamp(64px,calc(9 * var(--vh,1vh)),110px) 16px}
.fq::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);mask-image:linear-gradient(to bottom,#000,transparent 70%)}
.fq-in{position:relative;z-index:2;max-width:1240px;margin:0 auto}
.fq-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 40px;flex-wrap:wrap}
.fq-h{margin:0;font-weight:800;font-size:clamp(24px,calc(2.6 * var(--vw,1vw)),38px);line-height:1.08;letter-spacing:-.035em}
.fq-p{margin:0;color:var(--muted);font-size:16px}
.fq-h br.dk{display:inline}@media (max-width:700px){.fq-h br.dk{display:none}}
.fqv{display:none;margin-top:clamp(28px,calc(4 * var(--vh,1vh)),44px)}
.fq-slot{position:relative;width:200px;height:200px;flex:none}
.fq-slot canvas{width:100%!important;height:100%!important;display:block}
.fq-q{border:0;cursor:pointer;font:600 16px/1.35 var(--f);text-align:left;color:var(--surface-ink);background:var(--surface);box-shadow:0 0 0 1px var(--card-edge);transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.fq-q:hover{transform:translateX(4px)}
.fq-q.on{background:var(--ink);color:var(--paper);box-shadow:none}
.fq-bub{position:relative;background:var(--surface);color:var(--surface-ink);border-radius:24px;padding:20px 24px;box-shadow:0 0 0 1px var(--card-edge),0 24px 40px -30px rgba(var(--sh),.6)}
.fq-a{margin:0;font-size:17px;line-height:1.5;min-height:1.5em}
.fq-a.typing::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:fqc .8s steps(1) infinite}
@keyframes fqc{50%{opacity:0}}
.fq-dots{display:inline-flex;gap:5px;padding:6px 0}.fq-dots i{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:fqd 1s infinite}
.fq-dots i:nth-child(2){animation-delay:.15s}.fq-dots i:nth-child(3){animation-delay:.3s}
@keyframes fqd{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-5px);opacity:1}}
/* A — слева вопросы, справа большой маскот, ответ — его сообщение */
.fqA.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.fqA-l{display:grid;gap:10px;align-content:start}
.fqA-q{border-radius:18px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.fqA-q::after{content:"→";opacity:.4;transition:opacity .25s}.fqA-q.on::after{opacity:1}
.fqA-side{display:flex;flex-direction:column;align-items:center}
.fqA .fq-bub{align-self:stretch;margin-left:clamp(0px,calc(4 * var(--vw,1vw)),60px);min-height:96px;display:flex;align-items:center;border-radius:26px 26px 26px 8px}
.fqA .fq-bub::after{content:"";position:absolute;left:34%;bottom:-9px;width:20px;height:20px;background:inherit;transform:rotate(45deg);border-radius:3px;box-shadow:1px 1px 0 0 var(--card-edge)}
.fqA .fq-slot{width:clamp(260px,calc(26 * var(--vw,1vw)),380px);height:clamp(260px,calc(26 * var(--vw,1vw)),380px);margin-top:-6px}
@media (max-width:1000px){
  .fqA.on{grid-template-columns:1fr}.fqA-side{order:-1}.fqA .fq-bub{margin-left:0}.fqA .fq-slot{width:220px;height:220px}
}

/* ===== БЛОК — блог ===== */
.bl{position:relative;z-index:6;background:var(--paper);padding:clamp(56px,calc(8 * var(--vh,1vh)),96px) 16px clamp(64px,calc(9 * var(--vh,1vh)),110px);border-top:1px solid var(--frame)}
.bl-in{position:relative;z-index:2;max-width:1240px;margin:0 auto}
.blsw{margin-top:0}
.bl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap}
.bl-h{margin:0;font-weight:800;font-size:clamp(24px,calc(2.6 * var(--vw,1vw)),38px);line-height:1.08;letter-spacing:-.035em;max-width:960px}
.bl-h br.dk{display:inline}@media (max-width:800px){.bl-h br.dk{display:none}}
.bl-all{font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:2px;white-space:nowrap}
.blv{display:none;margin-top:clamp(28px,calc(4 * var(--vh,1vh)),44px)}
.bl a{color:inherit;text-decoration:none}
.bl h3,.bl h4{margin:0;letter-spacing:-.02em;font-weight:800}
/* обложки — фирменные плашки по рубрикам (позже заменим на обложки статей) */
.c-seo{--cc:#4f9cf9;--ci:#fff}.c-dir{--cc:#2bc84a;--ci:#fff}.c-pod{--cc:#ff8fc4;--ci:#161616}
.bl-cov{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--cc);color:var(--ci);
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:22px 22px}
.bl-cov-w{position:absolute;left:18px;bottom:6px;font-size:clamp(44px,calc(5 * var(--vw,1vw)),76px);font-weight:800;letter-spacing:-.05em;line-height:1;opacity:.95;transition:transform .6s var(--ease)}
.bl-cov-t{position:absolute;right:14px;top:14px;font-size:12px;font-weight:700;background:rgba(0,0,0,.2);color:#fff;border-radius:999px;padding:5px 10px}
.bl-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--cc);color:var(--ci);border-radius:999px;padding:5px 10px}
.bl-meta{font-size:13px;color:var(--muted)}
/* A — сетка 3×2 */
.blA.on{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blA-c{background:var(--surface);color:var(--surface-ink);border-radius:26px;padding:10px 10px 20px;box-shadow:0 0 0 1px var(--card-edge);transition:transform .4s var(--ease),box-shadow .4s}
.blA-c:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--card-edge),0 28px 40px -30px rgba(var(--sh),.6)}
.blA-c:hover .bl-cov-w{transform:translateX(8px)}
.blA-b{padding:16px 10px 0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.blA-b h3{font-size:19px;line-height:1.25}
.blA-b p{margin:0;font-size:14px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* B — главная статья + список */
.blB.on{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:stretch}
.blB-main{background:var(--surface);color:var(--surface-ink);border-radius:28px;padding:12px 12px 26px;box-shadow:0 0 0 1px var(--card-edge)}
.blB-main .bl-cov{aspect-ratio:16/9}.blB-main .bl-cov-w{font-size:clamp(70px,calc(8 * var(--vw,1vw)),120px)}
.blB-mb{padding:20px 14px 0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.blB-mb h3{font-size:clamp(22px,calc(2 * var(--vw,1vw)),28px);line-height:1.2}.blB-mb p{margin:0;color:var(--muted);line-height:1.55}
.blB-list{display:grid;align-content:space-between;gap:10px}
.blB-it{display:block;background:var(--surface);color:var(--surface-ink);border-radius:20px;padding:16px 20px;box-shadow:0 0 0 1px var(--card-edge);transition:transform .3s var(--ease)}
.blB-it:hover{transform:translateX(6px)}
.blB-it div{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.blB-it h4{font-size:17px;line-height:1.3}
/* C — рубрики + горизонтальная лента */
.blC-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.blC-f{display:flex;flex-wrap:wrap;gap:8px}
.blC-f button{border:0;cursor:pointer;font:600 14px var(--f);padding:10px 16px;border-radius:999px;background:var(--surface);color:var(--surface-ink);box-shadow:0 0 0 1px var(--card-edge)}
.blC-f button[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.blC-nav{display:flex;gap:8px}
.blC.on{display:block}
.blC-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 18px) / 3.3);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.blC-row::-webkit-scrollbar{display:none}
.blC-c{scroll-snap-align:start;display:block}
.blC-c[hidden]{display:none}
.blC-c .bl-cov{aspect-ratio:4/3;border-radius:22px;transition:transform .5s var(--ease)}
.blC-c:hover .bl-cov{transform:scale(.97)}
.blC-b{padding:14px 4px 0}.blC-b h3{font-size:18px;line-height:1.3;margin-top:6px}
/* D — журнал: строки без картинок, обложка всплывает при наведении */
.blD.on{display:block}
.blD-list{border-top:1px solid var(--frame)}
.blD-r{position:relative;display:grid;grid-template-columns:130px 1fr 40px;gap:28px;align-items:start;padding:24px 8px;border-bottom:1px solid var(--frame);transition:background .3s,padding .3s}
.blD-d{font-weight:800;font-size:17px}.blD-d small{display:block;font-weight:500;font-size:13px;color:var(--muted);margin-top:4px}
.blD-m{display:flex;flex-direction:column;gap:10px;align-items:flex-start;max-width:640px}
.blD-m h3{font-size:clamp(19px,calc(1.7 * var(--vw,1vw)),24px);line-height:1.25}
.blD-m p{margin:0;color:var(--muted);font-size:15px;line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s}
.blD-ar{font-size:24px;justify-self:end;transition:transform .35s var(--ease)}
.blD-r .bl-cov{position:absolute;right:80px;top:50%;width:230px;transform:translateY(-50%) rotate(4deg) scale(.85);opacity:0;pointer-events:none;transition:opacity .35s,transform .5s var(--ease);box-shadow:0 24px 40px -24px rgba(0,0,0,.5)}
.blD-r:hover{background:var(--surface);padding-left:22px}
.blD-r:hover .blD-m p{max-height:120px;opacity:1}
.blD-r:hover .blD-ar{transform:translateX(6px)}
.blD-r:hover .bl-cov{opacity:1;transform:translateY(-50%) rotate(4deg) scale(1)}
@media (max-width:1000px){
  .blA.on{grid-template-columns:1fr 1fr}.blB.on{grid-template-columns:1fr}.blC-row{grid-auto-columns:70%}
  .blD-r{grid-template-columns:1fr 30px;gap:10px}.blD-d{grid-column:1/-1;display:flex;gap:10px;align-items:baseline}.blD-r .bl-cov{display:none}.blD-m p{max-height:none;opacity:1}
}
@media (max-width:600px){.blA.on{grid-template-columns:1fr}}

/* ===== ФИНАЛ — призыв к действию + подвал ===== */
.ct{position:relative;z-index:6;background:var(--paper)}
.ct > .ctv{position:relative;z-index:1}
.ctv{display:none}.ctv.on{display:block}
.ct-wrap{max-width:1240px;margin:0 auto}
.ct-h{margin:0;font-weight:800;font-size:clamp(24px,calc(2.6 * var(--vw,1vw)),38px);line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
.ct-h em{font-style:normal;display:inline-block;background:var(--orange);color:#fff;border-radius:.16em;padding:0 .24em .06em;transform:rotate(-2deg)}
.ct-p{margin:16px 0 0;font-size:17px;line-height:1.45}
.ct-pills{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ct-pills li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:9px 14px;border-radius:999px}
.ct-pills li::before{content:"";width:8px;height:8px;border-radius:50%;background:#2bc84a}
.ct-card{background:var(--surface);color:var(--surface-ink);border-radius:30px;padding:28px 30px;box-shadow:0 26px 44px -30px rgba(0,0,0,.5)}
.ct-card .fs-f input,.ct-card .fs-msg span{background:var(--hover);box-shadow:none}
.ct-card .fs-form{margin-top:0}
.ft a{color:inherit;text-decoration:none}
.ft-in{max-width:1240px;margin:0 auto}
.ft-logo svg{height:38px;width:auto;display:block}
.ft-menu{display:flex;flex-wrap:wrap;gap:8px 26px;font-weight:600}
.ft-menu a:hover,.ft-legal a:hover{text-decoration:underline;text-underline-offset:3px}
.ft-soc{display:flex;gap:10px}
.ft-soc a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;transition:transform .3s var(--ease)}
.ft-soc a:hover{transform:translateY(-3px)}
.ft-soc svg{width:20px;height:20px;fill:currentColor}
.ft-legal{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px}
.ft-req{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px}
/* 1 — тёмный финал: тёмный призыв и подвал, разделитель-линия */
.ct1{background:var(--dk);color:var(--dk-ink);position:relative}
.ct1::before{content:"";position:absolute;top:0;left:max(16px,calc(50% - 680px));right:max(16px,calc(50% - 680px));height:1px;background:var(--dk-line)}
.ct1 .ct-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:clamp(64px,calc(9 * var(--vh,1vh)),110px) 16px}
.ct1 .ct-p{color:var(--dk-muted)}
.ct1 .ct-pills li{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--dk-line)}
.ft1{border-top:1px solid var(--dk-line);padding:36px 16px 30px;color:var(--dk-ink)}
.ft1 .ft-logo svg{filter:brightness(0) invert(1)}
.ft1-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--dk-line)}
.ft1 .ft-soc a{background:rgba(255,255,255,.08)}.ft1 .ft-soc a:hover{background:var(--yellow);color:var(--on-accent)}
.ft1-bot{display:flex;justify-content:space-between;gap:12px 30px;flex-wrap:wrap;padding-top:20px;color:var(--dk-muted)}
/* 2 — жёлтый призыв по центру + чёрный подвал с огромным лого */
.ct2-w{background:var(--yellow);color:var(--on-accent);max-width:none;padding:clamp(64px,calc(9 * var(--vh,1vh)),110px) 16px;
  background-image:radial-gradient(color-mix(in srgb,var(--on-accent) 22%,transparent) 1px,transparent 1.3px);background-size:16px 16px}
.ct2-head{max-width:860px;margin:0 auto;text-align:center}
.ct2-head .ct-h em{background:var(--ink);color:var(--paper)}
.ct2-head .ct-p{color:color-mix(in srgb,var(--on-accent) 72%,var(--yellow))}
.ct2-head .ct-pills{justify-content:center}
.ct2-head .ct-pills li{background:rgba(255,255,255,.5)}
.ct2-bar{max-width:1240px;margin:34px auto 0;padding:6px 26px 22px}
.ct2-bar .fs-form{grid-template-columns:1fr 1fr auto;align-items:end;column-gap:14px;margin-top:0}
.ct2-bar .fs-row{grid-column:1/3}.ct2-bar .fs-lbl{display:none}
.ct2-bar .fs-msg{grid-column:3;grid-row:1;align-self:end;padding-bottom:4px}
.ct2-bar .fs-cons{grid-column:1/3;align-self:center;margin:0}
.ct2-bar .fs-btn,.ct2-bar .fs-ok{grid-column:3;grid-row:2;width:auto}
.ft2{background:#111;color:#f1eee8;padding:40px 16px 0;overflow:hidden}
.ft2-row{display:flex;justify-content:space-between;align-items:center;gap:14px 30px;flex-wrap:wrap;padding-bottom:20px}
.ft2-row+.ft2-row{color:#8f8a83;border-top:1px solid #2a2a2a;padding-top:20px}
.ft2 .ft-soc a{background:#1f1f1f}.ft2 .ft-soc a:hover{background:var(--yellow);color:#111}
.ft2-word{font-weight:800;font-size:clamp(56px,calc(13.5 * var(--vw,1vw)),210px);letter-spacing:-.06em;line-height:.8;white-space:nowrap;text-align:center;margin:18px 0 -.12em;color:#1d1d1d;-webkit-text-stroke:1px #333;transition:color .6s}
.ft2:hover .ft2-word{color:var(--yellow)}
/* 3 — бежевый фон, тёмная большая карточка с цифрами и формой; светлый подвал колонками */
.ct3{padding:clamp(56px,calc(8 * var(--vh,1vh)),96px) 16px 0}
.ct3-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;background:var(--dk);color:var(--dk-ink);border-radius:36px;padding:clamp(28px,calc(3.4 * var(--vw,1vw)),48px);position:relative;overflow:hidden}
.ct3-l{position:relative;z-index:1}
.ct3 .ct-p{color:var(--dk-muted)}
.ct-big{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ct-big li{border-radius:20px;padding:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--dk-line)}
.ct-big b{display:block;font-size:clamp(24px,calc(2.4 * var(--vw,1vw)),34px);font-weight:800;letter-spacing:-.04em;color:var(--orange)}
.ct-big span{display:block;font-size:13px;color:var(--dk-muted);margin-top:4px}
.ct3-f{position:relative;z-index:1;background:var(--surface);color:var(--surface-ink);border-radius:26px;padding:24px 26px}
.ct3-f .fs-form{margin-top:0}.ct3-f .fs-f input,.ct3-f .fs-msg span{background:var(--hover);box-shadow:none}
.ft3{color:var(--ink);padding:56px 16px 40px}
.ft3-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px;border-top:1px solid var(--frame);padding-top:40px}
.ft3 h4{margin:0 0 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ft3 .ft-menu,.ft3 .ft-legal,.ft3 .ft-req{flex-direction:column;gap:10px}
.ft3 .ft-legal,.ft3 .ft-req{font-size:14px;color:var(--muted)}
.ft3-tag{margin:14px 0 18px;color:var(--muted);font-size:14px;max-width:240px}
.ft3 .ft-soc a{background:var(--surface);box-shadow:0 0 0 1px var(--card-edge)}.ft3 .ft-soc a:hover{background:var(--yellow);color:var(--on-accent)}
@media (max-width:1000px){
  .ct1 .ct-wrap,.ct3-card{grid-template-columns:1fr}.ft3-grid{grid-template-columns:1fr 1fr}
  .ct2-bar .fs-form{grid-template-columns:1fr}.ct2-bar .fs-row,.ct2-bar .fs-msg,.ct2-bar .fs-cons,.ct2-bar .fs-btn{grid-column:auto;grid-row:auto}.ct2-bar .fs-lbl{display:block}
}
@media (max-width:560px){.ct-big{grid-template-columns:1fr}.ft3-grid{grid-template-columns:1fr}}

/* ===== реплики робота: пиксельные плашки и пиксельный шрифт ===== */
:root{--px:4px}
.fq-bub{--px:4px}
.qsay,.fq-bub{background:none!important;border-radius:0!important;box-shadow:none!important;border:calc(var(--px)*2) solid transparent;
  border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%225%22%20height%3D%225%22%20viewBox%3D%220%200%205%205%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3C/svg%3E") 2 fill / calc(var(--px)*2) stretch;image-rendering:pixelated;color:#161616!important;
  font-family:'DotGothic16',monospace!important;font-weight:400!important;letter-spacing:-.3em;word-spacing:.2em;filter:drop-shadow(calc(var(--px)*-1.3) calc(var(--px)*1.3) 0 rgba(0,0,0,.16))}
.qsay{font-size:16px!important;line-height:1.5!important;padding:10px 14px}
.fq-bub .fq-a{font-size:20px;line-height:1.5}
.qsay::before,.fqA .fq-bub::after{content:"";position:absolute;width:calc(var(--px)*7);height:calc(var(--px)*7);background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%227%22%20height%3D%227%22%20viewBox%3D%220%200%207%207%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23161616%22/%3E%3C/svg%3E") 0 0/100% 100% no-repeat!important;
  transform:none!important;border-radius:0!important;box-shadow:none!important;top:100%;bottom:auto!important;margin:0!important;image-rendering:pixelated}
.qa-side .qsay::before{left:calc(50% - var(--px)*2)}
.qb-mascot .qsay::before{left:calc(50% - var(--px)*2);top:auto;bottom:100%!important;transform:scaleY(-1)!important}
.qc-mascot .qsay::before{left:40px}
.fqA .fq-bub::after{left:34%}
.qsay .caret{width:var(--px);height:1em;border-radius:0}
@media (max-width:900px){.qa-side{align-items:center}.qa-side .qz-ball{order:-1}.qa-side .qsay{flex:1}.qa-side .qsay::before{left:calc(var(--px)*-7 + 1px);top:calc(50% - var(--px)*3.5);bottom:auto!important;transform:rotate(90deg)!important}}

/* ===== поп-ап с квизом: размытый фон, карточка прилетает снизу, робот перелетает в поп-ап ===== */
.qpop{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px 16px}
.qpop[hidden]{display:none}
.qpop-bg{position:absolute;inset:0;background:color-mix(in srgb,var(--paper) 22%,transparent);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .5s ease}
.qpop.show .qpop-bg{opacity:1}
.qpop-card{position:relative;width:min(1180px,100%);overflow:visible;background:var(--dk);color:var(--dk-ink);border-radius:36px;padding:clamp(24px,calc(3 * var(--vw,1vw)),40px);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.55);opacity:0;transform:translateY(60px) scale(.94);transition:opacity .4s ease,transform .7s cubic-bezier(.2,1.1,.3,1)}
.qpop.show .qpop-card{opacity:1;transform:none}
.qpop.closing .qpop-card{transition:transform .65s cubic-bezier(.55,0,.75,.2),opacity .5s ease .15s;opacity:0;transform:translateY(calc(105 * var(--vh,1vh)))}
.qpop.closing .qpop-bg{transition:opacity .6s ease}
.qpop-x{position:absolute;right:18px;top:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--dk-ink);font:300 28px/1 var(--f);cursor:pointer;transition:background .2s,transform .3s var(--ease)}
.qpop-x:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}
.qpop-head{margin:0 56px 26px 0}
.qpop-head h3{margin:0;font-weight:800;font-size:clamp(22px,calc(2.2 * var(--vw,1vw)),32px);letter-spacing:-.03em;line-height:1.1}
.qpop-head h3 em{font-style:normal;color:var(--orange)}
.qpop-head p{margin:10px 0 0;color:var(--dk-muted);font-size:15px;max-width:640px}
.qpop .qa-card{min-height:440px}
.qpop .qsay::before{z-index:1}
@media (max-width:900px){.qpop{padding:0;place-items:end center}.qpop-card{border-radius:28px 28px 0 0;max-height:calc(100 * var(--vh,1vh));overflow:auto}}
@media (max-height:760px) and (min-width:901px){.qpop{place-items:start center;overflow:auto}}

/* ===== этапы: три набора подробных анимаций (переключатель над блоком) ===== */
.sys .xsw{margin:0 0 18px}
.sys[data-va="A"] .x:not(.xa),.sys[data-va="B"] .x:not(.xb),.sys[data-va="C"] .x:not(.xc3){display:none}
.x{--ink:#161616;--mut:#8a8580;--line:#ece8e2;font-family:var(--f);color:var(--ink);background:#f6f3ee;padding:10px;display:flex;flex-direction:column;gap:6px}
.x *{box-sizing:border-box}
.x .xc{position:absolute;width:15px;height:19px;z-index:5;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));pointer-events:none}
.x .z-ya{flex:none;width:16px;height:16px;border-radius:50%;background:#fc3f1d;color:#fff;font:800 10px/16px var(--f);text-align:center;font-style:normal}
.x .z-srch{display:flex;align-items:center;gap:7px;height:26px;border-radius:9px;background:#fff;border:1.5px solid #ffd02b;padding:0 4px 0 7px;flex:none}
.x .z-srch .z-qt{flex:1;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;width:calc(var(--n)*1ch)}
.x .z-srch .z-sb{flex:none;font-size:9px;font-weight:700;background:#ffd02b;border-radius:6px;padding:3px 6px}
.vC .st.cur .x .z-srch .z-qt{animation:xtype 5.2s steps(var(--n)) both}
@keyframes xtype{0%{max-width:0}30%,100%{max-width:100%}}
.x .z-srch .z-qt{max-width:100%}

/* A1 */
.a1 .z-res{position:relative;padding-right:58px!important;display:flex;align-items:center;gap:7px;background:#fff;border-radius:8px;padding:4px 7px;min-height:0;flex:1}
.a1 .z-fav{flex:none;width:16px;height:16px;border-radius:5px;background:var(--c);color:#fff;font:800 9px/16px var(--f);text-align:center;font-style:normal}
.a1 .z-res b{display:block;font-size:10px;line-height:1.1;color:#1a0dab}
.a1 .z-res small{display:block;font-size:9.5px;color:#444;line-height:1.2}
.a1 mark{background:linear-gradient(#fff27a,#fff27a) no-repeat 0 60%/100% 70%;color:inherit;padding:0 1px}
.a1 .z-tag{position:absolute;width:auto;display:inline-block;right:6px;top:50%;font-style:normal;font-size:9px;font-weight:800;background:#ff8f5a;color:#fff;border-radius:4px;padding:2px 6px;transform:translateY(-50%) rotate(var(--r));box-shadow:0 3px 6px -2px rgba(0,0,0,.3)}
.vC .st.cur .a1 .z-res{animation:xslide 5.2s var(--ease) both;animation-delay:calc(.9s + var(--d)*.25s)}
.vC .st.cur .a1 mark{animation:xmark 5.2s ease both;animation-delay:calc(1.8s + var(--d)*.45s)}
.vC .st.cur .a1 .z-tag{animation:xpop 5.2s var(--spring) both;animation-delay:calc(2.2s + var(--d)*.45s)}
@keyframes xslide{0%{opacity:0;transform:translateY(10px)}12%,100%{opacity:1;transform:none}}
@keyframes xmark{0%,4%{background-size:0 70%}16%,100%{background-size:100% 70%}}
@keyframes xpop{0%,3%{opacity:0;transform:translateY(-50%) rotate(var(--r)) scale(.3)}14%,100%{opacity:1;transform:translateY(-50%) rotate(var(--r)) scale(1)}}

/* A2 */
.a2{padding:8px}
.a2 .z-brw{flex:1;background:#fff;border-radius:9px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 6px 16px -10px rgba(0,0,0,.35)}
.a2 .z-bar{display:flex;align-items:center;gap:4px;padding:4px 7px;background:#efebe5}
.a2 .z-bar i{width:6px;height:6px;border-radius:50%;background:#ff5f57}.a2 .z-bar i:nth-child(2){background:#febc2e}.a2 .z-bar i:nth-child(3){background:#28c840}
.a2 .z-bar span{margin-left:6px;font-size:8px;color:var(--mut);background:#fff;border-radius:4px;padding:1px 8px}
.a2 .z-pg{flex:1;display:grid;grid-template-columns:1.1fr 1fr;gap:6px;padding:6px 8px}
.a2 .z-h1{display:block;font-size:12px;line-height:1.05;font-weight:800;letter-spacing:-.02em}
.a2 .z-sub{display:block;font-size:7.5px;color:var(--mut);margin:3px 0 5px}
.a2 .z-cta{display:inline-block;font-size:8px;font-weight:700;background:#ff8f5a;color:#fff;border-radius:999px;padding:3px 9px}
.a2 .z-ph{position:relative;border-radius:7px;overflow:hidden;background:linear-gradient(160deg,#bfe3ff,#ffe1c7)}
.a2 .z-sun{position:absolute;right:8px;top:6px;width:12px;height:12px;border-radius:50%;background:#ffd02b}
.a2 .z-hill{position:absolute;left:-10%;right:-10%;bottom:-30%;height:60%;border-radius:50%;background:#7fd38f}
.a2 .z-man{position:absolute;left:38%;bottom:0;width:22px;height:34px;border-radius:11px 11px 4px 4px;background:#4f9cf9}
.a2 .z-man::before{content:"";position:absolute;left:5px;top:-11px;width:12px;height:12px;border-radius:50%;background:#f2c29b}
.a2 .z-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:0 8px 6px}
.a2 .z-cards i{height:12px;border-radius:4px;background:color-mix(in srgb,var(--c) 30%,#fff);border-left:3px solid var(--c)}
.a2 .xc{left:24%;top:78%}
.a2 .z-rip{position:absolute;left:calc(24% - 6px);top:calc(78% - 6px);width:18px;height:18px;border-radius:50%;border:2px solid #ff8f5a;opacity:0}
.vC .st.cur .a2 .z-h1{animation:xclip 5.2s steps(12) both;animation-delay:.3s}
.vC .st.cur .a2 .z-sub{animation:xfade 5.2s ease both;animation-delay:1.1s}
.vC .st.cur .a2 .z-ph{animation:xph 5.2s var(--ease) both;animation-delay:.6s}
.vC .st.cur .a2 .z-cta{animation:xpop2 5.2s var(--spring) both;animation-delay:1.5s}
.vC .st.cur .a2 .z-cards i{animation:xslide 5.2s var(--ease) both;animation-delay:2s}
.vC .st.cur .a2 .xc{animation:xcur2 5.2s var(--ease) both}
.vC .st.cur .a2 .z-rip{animation:xrip 5.2s ease both}
@keyframes xclip{0%{clip-path:inset(0 100% 0 0)}20%,100%{clip-path:inset(0 0 0 0)}}
@keyframes xfade{0%{opacity:0}10%,100%{opacity:1}}
@keyframes xph{0%{opacity:0;transform:scale(.85)}15%,100%{opacity:1;transform:none}}
@keyframes xpop2{0%,3%{opacity:0;transform:scale(.3)}14%,100%{opacity:1;transform:none}}
@keyframes xcur2{0%,35%{left:90%;top:95%;opacity:0}45%{opacity:1}62%{left:20%;top:63%}66%{transform:scale(.85)}70%,100%{left:20%;top:63%;transform:none;opacity:1}}
@keyframes xrip{0%,64%{opacity:0;transform:scale(.4);left:calc(20% - 4px);top:calc(63% - 4px)}68%{opacity:1}80%,100%{opacity:0;transform:scale(2.2);left:calc(20% - 4px);top:calc(63% - 4px)}}

/* A3 */
.a3 .z-adc{position:relative;background:#fff;border-radius:9px;padding:6px 9px;box-shadow:0 0 0 1.5px #ffd02b inset}
.a3 .z-adc .z-lb{font-size:8px;font-weight:700;color:var(--mut)}
.a3 .z-adc b{display:block;font-size:10.5px;line-height:1.15;color:#1a0dab;margin:1px 0}
.a3 .z-adc small{display:block;font-size:8.5px;color:#007a33}
.a3 .z-sl{display:flex;gap:8px;margin-top:3px}.a3 .z-sl span{font-size:8.5px;color:#1a0dab;text-decoration:underline}
.a3 .z-org{display:flex;flex-direction:column;gap:4px;opacity:.6}.a3 .z-org i{height:7px;border-radius:3px;background:#dcd6ce}.a3 .z-org i:nth-child(2){width:70%}
.a3 .xc{left:40%;top:52%}
.a3 .z-clk{position:absolute;right:10px;top:46%;font-size:10px;font-weight:800;color:#fff;background:#2bc84a;border-radius:999px;padding:3px 8px}
.vC .st.cur .a3 .z-adc{animation:xslide 5.2s var(--ease) both;animation-delay:1.4s}
.vC .st.cur .a3 .xc{animation:xcur3 5.2s var(--ease) both}
.vC .st.cur .a3 .z-clk{animation:xclk 5.2s var(--spring) both}
@keyframes xcur3{0%,40%{left:95%;top:100%;opacity:0}48%{opacity:1}62%{left:40%;top:52%}66%{transform:scale(.85)}70%,100%{left:40%;top:52%;transform:none;opacity:1}}
@keyframes xclk{0%,66%{opacity:0;transform:translateY(8px) scale(.6)}76%,100%{opacity:1;transform:none}}

/* A4 */
.a4{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr;gap:8px;position:relative}
.a4 .z-kpi{display:flex;flex-direction:column;gap:6px;justify-content:center}
.a4 .z-kpi>div{background:#fff;border-radius:8px;padding:5px 9px;min-width:86px}
.a4 .z-kpi small{display:block;font-size:8px;color:var(--mut)}
.a4 .z-kpi b{font-size:15px;font-weight:800;letter-spacing:-.02em}
.a4 .z-kpi em{font-style:normal;font-size:8.5px;font-weight:700;color:#1a9e3a;margin-left:4px}.a4 .z-kpi em.z-dn{color:#1a9e3a}
.a4 .z-bars{position:relative;display:flex;align-items:flex-end;gap:5px;background:#fff;border-radius:8px;padding:8px 8px 6px}
.a4 .z-bars i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:linear-gradient(#4f9cf9,#8cc0ff);transform-origin:50% 100%}
.a4 .z-ln{position:absolute;right:16px;top:14px;width:calc(100% - 130px);height:calc(100% - 30px);overflow:visible}
.a4 .z-ln polyline{fill:none;stroke:#ff8f5a;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-dasharray:200;stroke-linecap:round}
.vC .st.cur .a4 .z-bars i{animation:xbar 5.2s var(--ease) both;animation-delay:calc(.2s + var(--d)*.12s)}
.vC .st.cur .a4 .z-ln polyline{animation:xdraw 5.2s ease both;animation-delay:1.2s}
.vC .st.cur .a4 .z-kpi>div{animation:xslide 5.2s var(--ease) both}
.vC .st.cur .a4 .z-kpi>div+div{animation-delay:.3s}
@keyframes xbar{0%{transform:scaleY(0)}18%,100%{transform:none}}
@keyframes xdraw{0%{stroke-dashoffset:200}30%,100%{stroke-dashoffset:0}}

/* B1 */
.b1{flex-direction:row;align-items:stretch;gap:7px;position:relative;background:linear-gradient(135deg,#efe9e1,#f8f5f0)}
.b1 .z-site{position:relative;flex:1;background:#fff;border-radius:7px;padding:5px;display:flex;flex-direction:column;gap:4px;box-shadow:0 6px 14px -10px rgba(0,0,0,.4)}
.b1 .z-hd{height:6px;border-radius:2px;background:var(--c)}
.b1 .z-im{flex:1;border-radius:4px;background:linear-gradient(140deg,color-mix(in srgb,var(--c) 45%,#fff),color-mix(in srgb,var(--c) 15%,#fff))}
.b1 .z-l1,.b1 .z-l2{height:4px;border-radius:2px;background:#e3ddd5}.b1 .z-l2{width:60%}
.b1 .z-stp{position:absolute;left:50%;top:44%;white-space:nowrap;font-style:normal;font-size:9px;font-weight:800;color:#fff;border-radius:5px;padding:3px 6px;transform:translate(-50%,-50%) rotate(-8deg);box-shadow:0 4px 8px -3px rgba(0,0,0,.35)}
.b1 .z-stp.z-ok{background:#1fb24a}.b1 .z-stp.z-no{background:#ef4b3f}
.b1 .z-lens{position:absolute;width:46px;height:46px;border-radius:50%;border:3px solid #161616;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.55),rgba(255,255,255,.1));left:10%;top:20%;box-shadow:0 6px 12px -4px rgba(0,0,0,.4);backdrop-filter:saturate(1.6) contrast(1.1)}
.b1 .z-lens::after{content:"";position:absolute;right:-13px;bottom:-9px;width:16px;height:5px;border-radius:3px;background:#161616;transform:rotate(40deg)}
.vC .st.cur .b1 .z-lens{animation:xlens 5.2s var(--ease) both}
.vC .st.cur .b1 .z-stp{animation:xstamp 5.2s var(--spring) both;animation-delay:calc(.7s + var(--d)*1.05s)}
@keyframes xlens{0%{left:6%;top:18%}20%{left:6%;top:18%}40%{left:40%;top:30%}60%{left:72%;top:16%}100%{left:72%;top:16%}}
@keyframes xstamp{0%,3%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(2)}10%,100%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}

/* B2 */
.b2{flex-direction:row;align-items:center;justify-content:center;gap:14px;background:linear-gradient(135deg,#fde9dc,#f6f3ee)}
.b2 .z-phone{position:relative;width:62px;height:112px;border-radius:13px;background:#161616;padding:4px;box-shadow:0 10px 18px -8px rgba(0,0,0,.45)}
.b2 .z-nt{position:absolute;left:50%;top:5px;width:16px;height:4px;border-radius:3px;background:#000;transform:translateX(-50%);z-index:2}
.b2 .z-scr{height:100%;border-radius:10px;background:#fff;overflow:hidden;padding:4px;display:flex;flex-direction:column;gap:3px}
.b2 .z-hero{height:34px;border-radius:6px;background:linear-gradient(150deg,#ff8f5a,#ffd02b)}
.b2 .z-t1,.b2 .z-t2{display:block;height:5px;border-radius:2px;background:#161616}.b2 .z-t2{width:70%;background:#bdb6ad}
.b2 .z-btn{align-self:flex-start;font-size:6px;font-weight:700;color:#fff;background:#ff8f5a;border-radius:999px;padding:2px 6px}
.b2 .z-g{display:grid;grid-template-columns:1fr 1fr;gap:3px;flex:1}.b2 .z-g i{border-radius:3px;background:#eee8e0}
.b2 .z-kit{display:flex;flex-direction:column;gap:6px;max-width:150px}
.b2 .z-sw{display:flex;gap:4px}.b2 .z-sw i{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff}
.b2 .z-aa{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1}
.b2 .z-tx{font-size:9.5px;line-height:1.25;color:#444;font-style:italic;background:#fff;border-radius:7px;padding:4px 7px;border-left:3px solid #ff8f5a}
.vC .st.cur .b2 .z-hero{animation:xph 5.2s var(--ease) both;animation-delay:.3s}
.vC .st.cur .b2 .z-t1,.vC .st.cur .b2 .z-t2{animation:xclip 5.2s steps(8) both;animation-delay:.9s}
.vC .st.cur .b2 .z-btn{animation:xpop2 5.2s var(--spring) both;animation-delay:1.6s}
.vC .st.cur .b2 .z-sw i{animation:xpop2 5.2s var(--spring) both}.vC .st.cur .b2 .z-sw i:nth-child(2){animation-delay:.15s}.vC .st.cur .b2 .z-sw i:nth-child(3){animation-delay:.3s}.vC .st.cur .b2 .z-sw i:nth-child(4){animation-delay:.45s}
.vC .st.cur .b2 .z-aa{animation:xfade 5.2s ease both;animation-delay:.7s}
.vC .st.cur .b2 .z-tx{animation:xclip 5.2s steps(16) both;animation-delay:1.3s}

/* B3 */
.b3{background:linear-gradient(135deg,#eef3fb,#f6f3ee)}
.b3 .z-cab{flex:1;background:#fff;border-radius:9px;padding:7px 9px;display:flex;flex-direction:column;gap:6px;box-shadow:0 6px 16px -10px rgba(0,0,0,.35)}
.b3 .z-row1{display:flex;align-items:center;gap:6px}
.b3 .z-ic{width:16px;height:16px;border-radius:5px;background:#fc3f1d;color:#fff;font:800 9px/16px var(--f);text-align:center}
.b3 .z-row1 b{flex:1;font-size:10px}
.b3 .z-tg{width:28px;height:16px;border-radius:999px;background:#2bc84a;position:relative}
.b3 .z-tg i{position:absolute;top:2px;left:14px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.b3 .z-kw{display:flex;flex-wrap:wrap;gap:4px}
.b3 .z-kw span{font-size:8.5px;font-weight:600;background:#e9f1ff;color:#1d4ed8;border-radius:5px;padding:2px 6px}
.b3 .z-kw span.z-neg{background:#ffe7e4;color:#d83a2c}
.b3 .z-bud{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px}
.b3 .z-bud small{font-size:8px;color:var(--mut)}.b3 .z-bud b{font-size:10px}
.b3 .z-bud .z-sl{position:relative;height:4px;border-radius:2px;background:#e6e0d8}
.b3 .z-bud .z-sl i{position:absolute;left:0;top:0;bottom:0;width:62%;border-radius:2px;background:#ffd02b}
.b3 .z-bud .z-sl i::after{content:"";position:absolute;right:-5px;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #ffd02b}
.vC .st.cur .b3 .z-tg{animation:xtgbg 5.2s ease both}
.vC .st.cur .b3 .z-tg i{animation:xtg 5.2s var(--spring) both}
.vC .st.cur .b3 .z-kw span{animation:xpop2 5.2s var(--spring) both;animation-delay:calc(.4s + var(--d)*.3s)}
.vC .st.cur .b3 .z-bud .z-sl i{animation:xsl 5.2s var(--ease) both;animation-delay:1.8s}
@keyframes xtgbg{0%,55%{background:#cfc8bf}60%,100%{background:#2bc84a}}
@keyframes xtg{0%,55%{left:2px}62%,100%{left:14px}}
@keyframes xsl{0%{width:15%}20%,100%{width:62%}}

/* B4 */
.b4{flex-direction:row;align-items:center;justify-content:center;background:linear-gradient(160deg,#2a2f45,#4b3b5c);position:relative}
.b4 .z-lock{width:82%;display:flex;flex-direction:column;gap:4px}
.b4 .tm{color:#fff;font-size:16px;font-weight:800;text-align:center;letter-spacing:-.02em;opacity:.9}
.b4 .z-ntf{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);border-radius:9px;padding:4px 8px}
.b4 .z-ntf .z-tg{flex:none;width:16px;height:16px;border-radius:50%;background:#2aabee;color:#fff;font-style:normal;font-size:8px;line-height:16px;text-align:center}
.b4 .z-ntf b{display:block;font-size:9.5px}.b4 .z-ntf small{display:block;font-size:8px;color:#555}
.b4 .z-badge{position:absolute;right:10px;top:8px;font-size:10px;font-weight:800;background:#2bc84a;color:#fff;border-radius:999px;padding:3px 8px}
.vC .st.cur .b4 .z-ntf{animation:xntf 5.2s var(--spring) both;animation-delay:calc(.5s + var(--d)*.9s)}
.vC .st.cur .b4 .z-badge{animation:xpop2 5.2s var(--spring) both;animation-delay:3.2s}
@keyframes xntf{0%{opacity:0;transform:translateY(-14px) scale(.9)}10%,100%{opacity:1;transform:none}}

/* C1 */
.c1 .z-sh{flex:1;background:#fff;border-radius:8px;overflow:hidden;font-size:9px;display:flex;flex-direction:column;box-shadow:0 6px 16px -10px rgba(0,0,0,.35)}
.c1 .z-hdr,.c1 .z-rw{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr}
.c1 .z-hdr{background:#1d6f42;color:#fff;font-weight:700}
.c1 .z-hdr span,.c1 .z-rw span{padding:3px 6px;border-right:1px solid var(--line);white-space:nowrap;overflow:hidden}
.c1 .z-rw{border-top:1px solid var(--line)}
.c1 .z-rw span.z-g{background:#d9f5df;color:#14772f;font-weight:700}.c1 .z-rw span.z-r{background:#ffe3e0;color:#c2372b;font-weight:700}
.c1 .z-note{margin-top:auto;padding:4px 6px;font-size:9px;white-space:nowrap;font-weight:700;color:#14772f;background:#f1faf3;border-top:1px solid var(--line)}
.vC .st.cur .c1 .z-rw{animation:xslide 5.2s var(--ease) both;animation-delay:calc(.3s + var(--d)*.35s)}
.vC .st.cur .c1 .z-rw span.z-g,.vC .st.cur .c1 .z-rw span.z-r{animation:xcell 5.2s ease both;animation-delay:2s}
.vC .st.cur .c1 .z-note{animation:xclip 5.2s steps(20) both;animation-delay:2.6s}
@keyframes xcell{0%,5%{background:#fff;color:inherit}15%,100%{}}

/* C2 */
.c2{padding:0}
.c2 .z-fg{flex:1;display:grid;grid-template-columns:42px 1fr 52px;background:#2c2c2c}
.c2 .z-lay,.c2 .z-pr{display:flex;flex-direction:column;gap:4px;padding:8px 5px}
.c2 .z-lay i{height:5px;border-radius:2px;background:#555}.c2 .z-lay i:nth-child(2){background:#0d99ff}
.c2 .z-pr i{height:12px;border-radius:3px;background:var(--c)}.c2 .z-pr small{font-size:7px;color:#bbb}
.c2 .z-cv{position:relative;background:#e5e5e5;display:grid;place-items:center}
.c2 .z-fr{position:relative;width:82%;height:76%;background:#fff;border-radius:3px;padding:6px 7px;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto auto 1fr;column-gap:6px;row-gap:3px}
.c2 .z-h{grid-column:1;font-size:10px;line-height:1.05;font-weight:800}
.c2 .z-tl{grid-column:1;height:4px;border-radius:2px;background:#cfcfcf}.c2 .z-tl.z-s{width:60%}
.c2 .z-bt{grid-column:1;align-self:start;justify-self:start;font-size:7px;font-weight:700;color:#fff;background:#ff8f5a;border-radius:999px;padding:2px 6px}
.c2 .z-pic{grid-column:2;grid-row:1/5;border-radius:4px;background:linear-gradient(150deg,#ffd02b,#ff8f5a)}
.c2 .z-sel{position:absolute;left:14%;top:20%;width:40%;height:22%;border:1.5px solid #0d99ff}
.c2 .z-sel i{position:absolute;width:5px;height:5px;background:#fff;border:1.5px solid #0d99ff}
.c2 .z-sel i:nth-child(1){left:-3px;top:-3px}.c2 .z-sel i:nth-child(2){right:-3px;top:-3px}.c2 .z-sel i:nth-child(3){left:-3px;bottom:-3px}.c2 .z-sel i:nth-child(4){right:-3px;bottom:-3px}
.c2 .xc{left:52%;top:42%}
.vC .st.cur .c2 .z-sel{animation:xsel 5.2s var(--ease) both}
.vC .st.cur .c2 .xc{animation:xcurc 5.2s var(--ease) both}
.vC .st.cur .c2 .z-pic{animation:xph 5.2s var(--ease) both;animation-delay:1.8s}
.vC .st.cur .c2 .z-bt{animation:xpop2 5.2s var(--spring) both;animation-delay:2.4s}
@keyframes xsel{0%,10%{width:0;height:0;opacity:0}12%{opacity:1}30%,100%{width:40%;height:22%;opacity:1}}
@keyframes xcurc{0%,10%{left:16%;top:22%}30%,100%{left:52%;top:42%}}

/* C3 */
.c3{position:relative}
.c3 .z-kl{background:#fff;border-radius:8px;padding:4px 0;box-shadow:0 6px 16px -10px rgba(0,0,0,.35)}
.c3 .z-k{display:flex;align-items:center;gap:7px;padding:2.5px 8px;font-size:9.5px}
.c3 .z-k span{flex:1}.c3 .z-k em{font-style:normal;font-size:8.5px;color:var(--mut)}
.c3 .z-cb{width:11px;height:11px;border-radius:3px;background:#2bc84a;position:relative}
.c3 .z-cb::after{content:"";position:absolute;left:3px;top:1px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.c3 .z-toast{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-size:10px;font-weight:800;color:#fff;background:#161616;border-radius:999px;padding:5px 12px;box-shadow:0 8px 16px -8px rgba(0,0,0,.5);white-space:nowrap}
.vC .st.cur .c3 .z-k{animation:xslide 5.2s var(--ease) both;animation-delay:calc(.2s + var(--d)*.3s)}
.vC .st.cur .c3 .z-cb{animation:xcb 5.2s ease both;animation-delay:1.6s}
.vC .st.cur .c3 .z-toast{animation:xtoast 5.2s var(--spring) both}
@keyframes xcb{0%,4%{background:#e3ddd5}10%,100%{background:#2bc84a}}
@keyframes xtoast{0%,55%{opacity:0;transform:translate(-50%,16px)}65%,100%{opacity:1;transform:translate(-50%,0)}}

/* C4 */
.c4{background:linear-gradient(160deg,#cfe3c6,#e7efd9)}
.c4 .z-chat{flex:1;display:flex;flex-direction:column;gap:4px;justify-content:center}
.c4 .z-m{max-width:78%;font-size:9.5px;line-height:1.25;border-radius:10px;padding:4px 8px;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.c4 .z-m.z-in{align-self:flex-start;background:#fff;border-bottom-left-radius:3px}
.c4 .z-m.z-in b{display:block;font-size:8px;color:#2aabee}
.c4 .z-m.z-out{align-self:flex-end;background:#effdde;border-bottom-right-radius:3px}
.c4 .z-rep{display:flex;align-items:center;gap:8px}
.c4 .z-mini{display:flex;align-items:flex-end;gap:2px;height:22px;width:40px}.c4 .z-mini i{flex:1;height:var(--h);background:#ff8f5a;border-radius:1px}
.c4 .z-rep b{color:#1a9e3a}
.vC .st.cur .c4 .z-m{animation:xslide 5.2s var(--ease) both;animation-delay:calc(.3s + var(--d)*1s)}

.sys[data-v2="1"] .e:not(.e1),.sys[data-v2="2"] .e:not(.e2),.sys[data-v2="3"] .e:not(.e3){display:none}
/* E1 */
.e1{padding:8px;position:relative}
.e1 .z-lp{flex:1;background:#fff;border-radius:9px;display:grid;grid-template-columns:1.15fr 1fr;gap:8px;padding:8px;box-shadow:0 6px 14px -10px rgba(0,0,0,.4)}
.e1 .z-h{display:block;font-size:12px;line-height:1.05;font-weight:800;letter-spacing:-.02em}
.e1 .z-s{display:block;font-size:7.5px;color:var(--mut);margin:4px 0 6px}
.e1 .z-bt{display:inline-block;font-size:8px;font-weight:700;color:#fff;background:#2f8fd8;border-radius:999px;padding:3px 9px}
.e1 .z-pic,.e2 .z-pic{position:relative;border-radius:7px;overflow:hidden;background:linear-gradient(160deg,#bfe3ff,#ffe1c7)}
.e1 .z-sun,.e2 .z-sun{position:absolute;right:7px;top:5px;width:11px;height:11px;border-radius:50%;background:#ffd02b}
.e1 .z-hill,.e2 .z-hill{position:absolute;left:-10%;right:-10%;bottom:-30%;height:60%;border-radius:50%;background:#7fd38f}
.e1 .z-man,.e2 .z-man{position:absolute;left:38%;bottom:0;width:20px;height:30px;border-radius:10px 10px 4px 4px;background:#4f9cf9}
.e1 .z-man::before,.e2 .z-man::before{content:"";position:absolute;left:4px;top:-10px;width:12px;height:12px;border-radius:50%;background:#f2c29b}
.e1 .z-cu{position:absolute;display:flex;align-items:flex-start;gap:1px;z-index:3;pointer-events:none}
.e1 .z-cu svg{width:12px;height:15px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.e1 .z-cu i{font-style:normal;font-size:7.5px;font-weight:700;color:#fff;border-radius:4px;padding:1px 5px;margin-top:10px;white-space:nowrap}
.e1 .z-ca{color:#ff8f5a;left:46%;top:6%}.e1 .z-ca i{background:#ff8f5a}
.e1 .z-cb{color:#4f9cf9;left:62%;top:58%}.e1 .z-cb i{background:#4f9cf9}
.vC .st.cur .e1 .z-h{animation:xclip 5.2s steps(16) both;animation-delay:.2s}
.vC .st.cur .e1 .z-s{animation:xclip 5.2s steps(16) both;animation-delay:1.2s}
.vC .st.cur .e1 .z-ca{animation:xca 5.2s var(--ease) both}
.vC .st.cur .e1 .z-pic{animation:xdrag 5.2s var(--ease) both}
.vC .st.cur .e1 .z-cb{animation:xcb2 5.2s var(--ease) both}
.vC .st.cur .e1 .z-bt{animation:xbt 5.2s ease both}
@keyframes xca{0%{left:4%;top:8%}22%{left:40%;top:22%}45%,100%{left:46%;top:6%}}
@keyframes xdrag{0%,25%{transform:translate(30px,-14px) rotate(4deg);opacity:.6}50%,100%{transform:none;opacity:1}}
@keyframes xcb2{0%,25%{left:84%;top:16%}50%{left:66%;top:40%}62%{left:22%;top:64%}66%{transform:scale(.85)}70%,100%{left:22%;top:64%;transform:none}}
@keyframes xbt{0%,64%{background:#cfc8bf}68%,100%{background:#2f8fd8}}
/* E2 */
.e2{padding:0;position:relative}
.e2 .z-lay{position:absolute;inset:0;padding:8px 9px;display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:1fr auto;gap:6px}
.e2 .z-wf{background:#eceae6}
.e2 .z-wf i{display:block;background:#c9c4bd;border-radius:3px}
.e2 .z-wf .z-h1{height:9px;width:90%}.e2 .z-wf .z-h2{height:9px;width:60%;margin-top:3px}.e2 .z-wf .z-l{height:5px;width:75%;margin-top:6px}.e2 .z-wf .z-b{height:12px;width:48%;border-radius:999px;margin-top:6px}
.e2 .z-wf .z-pic{background:repeating-linear-gradient(45deg,#d6d1ca 0 6px,#e0dcd6 6px 12px)}
.e2 .z-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.e2 .z-wf .z-cards i{height:16px}
.e2 .z-ds{background:#fff;clip-path:inset(0 0 0 0);z-index:1}
.e2 .z-ds b{display:block;font-size:11.5px;line-height:1.05;font-weight:800;letter-spacing:-.02em}
.e2 .z-ds small{display:block;font-size:7.5px;color:var(--mut);margin:3px 0 5px}
.e2 .z-ds span{display:inline-block;font-size:8px;font-weight:700;color:#fff;background:#ff8f5a;border-radius:999px;padding:3px 9px}
.e2 .z-ds .z-cards i{height:16px;border-radius:4px;font-style:normal;font-size:7.5px;font-weight:700;line-height:16px;text-align:center;color:#161616;background:color-mix(in srgb,var(--c) 22%,#fff);border-left:3px solid var(--c)}
.e2 em{position:absolute;right:8px;top:6px;font-style:normal;font-size:7.5px;font-weight:800;border-radius:999px;padding:1px 6px}
.e2 .z-wf em{background:#8f8a83;color:#fff}.e2 .z-ds em{background:#2bc84a;color:#fff}
.e2 .z-scan{position:absolute;top:0;bottom:0;left:100%;width:3px;background:#ff8f5a;box-shadow:0 0 12px 3px rgba(255,143,90,.7);opacity:0}
.vC .st.cur .e2 .z-ds{animation:xsweep 5.2s cubic-bezier(.5,0,.3,1) both}
.e2 .z-scan{z-index:2}
.vC .st.cur .e2 .z-scan{animation:xscan 5.2s cubic-bezier(.5,0,.3,1) both}
@keyframes xsweep{0%,20%{clip-path:inset(0 100% 0 0)}70%,100%{clip-path:inset(0 0 0 0)}}
@keyframes xscan{0%,20%{left:0;opacity:1}70%{left:calc(100% - 3px);opacity:1}76%,100%{left:calc(100% - 3px);opacity:0}}
/* E3 */
.e3{flex-direction:row;gap:8px;align-items:stretch}
.e3 .z-lib{display:flex;flex-direction:column;gap:4px;justify-content:center}
.e3 .z-lib span{font-size:8.5px;font-weight:700;border-radius:6px;padding:4px 8px;background:#fff;border-left:3px solid var(--c);box-shadow:0 2px 5px -3px rgba(0,0,0,.3);white-space:nowrap}
.e3 .z-pg{flex:1;background:#fff;border-radius:8px;padding:5px;display:flex;flex-direction:column;gap:3px;box-shadow:0 6px 14px -10px rgba(0,0,0,.4);min-width:0}
.e3 .z-bk{flex:1;border-radius:5px;display:flex;align-items:center;gap:5px;padding:0 7px;min-height:0;font-size:8.5px;white-space:nowrap;overflow:hidden}
.e3 .z-b-of{background:#fff1e8}.e3 .z-b-of b{flex:1;font-size:9.5px;font-weight:800}.e3 .z-b-of span{font-size:7px;font-weight:700;color:#fff;background:#ff8f5a;border-radius:999px;padding:2px 6px}
.e3 .z-b-be{background:#eaf2ff;justify-content:space-around}.e3 .z-b-be i{font-style:normal;width:16px;height:16px;border-radius:50%;background:#4f9cf9;color:#fff;font-size:8px;line-height:16px;text-align:center}
.e3 .z-b-rv{background:#fff8dd;color:#f2b400;font-weight:700}.e3 .z-b-rv small{color:#555;font-weight:500;font-style:italic}
.e3 .z-b-fm{background:#e9f9ed}.e3 .z-b-fm i{flex:1;height:10px;border-radius:3px;background:#fff;border:1px solid #cde9d3}.e3 .z-b-fm span{font-size:7px;font-weight:700;color:#fff;background:#2bc84a;border-radius:4px;padding:2px 6px}
.vC .st.cur .e3 .z-lib span{animation:xlib 5.2s ease both;animation-delay:calc(.2s + var(--d)*.9s)}
.vC .st.cur .e3 .z-bk{animation:xbk 5.2s var(--spring) both;animation-delay:calc(.5s + var(--d)*.9s)}
@keyframes xlib{0%{background:#fff}6%{background:color-mix(in srgb,var(--c) 30%,#fff);transform:translateX(4px)}14%,100%{background:#fff;transform:none}}
@keyframes xbk{0%{opacity:0;transform:translateX(-30px) scale(.9)}10%,100%{opacity:1;transform:none}}

/* правки этапов */
.x .z-ya{flex:none;width:16px;height:16px;display:block}
.x .z-srch .z-qt{flex:1;width:auto;max-width:none}
.vC .st.cur .x .z-srch .z-qt{animation:xtype2 5.2s steps(18) both}
@keyframes xtype2{0%{clip-path:inset(0 100% 0 0)}30%,100%{clip-path:inset(0 0 0 0)}}
.a3{gap:6px;padding:9px}
.a3 .z-adc{position:relative;padding:6px 8px 5px;margin-top:6px}
.a3 .z-adc b{font-size:9px;line-height:1.2}.a3 .z-adc small{font-size:7.5px}.a3 .z-adc .z-lb{font-size:7px}
.a3 .z-sl{margin-top:2px;gap:7px}.a3 .z-sl span{font-size:7.5px}
.a3 .z-clk{position:absolute;right:6px;top:-9px;bottom:auto;font-size:8.5px;padding:2px 7px;box-shadow:0 4px 8px -4px rgba(0,0,0,.4)}
.c4 .z-chat{gap:4px;justify-content:center;padding-bottom:6px}.c4 .z-m{font-size:9px;padding:3px 8px;max-width:92%}.c4 .z-mini{height:16px}.c4 .z-m.z-out{white-space:nowrap}
.c1 .z-rw span,.c1 .z-hdr span{font-size:8px;padding:2px 5px;line-height:1.3}.c1 .z-note{font-size:8px!important;padding:2px 6px!important}.c1{padding:7px}
.e3 .z-b-of b{min-width:0;font-size:8.5px}.e3 .z-bk{overflow:visible}.e3 .z-b-of span{flex:none}
/* ===== этап 3: варианты ===== */

.f .f-ya{flex:none;width:16px;height:16px;display:block}
.f .f-cur{position:absolute;width:14px;height:18px;z-index:4;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));pointer-events:none}
/* F0 */
.f0{padding:10px;gap:10px;position:relative;justify-content:center}
.f0 .f-srch{display:flex;align-items:center;gap:7px;height:26px;border-radius:9px;background:#fff;border:1.5px solid #ffd02b;padding:0 4px 0 6px;flex:none}
.f0 .f-qt{flex:1;min-width:0;font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden}
.f0 .f-sb{flex:none;font-size:9px;font-weight:700;background:#ffd02b;border-radius:6px;padding:3px 7px}
.f0 .f-ad{position:relative;background:#fff;border-radius:9px;padding:6px 9px 7px;box-shadow:0 0 0 1.5px #ffd02b inset}
.f0 .f-lb{display:block;font-size:7.5px;font-weight:700;color:var(--mut)}
.f0 .f-ad b{display:block;font-size:10px;line-height:1.2;color:#1a0dab;margin-top:1px}
.f0 .f-clk{position:absolute;right:6px;top:-9px;font-size:8.5px;font-weight:800;color:#fff;background:#2bc84a;border-radius:999px;padding:2px 7px;box-shadow:0 4px 8px -4px rgba(0,0,0,.4)}
.f0 .f-org{display:flex;flex-direction:column;gap:4px;opacity:.55}.f0 .f-org i{height:6px;border-radius:3px;background:#dcd6ce}.f0 .f-org i:nth-child(2){width:65%}
.f0 .f-cur{left:46%;top:56%}
.f0 .f-rip{position:absolute;left:calc(46% - 6px);top:calc(56% - 6px);width:16px;height:16px;border-radius:50%;border:2px solid #ffd02b;opacity:0}
.vC .st.cur .f0 .f-qt{animation:xtype2 5.2s steps(20) both}
.vC .st.cur .f0 .f-ad{animation:xslide 5.2s var(--ease) both;animation-delay:1.5s}
.vC .st.cur .f0 .f-cur{animation:fcur0 5.2s var(--ease) both}
.vC .st.cur .f0 .f-rip{animation:frip 5.2s ease both}
.vC .st.cur .f0 .f-clk{animation:fclk 5.2s var(--spring) both}
@keyframes fcur0{0%,40%{left:96%;top:100%;opacity:0}48%{opacity:1}62%{left:46%;top:56%}66%{transform:scale(.85)}70%,100%{left:46%;top:56%;transform:none;opacity:1}}
@keyframes frip{0%,64%{opacity:0;transform:scale(.4)}68%{opacity:1}82%,100%{opacity:0;transform:scale(2.4)}}
@keyframes fclk{0%,68%{opacity:0;transform:translateY(8px) scale(.6)}78%,100%{opacity:1;transform:none}}
/* F1 */
@property --n1{syntax:'<integer>';inherits:false;initial-value:1240}
@property --n2{syntax:'<integer>';inherits:false;initial-value:86}
@property --n3{syntax:'<integer>';inherits:false;initial-value:7}
.f1{background:linear-gradient(135deg,#eef3fb,#f6f3ee)}
.f1 .f-cab{flex:1;background:#fff;border-radius:9px;padding:7px 9px;display:flex;flex-direction:column;gap:5px;box-shadow:0 6px 16px -10px rgba(0,0,0,.35);justify-content:center}
.f1 .f-top{display:flex;align-items:center;gap:6px}
.f1 .f-ic{width:16px;height:16px;border-radius:5px;background:#fc3f1d;color:#fff;font:800 9px/16px var(--f);text-align:center}
.f1 .f-top b{flex:1;font-size:10px;white-space:nowrap;overflow:hidden}
.f1 .f-tg{flex:none;width:28px;height:16px;border-radius:999px;background:#2bc84a;position:relative}
.f1 .f-tg i{position:absolute;top:2px;left:14px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.f1 .f-st{display:flex;align-items:center;gap:5px;font-size:8.5px;font-weight:600;color:#14772f}
.f1 .f-st i{width:7px;height:7px;border-radius:50%;background:#2bc84a}
.f1 .f-off{display:none;color:var(--mut)}
.f1 .f-met{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.f1 .f-met div{background:#f6f3ee;border-radius:6px;padding:3px 6px}
.f1 .f-met small{display:block;font-size:7.5px;color:var(--mut)}
.f1 .f-met b{font-size:13px;font-weight:800;letter-spacing:-.02em}
.f1 .f-lead{background:#e9f9ed!important}.f1 .f-lead b{color:#14772f}
.f1 .f-n1{counter-reset:a var(--n1)}.f1 .f-n1::after{content:counter(a)}
.f1 .f-n2{counter-reset:b var(--n2)}.f1 .f-n2::after{content:counter(b)}
.f1 .f-n3{counter-reset:c var(--n3)}.f1 .f-n3::after{content:"+" counter(c)}
.vC .st.cur .f1 .f-tg{animation:xtgbg 5.2s ease both}
.vC .st.cur .f1 .f-tg i{animation:xtg 5.2s var(--spring) both}
.vC .st.cur .f1 .f-st{animation:fst 5.2s ease both}
.vC .st.cur .f1 .f-off{animation:foff 5.2s steps(1) both}.vC .st.cur .f1 .f-on{animation:fon 5.2s steps(1) both}
.vC .st.cur .f1 .f-n1{animation:fn1 5.2s ease-out both}.vC .st.cur .f1 .f-n2{animation:fn2 5.2s ease-out both}.vC .st.cur .f1 .f-n3{animation:fn3 5.2s ease-out both}
@keyframes fst{0%,58%{color:var(--mut)}62%,100%{color:#14772f}}
@keyframes foff{0%{display:inline}60%,100%{display:none}}
@keyframes fon{0%{display:none}60%,100%{display:inline}}
@keyframes fn1{0%,60%{--n1:0}100%{--n1:1240}}
@keyframes fn2{0%,65%{--n2:0}100%{--n2:86}}
@keyframes fn3{0%,75%{--n3:0}100%{--n3:7}}
/* F2 */
.f2{flex-direction:row;align-items:center;gap:10px;background:linear-gradient(135deg,#fdf0e6,#f6f3ee);padding:6px 10px}
.f2 .f-ph{position:relative;flex:none;width:62px;height:100%;max-height:112px;border-radius:12px;background:#161616;padding:3px;box-shadow:0 8px 14px -8px rgba(0,0,0,.45)}
.f2 .f-scr{position:relative;height:100%;border-radius:9px;background:#fff;overflow:hidden;padding:4px;display:flex;flex-direction:column;gap:3px}
.f2 .f-ms{display:flex;align-items:center;gap:2px;border:1px solid #ffd02b;border-radius:5px;padding:1px 2px}
.f2 .f-ms .f-ya{width:8px;height:8px}.f2 .f-ms i{font-style:normal;font-size:4.5px;font-weight:600;white-space:nowrap;overflow:hidden}
.f2 .f-mad{border-radius:5px;box-shadow:0 0 0 1px #ffd02b inset;padding:3px 4px;display:flex;flex-direction:column;gap:1px}
.f2 .f-mad span{font-size:4px;color:var(--mut);font-weight:700}
.f2 .f-mad b{font-size:6px;line-height:1.1;color:#1a0dab}
.f2 .f-mad em{align-self:flex-start;font-style:normal;font-size:5px;font-weight:700;color:#fff;background:#ff8f5a;border-radius:999px;padding:1px 4px;margin-top:1px}
.f2 .f-ml{display:block;height:4px;border-radius:2px;background:#e3ddd5}.f2 .f-ml.s{width:60%}
.f2 .f-done{position:absolute;inset:0;background:#2bc84a;color:#fff;font-size:7.5px;font-weight:800;line-height:1.2;display:grid;place-items:center;text-align:center;opacity:0}
.f2 .f-tap{position:absolute;left:24px;top:52%;width:14px;height:14px;border-radius:50%;background:rgba(255,143,90,.6);opacity:0}
.f2 .f-side{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.f2 .f-step{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:600;line-height:1.2;background:#fff;border-radius:7px;padding:4px 7px}
.f2 .f-step i{flex:none;width:14px;height:14px;border-radius:50%;background:#161616;color:#fff;font-style:normal;font-size:8px;line-height:14px;text-align:center}
.vC .st.cur .f2 .f-step{animation:fstep 5.2s ease both;animation-delay:calc(var(--d)*1.3s)}
.vC .st.cur .f2 .f-mad{animation:xslide 5.2s var(--ease) both;animation-delay:1.2s}
.vC .st.cur .f2 .f-tap{animation:ftap 5.2s ease both}
.vC .st.cur .f2 .f-done{animation:fdone 5.2s ease both}
@keyframes fstep{0%{opacity:.35;transform:none}6%{opacity:1;transform:translateX(4px);box-shadow:0 0 0 2px #ff8f5a}20%,100%{opacity:1;transform:none;box-shadow:none}}
@keyframes ftap{0%,52%{opacity:0;transform:scale(.4)}56%{opacity:1;transform:scale(1)}64%,100%{opacity:0;transform:scale(1.8)}}
@keyframes fdone{0%,60%{opacity:0}66%,100%{opacity:1}}
/* F3 */
.f3{flex-direction:row;gap:8px;align-items:stretch;background:linear-gradient(135deg,#eef3fb,#f6f3ee)}
.f3 .f-form{flex:1;display:flex;flex-direction:column;gap:4px;justify-content:center;min-width:0}
.f3 .f-form label{display:block;background:#fff;border-radius:6px;padding:2px 7px;box-shadow:0 0 0 1px #e3ddd5 inset}
.f3 .f-form small{display:block;font-size:7px;color:var(--mut)}
.f3 .f-form b{display:block;font-size:8.5px;font-weight:600;white-space:nowrap;overflow:hidden}
.f3 .f-pv{flex:1.05;background:#fff;border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;justify-content:center;gap:5px;box-shadow:0 6px 14px -10px rgba(0,0,0,.4);min-width:0;position:relative}
.f3 .f-pvt[hidden]{display:none}.f3 .f-pvt{display:flex;align-items:center;gap:5px;font-size:7.5px;color:var(--mut)}
.f3 .f-pad{border-radius:6px;box-shadow:0 0 0 1.5px #ffd02b inset;padding:4px 7px}
.f3 .f-lb{display:block;font-size:7px;font-weight:700;color:var(--mut)}
.f3 .f-p1{display:block;font-size:10px;color:#1a0dab;line-height:1.15}
.f3 .f-p2{display:block;font-size:8px;color:#333;line-height:1.2}
.f3 .f-ok{align-self:flex-start;font-size:8px;font-weight:800;color:#fff;background:#2bc84a;border-radius:999px;padding:2px 8px}
.vC .st.cur .f3 .f-t1,.vC .st.cur .f3 .f-p1{animation:xclip 5.2s steps(17) both;animation-delay:.2s}
.vC .st.cur .f3 .f-t2,.vC .st.cur .f3 .f-p2{animation:xclip 5.2s steps(19) both;animation-delay:1.2s}
.vC .st.cur .f3 .f-t3{animation:xclip 5.2s steps(7) both;animation-delay:2.2s}
.vC .st.cur .f3 .f-ok{animation:xpop2 5.2s var(--spring) both;animation-delay:3.1s}
/* этап 4: одинаковые отступы сверху и снизу */
.c4{padding:10px!important}.c4 .z-chat{justify-content:space-between!important;padding:0!important;gap:4px}
/* ===== этап 3: настройка Директа, три варианта ===== */
.sys .g3{display:none}
.g{background:linear-gradient(135deg,#eef3fb,#f6f3ee);--D:6.4s}.g1{--D:13s}
.g .g-cb{flex:none;width:10px;height:10px;border-radius:3px;background:#2bc84a;position:relative;display:inline-block}
.g .g-cb::after{content:"";position:absolute;left:3px;top:1px;width:2.5px;height:5px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.g .g-tg{flex:none;display:inline-block;width:24px;height:14px;border-radius:999px;background:#2bc84a;position:relative;vertical-align:middle}
.g .g-tg i{position:absolute;top:2px;left:12px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.g .g-ic{display:inline-block;width:12px;height:12px;border-radius:4px;background:#fc3f1d;color:#fff;font:800 7px/12px var(--f);text-align:center;margin-right:4px;vertical-align:-2px}
/* G1 */
.g1{gap:6px}
.g1 .g-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.g1 .g-steps span{font-size:7.5px;font-weight:700;text-align:center;color:#fff;background:#2bc84a;border-radius:4px;padding:2px 0;white-space:nowrap;overflow:hidden}
.g1 .g-scr{position:relative;flex:1;background:#fff;border-radius:8px;box-shadow:0 6px 14px -10px rgba(0,0,0,.4);min-height:0}
.g1 .g-s{position:absolute;inset:0;padding:6px 8px;display:flex;flex-direction:column;justify-content:center;gap:4px;opacity:0}
.g1 .g-s4{opacity:1}
.g1 .g-kw{display:flex;align-items:center;gap:5px;font-size:8.5px;white-space:nowrap}.g1 .g-kw em{margin-left:auto;font-style:normal;font-size:7.5px;color:var(--mut)}
.g1 .g-neg{color:#d83a2c}.g1 .g-x{flex:none;width:10px;height:10px;border-radius:3px;background:#ffe3e0;color:#d83a2c;font:800 9px/10px var(--f);text-align:center;font-style:normal}
.g1 .g-ad{border-radius:6px;box-shadow:0 0 0 1.5px #ffd02b inset;padding:4px 7px}.g1 .g-ad span{display:block;font-size:7px;color:var(--mut);font-weight:700}.g1 .g-ad b{font-size:9.5px;line-height:1.2;color:#1a0dab}
.g1 .g-row{display:flex;align-items:center;gap:6px;font-size:8.5px}.g1 .g-row small{flex:none;font-size:7.5px;color:var(--mut)}.g1 .g-row b{font-size:9px;white-space:nowrap}
.g1 .g-sl{flex:1;height:4px;border-radius:2px;background:#e6e0d8;position:relative}.g1 .g-sl i{position:absolute;left:0;top:0;bottom:0;width:64%;border-radius:2px;background:#ffd02b}
.g1 .g-on{display:flex;align-items:center;gap:6px;font-size:9px;color:#14772f}
.g1 .g-met{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.g1 .g-met div{background:#f6f3ee;border-radius:5px;padding:2px 5px}.g1 .g-met small{display:block;font-size:6.5px;color:var(--mut)}.g1 .g-met b{font-size:11px}.g1 .g-ld{background:#e9f9ed!important}.g1 .g-ld b{color:#14772f}
.vC .st.cur .g1 .g-steps span{animation:gstep var(--D) steps(1) both}.vC .st.cur .g1 .g-steps span:nth-child(2){animation-delay:3.1s}.vC .st.cur .g1 .g-steps span:nth-child(3){animation-delay:6.5s}.vC .st.cur .g1 .g-steps span:nth-child(4){animation-delay:8.6s}
.vC .st.cur .g1 .g-s1{animation:gs1 var(--D) ease both}
.vC .st.cur .g1 .g-s2{animation:gs2 var(--D) ease both}
.vC .st.cur .g1 .g-s3{animation:gs3 var(--D) ease both}
.vC .st.cur .g1 .g-s4{animation:gs4 var(--D) ease both}
.vC .st.cur .g1 .g-s1 .g-kw{animation:xslide 5.2s var(--ease) both;animation-delay:.3s}.vC .st.cur .g1 .g-s1 .g-kw:nth-child(2){animation-delay:1s}.vC .st.cur .g1 .g-s1 .g-kw:nth-child(3){animation-delay:1.7s}
.vC .st.cur .g1 .g-s2 .g-ad b{animation:gtype 13s steps(40) both;animation-delay:3.5s}
@keyframes gtype{0%{clip-path:inset(0 100% 0 0)}9%,100%{clip-path:inset(0 0 0 0)}}
.vC .st.cur .g1 .g-sl i{animation:gsl var(--D) var(--ease) both}
.vC .st.cur .g1 .g-tg{animation:g1tgbg var(--D) ease both}.vC .st.cur .g1 .g-tg i{animation:g1tg var(--D) var(--spring) both}
@keyframes g1tgbg{0%,75%{background:#cfc8bf}77%,100%{background:#2bc84a}}@keyframes g1tg{0%,75%{left:2px}78%,100%{left:12px}}
@keyframes gstep{0%{background:#d9d3cb;color:#6b655e}0.1%,100%{background:#2bc84a;color:#fff}}
@keyframes gs1{0%,1%{opacity:0}3%,22%{opacity:1}24%,100%{opacity:0}}
@keyframes gs2{0%,23%{opacity:0;transform:translateX(12px)}26%,48%{opacity:1;transform:none}50%,100%{opacity:0}}
@keyframes gs3{0%,49%{opacity:0;transform:translateX(12px)}52%,64%{opacity:1;transform:none}66%,100%{opacity:0}}
@keyframes gs4{0%,65%{opacity:0;transform:translateX(12px)}68%,100%{opacity:1;transform:none}}
@keyframes gsl{0%,53%{width:12%}61%,100%{width:64%}}
@keyframes gtgbg{0%,68%{background:#cfc8bf}71%,100%{background:#2bc84a}}
@keyframes gtg{0%,68%{left:2px}73%,100%{left:12px}}
/* G2 */
.g2{position:relative;padding:8px 10px}
.g2 .g-w{position:absolute;left:calc(22px - var(--d)*4px);right:calc(22px - var(--d)*4px);top:calc(8px + var(--d)*12px);height:calc(100% - 52px);min-height:40px;background:#fff;border-radius:7px;box-shadow:0 6px 14px -6px rgba(0,0,0,.35);overflow:hidden}
.g2 .g-wt{display:flex;align-items:center;font-size:8px;font-weight:700;background:#f1ede7;padding:2px 6px}
.g2 .g-wb{font-size:9px;padding:6px 8px;white-space:nowrap;overflow:hidden;display:flex;align-items:center;gap:4px}
.g2 .g-neg{font-size:7.5px;font-weight:600;background:#ffe7e4;color:#d83a2c;border-radius:4px;padding:1px 5px}
.g2 .g-gr{color:#14772f}
.vC .st.cur .g2 .g-w{animation:gwin var(--D) var(--spring) both;animation-delay:calc(.2s + var(--d)*1.35s)}
.vC .st.cur .g2 .g-w:last-child .g-tg{animation:gtgbg2 var(--D) ease both}.vC .st.cur .g2 .g-w:last-child .g-tg i{animation:gtg2 var(--D) var(--spring) both}
@keyframes gwin{0%{opacity:0;transform:translateY(16px) scale(.92)}9%,100%{opacity:1;transform:none}}
@keyframes gtgbg2{0%,80%{background:#cfc8bf}84%,100%{background:#2bc84a}}
@keyframes gtg2{0%,80%{left:2px}86%,100%{left:12px}}
/* G3 */
.g3{flex-direction:row;gap:8px;align-items:stretch}
.g3 .g-cl{flex:1.15;background:#fff;border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;justify-content:center;gap:4px;box-shadow:0 6px 14px -10px rgba(0,0,0,.4);min-width:0}
.g3 .g-it{display:flex;align-items:center;gap:6px;font-size:8.5px;white-space:nowrap}
.g3 .g-pn{flex:.85;background:#fff;border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;justify-content:center;gap:4px;box-shadow:0 6px 14px -10px rgba(0,0,0,.4);min-width:0}
.g3 .g-pn small{font-size:7.5px;color:var(--mut)}
.g3 .g-bar{height:6px;border-radius:3px;background:#e6e0d8;overflow:hidden}.g3 .g-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ffd02b,#2bc84a)}
@property --gp{syntax:'<integer>';inherits:false;initial-value:100}
.g3 .g-pc{font-size:14px;font-weight:800;counter-reset:gp var(--gp)}.g3 .g-pc::after{content:counter(gp) "%"}
.g3 .g-on{display:flex;align-items:center;gap:5px;font-size:8.5px;font-weight:700;color:#14772f}
.vC .st.cur .g3 .g-cb{animation:gcb var(--D) ease both;animation-delay:calc(.3s + var(--d)*1.1s)}
.vC .st.cur .g3 .g-it{animation:git var(--D) ease both;animation-delay:calc(.3s + var(--d)*1.1s)}
.vC .st.cur .g3 .g-bar i{animation:gbar var(--D) linear both}
.vC .st.cur .g3 .g-pc{animation:gpc var(--D) linear both}
.vC .st.cur .g3 .g-tg{animation:gtgbg var(--D) ease both}.vC .st.cur .g3 .g-tg i{animation:gtg var(--D) var(--spring) both}
@keyframes gcb{0%,2%{background:#e3ddd5}6%,100%{background:#2bc84a}}
@keyframes git{0%{color:#9a948c}5%,100%{color:#161616}}
@keyframes gbar{0%{width:0}75%,100%{width:100%}}
@keyframes gpc{0%{--gp:0}75%,100%{--gp:100}}
.vC .path .st{cursor:pointer}.vC .path .st:not(.cur):hover{border-color:color-mix(in srgb,var(--yellow) 45%,var(--dk-line))}
/* мастер: запуск рекламы с растущими цифрами */
@property --m1{syntax:'<integer>';inherits:false;initial-value:1240}
@property --m2{syntax:'<integer>';inherits:false;initial-value:86}
@property --m3{syntax:'<integer>';inherits:false;initial-value:7}
.g1 .g-n1{counter-reset:m1 var(--m1)}.g1 .g-n1::after{content:counter(m1)}
.g1 .g-n2{counter-reset:m2 var(--m2)}.g1 .g-n2::after{content:counter(m2)}
.g1 .g-n3{counter-reset:m3 var(--m3)}.g1 .g-n3::after{content:"+" counter(m3)}
.g1 .g-on{position:relative}
.g1 .g-lbl{position:relative;display:inline-grid}.g1 .g-lbl span{grid-area:1/1;white-space:nowrap}
.g1 .g-l1{opacity:0;color:#161616}.g1 .g-l2{color:#14772f}
.g1 .g-cur{position:absolute;left:14px;top:6px;width:12px;height:15px;opacity:0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.vC .st.cur .g1 .g-l1{animation:gl1 var(--D) steps(1) both}.vC .st.cur .g1 .g-l2{animation:gl2 var(--D) steps(1) both}
.vC .st.cur .g1 .g-cur{animation:gcur var(--D) var(--ease) both}
.vC .st.cur .g1 .g-n1{animation:gm1 var(--D) linear both}.vC .st.cur .g1 .g-n2{animation:gm2 var(--D) linear both}.vC .st.cur .g1 .g-n3{animation:gm3 var(--D) linear both}
.vC .st.cur .g1 .g-ld{animation:gld var(--D) ease both}
@keyframes gl1{0%{opacity:1}76%,100%{opacity:0}}
@keyframes gl2{0%{opacity:0}76%,100%{opacity:1}}
@keyframes gcur{0%,69%{opacity:0;transform:translate(60px,22px)}71%{opacity:1}74%{opacity:1;transform:none}75%{transform:scale(.85)}77%{transform:none;opacity:1}84%,100%{opacity:0}}
@keyframes gm1{0%,77%{--m1:0}97%,100%{--m1:1240}}
@keyframes gm2{0%,79%{--m2:0}97%,100%{--m2:86}}
@keyframes gm3{0%,82%{--m3:0}97%,100%{--m3:7}}
@keyframes gld{0%,84%{box-shadow:none}88%{box-shadow:0 0 0 2px #2bc84a}100%{box-shadow:none}}
.e1 .e-tooth{background:radial-gradient(circle at 50% 40%,#d9f3f0,#9fd8e8 70%,#7cc4dc);display:grid;place-items:center}.e1 .e-tooth svg{width:86%;height:86%;filter:drop-shadow(0 4px 6px rgba(20,80,110,.25))}.e1 .e-sp{transform-box:fill-box;transform-origin:center;animation:esp 2.4s ease-in-out infinite}.e1 .e-sp.s2{animation-delay:1.2s}@keyframes esp{0%,100%{opacity:.3;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
.vC .walker{pointer-events:auto;cursor:grab;touch-action:none;z-index:3}.vC .walker:hover{transform:scale(1.12)}.vC .walker.drag{cursor:grabbing;transition:none!important;transform:scale(1.18);box-shadow:0 0 0 2px var(--yellow),0 0 0 6px var(--dk),0 10px 20px -6px rgba(0,0,0,.6)}
.sys .xsw{border-color:var(--dk-line)}.sys .xsw span{color:var(--dk-muted)}.sys .xsw button{color:var(--dk-ink)}.sys .xsw button[aria-pressed="true"]{background:var(--dk3);box-shadow:none}

/* кнопка «Смотреть кейс» — заметная плашка */
.pmore,.pd-card .pmore,.pe-body .pmore,.pg-more .pmore{display:inline-flex;align-items:center;gap:12px;margin:26px 0 4px 0;padding:8px 8px 8px 22px;border:0;border-radius:999px;background:var(--orange);color:#fff;font:700 16px var(--f);text-decoration:none;box-shadow:0 10px 22px -14px rgba(0,0,0,.45);transition:transform .25s var(--ease),box-shadow .25s}
.pmore .pm-ar{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--orange);font-size:16px;transition:transform .3s var(--ease)}
.pmore:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(0,0,0,.55)}
.pmore:hover .pm-ar{transform:translateX(3px)}
.pc-open .pmore{color:#fff}

/* ===== этапы работы: три набора подробных анимаций ===== */
.wk[data-wa="A"] .wq:not(.wqa):not(.wqx),.wk[data-wa="B"] .wq:not(.wqb):not(.wqx),.wk[data-wa="C"] .wq:not(.wqc):not(.wqx){display:none}
.wq{position:absolute;inset:0;padding:14px;font-family:var(--f);color:#161616;--D:6s;box-sizing:border-box}
.wq *{box-sizing:border-box}
.wq .q-av{display:block;border-radius:50%;background:#ccc center/cover}
.wq .q-ya{width:16px;height:16px;flex:none}
.wq .q-tooth{display:block;width:80%;height:80%;filter:drop-shadow(0 3px 4px rgba(20,80,110,.25))}
.q-site{display:grid;grid-template-columns:1.1fr 1fr;gap:6px;background:#fff;padding:7px;border-radius:6px}
.q-sh b{display:block;font-size:11px;line-height:1.05;font-weight:800}.q-sh small{display:block;font-size:7px;color:#8a8580;margin:3px 0 5px}
.q-sh span{display:inline-block;font-size:7px;font-weight:700;color:#fff;background:#2f8fd8;border-radius:999px;padding:2px 7px}
.q-simg{border-radius:5px;background:radial-gradient(circle at 50% 40%,#d9f3f0,#9fd8e8 70%);display:grid;place-items:center}
.wk .cur .wq [style*="--d"]{animation-delay:calc(var(--d)*.8s)}

/* ---------- A ---------- */
.wqa{background:linear-gradient(160deg,#f3f0eb,#e6e1da)}
/* A1 звонок */
.wqa.q1{display:grid;grid-template-columns:1.25fr 1fr;gap:9px}
.q1 .q-call{position:relative;background:#1d1f24;border-radius:10px;padding:6px;display:grid;grid-template-rows:1fr 1fr auto;gap:5px}
.q1 .q-tile{position:relative;border-radius:7px;display:grid;place-items:center;overflow:hidden}
.q1 .q-cl{background:linear-gradient(150deg,#3a4256,#2a2f3b)}.q1 .q-me{background:#2a2f3b}
.q1 .q-ini{font-style:normal;width:34px;height:34px;border-radius:50%;background:#ff8fc4;color:#fff;font:800 13px/34px var(--f);text-align:center}
.q1 .q-me .q-av{width:34px;height:34px}
.q1 .q-tile small{position:absolute;left:5px;bottom:3px;font-size:7px;color:#fff;background:rgba(0,0,0,.4);border-radius:3px;padding:0 4px}
.q1 .q-wv{position:absolute;right:6px;top:6px;display:flex;gap:1.5px;align-items:center;height:12px}.q1 .q-wv i{width:2px;height:40%;background:#2bc84a;border-radius:1px}
.q1 .q-cl{box-shadow:0 0 0 2px #2bc84a inset}
.q1 .q-bar{display:flex;align-items:center;gap:5px;color:#fff;font-size:7.5px}
.q1 .q-rec{color:#ff5b4e;font-weight:800}.q1 .q-t{font-variant-numeric:tabular-nums;font-size:9px}
.q1 .q-btns{margin-left:auto;display:flex;gap:3px}.q1 .q-btns i{width:12px;height:12px;border-radius:50%;background:#3a3d44}.q1 .q-btns .q-end{background:#ff4b3e}
.q1 .q-notes{background:#fff8c4;border-radius:4px;padding:9px 9px;box-shadow:0 8px 14px -8px rgba(0,0,0,.35);transform:rotate(1.5deg);display:flex;flex-direction:column;gap:5px}
.q1 .q-notes b{font-size:10px}.q1 .q-notes p{margin:0;font-size:8.5px;line-height:1.25}
.wk .cur .q1 .q-wv i{animation:qwave .5s ease-in-out infinite alternate}.wk .cur .q1 .q-wv i:nth-child(2){animation-delay:.15s}.wk .cur .q1 .q-wv i:nth-child(3){animation-delay:.3s}.wk .cur .q1 .q-wv i:nth-child(4){animation-delay:.1s}
.wk .cur .q1 .q-notes p{animation:xslide var(--D) var(--ease) both;animation-delay:calc(.8s + var(--d)*1.1s)!important}
.wk .cur .q1 .q-rec{animation:qblink 1s steps(1) infinite}
@keyframes qwave{to{height:100%}}@keyframes qblink{50%{opacity:.2}}
/* A2 документ */
.wqa.q2{display:grid;grid-template-columns:1.35fr 1fr;gap:8px;align-items:start}
.q2 .q-doc{background:#fff;border-radius:6px;padding:10px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:6px;height:100%}
.q2 .q-dt{display:flex;align-items:center;gap:5px;font-size:8px;color:#8a8580}.q2 .q-gd{width:11px;height:13px;border-radius:2px;background:#4285f4}
.q2 .q-h1{font-size:12px;font-weight:800;line-height:1.2}
.q2 mark{background:linear-gradient(#fff27a,#fff27a) no-repeat 0 85%/100% 45%;color:inherit}
.q2 .q-ln{display:block;height:5px;border-radius:3px;background:#e3ddd5}.q2 .q-ln.s{width:75%}.q2 .q-ln.m{width:55%}
.q2 .q-cmts{display:flex;flex-direction:column;gap:6px;padding-top:18px}
.q2 .q-cm{background:#fff;border-radius:7px;padding:5px 7px;font-size:8.5px;line-height:1.25;border-left:3px solid #ffd02b;box-shadow:0 4px 10px -6px rgba(0,0,0,.35)}
.q2 .q-cm b{display:block;font-size:7.5px;color:#8a8580}.q2 .q-c2{border-color:#2bc84a}
.q2 .q-ok{position:absolute;right:14px;bottom:14px;font-size:9px;font-weight:800;color:#fff;background:#2bc84a;border-radius:999px;padding:4px 10px}
.wk .cur .q2 .q-c1{animation:xslide var(--D) var(--ease) both;animation-delay:.6s}
.wk .cur .q2 mark{animation:qmark var(--D) ease both}
.wk .cur .q2 .q-c2{animation:xslide var(--D) var(--ease) both;animation-delay:2.4s}
.wk .cur .q2 .q-ok{animation:xpop2 var(--D) var(--spring) both;animation-delay:3.6s}
@keyframes qmark{0%,40%{background-size:0 45%;opacity:0}46%{opacity:1}56%,100%{background-size:100% 45%;opacity:1}}
/* A3 устройства */
.wqa.q3{display:flex;align-items:center;justify-content:center;gap:10px}
.q3 .q-lap{width:200px}
.q3 .q-lsc{border:6px solid #1d1f24;border-bottom-width:8px;border-radius:8px 8px 0 0;background:#fff}
.q3 .q-lb{display:block;height:8px;margin:0 -14px;border-radius:0 0 8px 8px;background:linear-gradient(#cfd2d8,#9fa3aa)}
.q3 .q-site .q-simg{height:68px}
.q3 .q-mob{width:58px;height:116px;border-radius:12px;background:#1d1f24;padding:4px}
.q3 .q-msc{height:100%;border-radius:9px;background:#fff;padding:5px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.q3 .q-mh b{display:block;font-size:7px;line-height:1.1;font-weight:800}.q3 .q-mh span{display:inline-block;margin-top:3px;font-size:5.5px;font-weight:700;color:#fff;background:#2f8fd8;border-radius:999px;padding:1px 5px}
.q3 .q-mimg{height:34px;border-radius:5px;background:radial-gradient(circle at 50% 40%,#d9f3f0,#9fd8e8 70%);display:grid;place-items:center}
.q3 .q-msc>i{display:block;height:4px;border-radius:2px;background:#e3ddd5}.q3 .q-msc>i.s{width:60%}
.q3 .q-tag{position:absolute;right:14px;top:12px;font-size:8.5px;font-weight:800;color:#fff;background:#2bc84a;border-radius:999px;padding:3px 9px}
.wk .cur .q3 .q-sh b,.wk .cur .q3 .q-mh b{animation:xclip var(--D) steps(10) both;animation-delay:.3s}
.wk .cur .q3 .q-simg,.wk .cur .q3 .q-mimg{animation:xph var(--D) var(--ease) both;animation-delay:1.3s}
.wk .cur .q3 .q-sh span,.wk .cur .q3 .q-mh span{animation:xpop2 var(--D) var(--spring) both;animation-delay:2s}
.wk .cur .q3 .q-mob{animation:qmob var(--D) var(--spring) both}
.wk .cur .q3 .q-tag{animation:xpop2 var(--D) var(--spring) both;animation-delay:3.2s}
@keyframes qmob{0%,30%{opacity:0;transform:translateX(30px) rotate(8deg)}42%,100%{opacity:1;transform:none}}
/* A4 Директ */
.wqa.q4{display:flex}
.q4 .q-cab{position:relative;flex:1;background:#fff;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:7px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.q4 .q-ct{display:flex;align-items:center;gap:6px;font-size:10px}
.q4 .q-kws{display:flex;flex-wrap:wrap;gap:4px}.q4 .q-kws span{font-size:8.5px;font-weight:600;background:#e9f1ff;color:#1d4ed8;border-radius:5px;padding:2px 6px}.q4 .q-kws .q-neg{background:#ffe7e4;color:#d83a2c}
.q4 .q-adp{border-radius:7px;box-shadow:0 0 0 1.5px #ffd02b inset;padding:6px 8px}.q4 .q-adp small{display:block;font-size:7.5px;font-weight:700;color:#8a8580}.q4 .q-adp b{display:block;font-size:10.5px;line-height:1.2;color:#1a0dab}.q4 .q-adp i{font-style:normal;font-size:8px;color:#007a33}
.q4 .q-mod{align-self:flex-start;font-size:9px;font-weight:800;color:#fff;background:#2bc84a;border-radius:999px;padding:3px 10px}
.wk .cur .q4 .q-kws span{animation:xpop2 var(--D) var(--spring) both;animation-delay:calc(.3s + var(--d)*.4s)!important}
.wk .cur .q4 .q-adp{animation:xslide var(--D) var(--ease) both;animation-delay:2s}
.wk .cur .q4 .q-adp b{animation:xclip var(--D) steps(24) both;animation-delay:2.3s}
.wk .cur .q4 .q-mod{animation:xpop2 var(--D) var(--spring) both;animation-delay:3.8s}
/* A5 метрика */
.wqa.q5{display:flex;flex-direction:column;gap:8px}
.q5 .q-mt{flex:1;background:#fff;border-radius:10px;padding:9px;display:grid;grid-template-columns:auto 1fr;gap:9px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.q5 .q-kp{display:flex;flex-direction:column;gap:6px;justify-content:center}.q5 .q-kp div{background:#f6f3ee;border-radius:7px;padding:5px 8px}
.q5 .q-kp small{display:block;font-size:7.5px;color:#8a8580}.q5 .q-kp b{font-size:16px;font-weight:800;color:#14772f}.q5 .q-kp .q-dn{color:#d6531d}.q5 .q-kp i{display:block;font-style:normal;font-size:7px;color:#8a8580;text-decoration:line-through}
.q5 .q-ch{position:relative}.q5 .q-bars{position:absolute;inset:4px 0 0;display:flex;align-items:flex-end;gap:4px}.q5 .q-bars i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:linear-gradient(#4f9cf9,#8cc0ff);transform-origin:50% 100%}
.q5 .q-ch svg{position:absolute;inset:4px 0 0;width:100%;height:calc(100% - 4px);overflow:visible}.q5 .q-ch polyline{fill:none;stroke:#ff8f5a;stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-dasharray:200;stroke-linecap:round}
.q5 .q-ntf{display:flex;align-items:center;gap:6px;background:#161616;color:#fff;font-size:9px;font-weight:600;border-radius:999px;padding:5px 11px;align-self:flex-start}.q5 .q-dot{width:7px;height:7px;border-radius:50%;background:#2bc84a}
.wk .cur .q5 .q-bars i{animation:xbar var(--D) var(--ease) both;animation-delay:calc(.2s + var(--d)*.18s)!important}
.wk .cur .q5 .q-ch polyline{animation:xdraw var(--D) ease both;animation-delay:1.2s}
.wk .cur .q5 .q-ntf{animation:qntf var(--D) var(--spring) both}
@keyframes qntf{0%,45%{opacity:0;transform:translateY(12px)}52%,100%{opacity:1;transform:none}}

/* ---------- B мессенджер ---------- */
.wqb{background:linear-gradient(170deg,#cfe3c6,#e3ecd2);padding:10px}
.wqb .q-chat{height:100%;display:flex;flex-direction:column;gap:5px;justify-content:flex-end}
.wqb .q-hd{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.9);padding:6px 10px;font-size:10px}
.wqb .q-hd .q-av{width:20px;height:20px}.wqb .q-hd small{margin-left:auto;font-size:8px;color:#2aabee}
.wqb .q-tg{width:20px;height:20px;border-radius:50%;background:#2aabee;display:grid;place-items:center;font-style:normal}.wqb .q-tg svg{width:12px;height:12px}
.wqb .q-m{max-width:82%;font-size:10px;line-height:1.25;border-radius:11px;padding:5px 9px;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.wqb .q-in{align-self:flex-start;background:#fff;border-bottom-left-radius:3px}
.wqb .q-out{align-self:flex-end;background:#effdde;border-bottom-right-radius:3px}
.wqb .q-call,.wqb .q-file{display:flex;align-items:center;gap:7px;align-self:center;background:#fff}
.wqb .q-ph{font-style:normal;width:22px;height:22px;border-radius:50%;background:#2bc84a;display:grid;place-items:center;font-size:11px}
.wqb .q-call b,.wqb .q-file b{display:block;font-size:9.5px}.wqb .q-call small,.wqb .q-file small{font-size:8px;color:#8a8580}
.wqb .q-file{align-self:flex-start}.wqb .q-docic{font-style:normal;width:22px;height:26px;border-radius:4px;background:#2b579a;color:#fff;font:800 11px/26px var(--f);text-align:center}
.wqb .q-img{padding:4px;width:62%}.wqb .q-img .q-site{box-shadow:0 0 0 1px #eee inset}.wqb .q-img .q-simg{height:44px}.wqb .q-img small{display:block;font-size:8px;color:#8a8580;padding:3px 3px 0}
.wqb .q-adm small{display:block;font-size:7.5px;font-weight:700;color:#8a8580}.wqb .q-adm b{color:#1a0dab;font-size:10px}.wqb .q-adm{box-shadow:0 0 0 1.5px #ffd02b inset}
.wqb .q-lead b{display:block;font-size:9.5px}.wqb .q-lead{font-size:9px}
.wqb .q-rep{display:flex;align-items:center;gap:6px}.wqb .q-rep .q-av{width:18px;height:18px;flex:none}.wqb .q-rep b{color:#14772f}
.wk .cur .wqb .q-m{animation:qmsg var(--D) var(--spring) both;animation-delay:calc(.2s + var(--d)*1s)!important}
@keyframes qmsg{0%{opacity:0;transform:translateY(10px) scale(.92)}8%,100%{opacity:1;transform:none}}

/* ---------- C предметы ---------- */
.wqc{background:linear-gradient(160deg,#d8c4a8,#c9b18f)}
.wqc::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px)}
/* C1 блокнот, телефон, кофе */
.q1 .q-desk{position:relative;height:100%}
.q1 .q-pad{position:absolute;left:4px;top:6px;width:150px;height:180px;background:#fffdf4;border-radius:4px;padding:14px 12px 10px 20px;transform:rotate(-4deg);box-shadow:0 10px 18px -8px rgba(0,0,0,.45);background-image:repeating-linear-gradient(#fffdf4 0 17px,#cfe0f0 17px 18px)}
.q1 .q-pad::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:1px;background:#f1a3a3}
.q1 .q-pad b{display:block;font:700 12px/18px 'Comic Sans MS','Segoe Print',cursive;color:#1d3c8a}
.q1 .q-pad p{margin:0;font:12px/18px 'Comic Sans MS','Segoe Print',cursive;color:#1d3c8a;white-space:nowrap;overflow:hidden}
.q1 .q-pen{position:absolute;right:-18px;bottom:22px;width:70px;height:7px;border-radius:3px;background:linear-gradient(90deg,#222 0 12%,#2f8fd8 12%);transform:rotate(-35deg)}
.q1 .q-phone{position:absolute;right:16px;top:14px;width:84px;height:160px;border-radius:16px;background:#1d1f24;padding:5px;transform:rotate(5deg);box-shadow:0 12px 20px -8px rgba(0,0,0,.5)}
.q1 .q-cam{position:absolute;left:50%;top:7px;width:20px;height:5px;border-radius:3px;background:#000;transform:translateX(-50%);z-index:2}
.q1 .q-ps{height:100%;border-radius:12px;background:linear-gradient(170deg,#3c4a6b,#1f2638);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#fff}
.q1 .q-pi{width:34px;height:34px;border-radius:50%;background:#ff8fc4;font:800 12px/34px var(--f);text-align:center}
.q1 .q-pt{font-size:12px;font-variant-numeric:tabular-nums}.q1 .q-ps small{font-size:7px;opacity:.8}
.q1 .q-endb{width:20px;height:20px;border-radius:50%;background:#ff4b3e;margin-top:6px}
.q1 .q-cup{position:absolute;left:150px;bottom:6px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,#5a3a22 0 45%,#fff 47% 62%,#eee 64%);box-shadow:0 6px 10px -4px rgba(0,0,0,.4)}
.q1 .q-st{position:absolute;left:14px;top:-26px;width:6px;height:22px;border-radius:50%;border-left:2px solid rgba(255,255,255,.7);opacity:.6}.q1 .q-st.s2{left:22px;top:-30px}
.wk .cur .q1 .q-pad p{animation:xclip var(--D) steps(16) both;animation-delay:calc(.4s + var(--d)*1.2s)!important}
.wk .cur .q1 .q-pen{animation:qpen 1.2s ease-in-out infinite alternate}
.wk .cur .q1 .q-st{animation:qsteam 2.4s ease-in-out infinite}.wk .cur .q1 .q-st.s2{animation-delay:1.2s}
@keyframes qpen{to{transform:rotate(-30deg) translate(-6px,-14px)}}
@keyframes qsteam{0%{opacity:0;transform:translateY(8px)}50%{opacity:.7}100%{opacity:0;transform:translateY(-8px)}}
/* C2 бумага с правкой */
.wqc.q2{display:grid;place-items:center}
.q2 .q-paper{position:relative;width:240px;height:178px;background:#fff;border-radius:3px;padding:18px 16px;transform:rotate(-2deg);box-shadow:0 14px 22px -10px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:8px}
.q2 .q-ph1{font-size:13px;font-weight:800;color:#9a948c}.q2 .q-ph1 s{text-decoration-color:#e0352b;text-decoration-thickness:2px}
.q2 .q-hand{font:13px/1.2 'Comic Sans MS','Segoe Print',cursive;color:#e0352b;font-style:normal}
.q2 .q-pl{display:block;height:5px;border-radius:3px;background:#e9e4dd}.q2 .q-pl.s{width:70%}
.q2 .q-stamp{position:absolute;right:14px;bottom:16px;font:900 12px var(--f);letter-spacing:.08em;color:#1fa045;border:3px solid #1fa045;border-radius:6px;padding:3px 8px;transform:rotate(-12deg);opacity:.85}
.q2 .q-redpen{position:absolute;right:-10px;top:40px;width:80px;height:8px;border-radius:4px;background:linear-gradient(90deg,#e0352b 0 80%,#333 80%);transform:rotate(-28deg)}
.wk .cur .q2 .q-ph1{animation:qph1 var(--D) ease both}
.wk .cur .q2 .q-hand{animation:xclip var(--D) steps(28) both;animation-delay:1.2s}
.wk .cur .q2 .q-stamp{animation:qstamp var(--D) cubic-bezier(.2,1.6,.4,1) both;animation-delay:3.4s}
.wk .cur .q2 .q-redpen{animation:qredpen var(--D) ease-in-out both}
@keyframes qph1{0%{color:#161616}15%,100%{color:#9a948c}}
@keyframes qstamp{0%{opacity:0;transform:rotate(-12deg) scale(2.4)}8%,100%{opacity:.85;transform:rotate(-12deg) scale(1)}}
@keyframes qredpen{0%{transform:rotate(-28deg) translate(0,0)}25%{transform:rotate(-28deg) translate(-150px,0)}45%{transform:rotate(-28deg) translate(-40px,6px)}60%,100%{transform:rotate(-28deg) translate(0,0)}}
/* C3 инструменты дизайнера */
.wqc.q3{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center}
.q3 .q-tools{display:flex;flex-direction:column;gap:10px;align-items:center;position:relative;z-index:1}
.q3 .q-sw{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#fff;border-radius:8px;padding:6px;box-shadow:0 6px 12px -6px rgba(0,0,0,.4)}.q3 .q-sw i{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.q3 .q-font{background:#fff;border-radius:8px;padding:5px 10px;font-size:20px;font-weight:800;text-align:center;line-height:1;box-shadow:0 6px 12px -6px rgba(0,0,0,.4)}.q3 .q-font small{display:block;font-size:7px;font-weight:500;color:#8a8580}
.q3 .q-board{position:relative;z-index:1;background:#f6f3ee;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 18px -8px rgba(0,0,0,.45)}
.q3 .q-b1 .q-simg{height:56px}
.q3 .q-b2{display:flex;justify-content:space-around;background:#eaf2ff;border-radius:6px;padding:5px}.q3 .q-b2 i{font-style:normal;width:20px;height:20px;border-radius:50%;background:#2f8fd8;color:#fff;font-size:10px;line-height:20px;text-align:center}
.q3 .q-b3{background:#fff8dd;border-radius:6px;padding:5px;color:#f2b400;font-size:11px;text-align:center}
.q3 .q-ruler{position:absolute;left:10px;bottom:10px;width:120px;height:12px;background:repeating-linear-gradient(90deg,#333 0 1px,transparent 1px 6px) 0 0/100% 5px no-repeat,#f2d36b;border-radius:2px;transform:rotate(-8deg);z-index:0}
.wk .cur .q3 .q-blk{animation:qblk var(--D) var(--spring) both;animation-delay:calc(.3s + var(--d)*.9s)!important}
.wk .cur .q3 .q-sw i{animation:xpop2 var(--D) var(--spring) both}
@keyframes qblk{0%{opacity:0;transform:translateX(-60px) rotate(-6deg)}10%,100%{opacity:1;transform:none}}
/* C4 доска со стикерами */
.wqc.q4{display:flex}
.q4 .q-kan{flex:1;background:#fafaf7;border-radius:8px;padding:9px;display:grid;grid-template-columns:1.2fr 1fr;gap:9px;box-shadow:0 10px 18px -8px rgba(0,0,0,.45);position:relative;z-index:1}
.q4 .q-col{background:#efece6;border-radius:6px;padding:7px;display:flex;flex-direction:column;gap:6px}
.q4 .q-col b{font-size:9px;color:#6b655e}
.q4 .q-sti{display:block;font-size:10px;font-weight:600;background:var(--c);padding:7px 8px;transform:rotate(var(--r));box-shadow:0 4px 6px -3px rgba(0,0,0,.3)}
.q4 .q-camp{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;background:#fff;border-radius:6px;padding:8px;color:#14772f}
.q4 .q-tgl{width:26px;height:15px;border-radius:999px;background:#2bc84a;position:relative}.q4 .q-tgl i{position:absolute;top:2px;left:13px;width:11px;height:11px;border-radius:50%;background:#fff}
.wk .cur .q4 .q-sti{animation:qsti var(--D) var(--spring) both;animation-delay:calc(.2s + var(--d)*.6s)!important}
.wk .cur .q4 .q-camp{animation:xpop2 var(--D) var(--spring) both;animation-delay:2.8s}
.wk .cur .q4 .q-tgl{animation:gtgbg var(--D) ease both}.wk .cur .q4 .q-tgl i{animation:qtg var(--D) var(--spring) both}
@keyframes qsti{0%{opacity:0;transform:translateY(-30px) rotate(calc(var(--r)*4))}9%,100%{opacity:1;transform:rotate(var(--r))}}
@keyframes qtg{0%,68%{left:2px}73%,100%{left:13px}}
/* C5 воронка */
.wqc.q5{display:grid;grid-template-columns:1fr 92px;gap:10px;align-items:center}
.q5 .q-fun{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.q5 .q-lv{width:var(--w);display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:6px;padding:7px 9px;font-size:9px;box-shadow:0 6px 10px -6px rgba(0,0,0,.35)}
.q5 .q-lv b{font-size:12px}.q5 .q-lv:nth-child(3){background:#2bc84a;color:#fff}
.q5 .q-drops{position:absolute;inset:0;pointer-events:none}.q5 .q-drops i{position:absolute;left:var(--x);top:0;width:7px;height:7px;border-radius:50%;background:#2f8fd8;opacity:0}
.q5 .q-cpl{position:relative;z-index:1;background:#fff;border-radius:8px;padding:8px;box-shadow:0 6px 10px -6px rgba(0,0,0,.35)}.q5 .q-cpl small{display:block;font-size:8px;color:#8a8580}.q5 .q-cpl b{font-size:13px;color:#14772f}.q5 .q-cpl s{display:block;font-size:9px;color:#b44;font-weight:600}
.wk .cur .q5 .q-lv{animation:xslide var(--D) var(--ease) both}.wk .cur .q5 .q-lv:nth-child(2){animation-delay:.4s}.wk .cur .q5 .q-lv:nth-child(3){animation-delay:.8s}
.wk .cur .q5 .q-drops i{animation:qdrop 2.4s ease-in infinite;animation-delay:var(--d)}
.wk .cur .q5 .q-cpl{animation:xpop2 var(--D) var(--spring) both;animation-delay:2.4s}
@keyframes qdrop{0%{top:0;opacity:0;background:#2f8fd8}15%{opacity:1}75%{background:#2f8fd8}85%{top:80%;background:#2bc84a;opacity:1}100%{top:84%;opacity:0}}

.wvx>*:not(.wq){display:none!important}
.wk .wasw{border-color:var(--dk-line)}.wk .wasw span{color:var(--dk-muted)}.wk .wasw button{color:var(--dk-ink)}.wk .wasw button[aria-pressed="true"]{background:var(--dk3);box-shadow:none}

/* ===== этап 1: доработанный созвон ===== */
.wq.wqx{background:linear-gradient(160deg,#f3f0eb,#e6e1da);display:grid;grid-template-columns:1.25fr 1fr;gap:9px}
.q1 .q-me .q-wv{display:flex}
.q1 .q-tile{transition:box-shadow .3s}
.wqx .q-bar{gap:4px;white-space:nowrap}.wqx .q-rec{font-size:7px}.q1 .q-b{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#3a3d44;color:#e8e8e8;position:relative;font-style:normal}
.q1 .q-b svg{width:9px;height:9px}
.q1 .q-btns{gap:3px}.q1 .q-btns .q-end{background:#ff4b3e;color:#fff}.q1 .q-end svg{width:11px;height:11px}
.q1 .q-chatb em{position:absolute;right:-4px;top:-4px;font-style:normal;font-size:6px;font-weight:800;background:#ff4b3e;color:#fff;border-radius:999px;min-width:9px;height:9px;line-height:9px;text-align:center;opacity:0}
.q1 .q-share{background:#3a3d44}
.wk .cur .wqx .q-cl{animation:qspk1 var(--D) steps(1) infinite}
.wk .cur .wqx .q-me{animation:qspk2 var(--D) steps(1) infinite}
.wk .cur .wqx .q-cl .q-wv{animation:qwv1 var(--D) steps(1) infinite}.wk .cur .wqx .q-me .q-wv{animation:qwv2 var(--D) steps(1) infinite}
.wk .cur .wqx .q-share{animation:qshare var(--D) ease both}
.wk .cur .wqx .q-chatb em{animation:qbadge var(--D) var(--spring) both}
@keyframes qspk1{0%,48%{box-shadow:0 0 0 2px #2bc84a inset}50%,100%{box-shadow:none}}
@keyframes qspk2{0%,48%{box-shadow:none}50%,100%{box-shadow:0 0 0 2px #2bc84a inset}}
@keyframes qwv1{0%,48%{opacity:1}50%,100%{opacity:0}}
@keyframes qwv2{0%,48%{opacity:0}50%,100%{opacity:1}}
@keyframes qshare{0%,55%{background:#3a3d44}58%,100%{background:#2f8fd8}}
@keyframes qbadge{0%,70%{opacity:0;transform:scale(.3)}76%,100%{opacity:1;transform:none}}
.wq:not(.wqx) .q-wv{display:flex}

/* ===== этапы 2–5: новые варианты ===== */
.wq.r2a,.wq.r2b,.wq.r2c,.wq.r3a,.wq.r3b,.wq.r3c,.wq.r4a,.wq.r4b,.wq.r4c,.wq.r5a,.wq.r5b,.wq.r5c{background:linear-gradient(160deg,#f3f0eb,#e6e1da)}
.wk .cur .wq [style*="--d"]{animation-delay:calc(var(--d)*.6s)}
/* 2A */
.r2a{display:flex;flex-direction:column;gap:10px;position:relative}
.r2a .r-chips{display:flex;flex-wrap:wrap;gap:5px}
.r2a .r-chips span{font-size:9.5px;font-weight:700;background:#fff;border:1.5px dashed #2f8fd8;color:#2f8fd8;border-radius:6px;padding:3px 7px;opacity:.35}
.r2a .r-hero{flex:1;background:#fff;border-radius:10px;padding:12px;display:flex;flex-direction:column;justify-content:center;gap:6px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.r2a .r-hero b{font-size:18px;line-height:1.1;font-weight:800;letter-spacing:-.02em}.r2a .r-hero small{font-size:10px;color:#6b655e}
.r2a .r-hero i{font-style:normal;display:inline-block}
.r2a .r-hero span{align-self:flex-start;font-size:9px;font-weight:700;color:#fff;background:#2f8fd8;border-radius:999px;padding:4px 11px}
.r2a .r-like{position:absolute;right:14px;bottom:14px;font-size:9px;font-weight:700;background:#2bc84a;color:#fff;border-radius:999px;padding:4px 10px}
.wk .cur .r2a .r-chips span{animation:r2chip var(--D) ease both;animation-delay:calc(.2s + var(--d)*.6s)!important}
.wk .cur .r2a .r-hero i{animation:r2fly var(--D) var(--spring) both;animation-delay:calc(.5s + var(--d)*.6s)!important}
.wk .cur .r2a .r-hero span{animation:xpop2 var(--D) var(--spring) both;animation-delay:3s}
.wk .cur .r2a .r-like{animation:xpop2 var(--D) var(--spring) both;animation-delay:3.8s}
@keyframes r2chip{0%{opacity:1;background:#e9f3ff}12%,100%{opacity:.35;background:#fff}}
@keyframes r2fly{0%{opacity:0;transform:translateY(-46px) scale(.8)}12%,100%{opacity:1;transform:none}}
/* 2B */
.r2b{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:stretch}
.r2b .r-card{background:#fff;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:7px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.r2b .r-card small{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#8a8580}
.r2b .r-card p{margin:0;flex:1;font-size:11px;line-height:1.3}
.r2b .r-old p{color:#8a8580}.r2b .r-new{box-shadow:0 0 0 2px #2bc84a inset,0 8px 16px -10px rgba(0,0,0,.4)}.r2b .r-new b{color:#14772f}
.r2b .r-meter{height:7px;border-radius:4px;background:#ece7e0;overflow:hidden}.r2b .r-meter i{display:block;height:100%;width:var(--v);border-radius:4px;background:#ef4b3f}.r2b .r-new .r-meter i{background:#2bc84a}
.r2b .r-card em{font-style:normal;font-size:9px;font-weight:700;color:#c2372b}.r2b .r-new em{color:#14772f}
.wk .cur .r2b .r-meter i{animation:r2m var(--D) var(--ease) both}.wk .cur .r2b .r-new .r-meter i{animation-delay:2s}
.wk .cur .r2b .r-new{animation:r2new var(--D) var(--ease) both}
.wk .cur .r2b .r-new p{animation:xclip var(--D) steps(24) both;animation-delay:1.3s}
@keyframes r2m{0%,8%{width:0}24%,100%{width:var(--v)}}
@keyframes r2new{0%,16%{opacity:0;transform:translateX(20px)}24%,100%{opacity:1;transform:none}}
/* 2C */
.r2c{display:flex;flex-direction:column;gap:7px;justify-content:center}
.r2c .r-pair{display:grid;grid-template-columns:1fr 14px 1.25fr;align-items:center;gap:5px}
.r2c .r-q{font-size:10px;font-style:italic;color:#555;background:#fff;border-radius:10px 10px 10px 3px;padding:6px 8px;box-shadow:0 3px 8px -5px rgba(0,0,0,.35)}
.r2c .r-ar{font-style:normal;color:#2f8fd8;font-weight:800;text-align:center}
.r2c .r-a{font-size:10px;font-weight:700;color:#14456e;background:#e5f1fb;border-left:3px solid #2f8fd8;border-radius:5px;padding:6px 8px}
.r2c .r-cap{font-size:8.5px;color:#8a8580;text-align:center}
.wk .cur .r2c .r-q{animation:xslide var(--D) var(--ease) both;animation-delay:calc(.2s + var(--d)*1.1s)!important}
.wk .cur .r2c .r-a{animation:r2a2 var(--D) var(--ease) both;animation-delay:calc(.7s + var(--d)*1.1s)!important}
@keyframes r2a2{0%{opacity:0;transform:translateX(-14px)}10%,100%{opacity:1;transform:none}}
/* 3A */
.r3a{padding:0}
.r3a .r-lay{position:absolute;inset:0;padding:14px;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr auto;gap:8px}
.r3a .r-wf{background:#ebe8e3}.r3a .r-wf i{display:block;background:#c9c4bd;border-radius:3px}
.r3a .r-wf .h{height:14px;width:92%}.r3a .r-wf .h.s{width:60%;margin-top:4px}.r3a .r-wf .t{height:7px;width:75%;margin-top:9px}.r3a .r-wf .b{height:18px;width:48%;border-radius:999px;margin-top:9px}
.r3a .r-wf .r-p{border-radius:8px;background:repeating-linear-gradient(45deg,#d6d1ca 0 7px,#e0dcd6 7px 14px)}
.r3a .r-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.r3a .r-wf .r-cards i{height:26px}
.r3a .r-ds{background:#fff;z-index:1}
.r3a .r-ds b{display:block;font-size:17px;line-height:1.05;font-weight:800;letter-spacing:-.02em}.r3a .r-ds small{display:block;font-size:9px;color:#8a8580;margin:5px 0 8px}
.r3a .r-ds span{display:inline-block;font-size:9px;font-weight:700;color:#fff;background:#2f8fd8;border-radius:999px;padding:4px 11px}
.r3a .r-ds .r-p{border-radius:8px;background:radial-gradient(circle at 50% 40%,#d9f3f0,#9fd8e8 70%);display:grid;place-items:center}
.r3a .r-ds .r-cards i{height:26px;border-radius:6px;font-style:normal;font-size:9px;font-weight:700;line-height:26px;text-align:center;background:#eaf3fb;border-left:3px solid #2f8fd8}
.r3a em{position:absolute;right:12px;top:10px;font-style:normal;font-size:8px;font-weight:800;border-radius:999px;padding:2px 8px}.r3a .r-wf em{background:#8f8a83;color:#fff}.r3a .r-ds em{background:#2bc84a;color:#fff}
.r3a .r-scan{position:absolute;top:0;bottom:0;left:100%;width:3px;background:#2f8fd8;box-shadow:0 0 14px 4px rgba(47,143,216,.6);opacity:0;z-index:2}
.wk .cur .r3a .r-ds{animation:r3sw var(--D) cubic-bezier(.5,0,.3,1) both}
.wk .cur .r3a .r-scan{animation:r3sc var(--D) cubic-bezier(.5,0,.3,1) both}
@keyframes r3sw{0%,20%{clip-path:inset(0 100% 0 0)}65%,100%{clip-path:inset(0 0 0 0)}}
@keyframes r3sc{0%,20%{left:0;opacity:1}65%{left:calc(100% - 3px);opacity:1}72%,100%{opacity:0}}
/* 3B */
.r3b{display:grid;place-items:center}
.r3b .r-win{width:272px;height:197px;background:#fff;border-radius:9px;overflow:hidden;box-shadow:0 10px 20px -10px rgba(0,0,0,.45);display:flex;flex-direction:column}
.r3b .r-bar{display:flex;align-items:center;gap:4px;padding:5px 8px;background:#efebe5}.r3b .r-bar i{width:6px;height:6px;border-radius:50%;background:#ff5f57}.r3b .r-bar i:nth-child(2){background:#febc2e}.r3b .r-bar i:nth-child(3){background:#28c840}
.r3b .r-px{margin-left:auto;font-size:8px;font-weight:700;color:#2f8fd8}.r3b .r-px::after{content:"375 px"}
.r3b .r-pg{flex:1;padding:8px;display:grid;grid-template-columns:1fr;gap:6px;align-content:start}
.r3b .r-hd b{display:block;font-size:13px;line-height:1.1;font-weight:800}.r3b .r-hd small{display:block;font-size:8px;color:#8a8580;margin:3px 0 5px}.r3b .r-hd span{display:inline-block;font-size:8px;font-weight:700;color:#fff;background:#2f8fd8;border-radius:999px;padding:3px 9px}
.r3b .r-im{height:52px;border-radius:7px;background:radial-gradient(circle at 50% 40%,#d9f3f0,#9fd8e8 70%);display:grid;place-items:center}.r3b .r-im .q-tooth{height:90%}
.r3b .r-ft{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.r3b .r-ft i{height:14px;border-radius:4px;background:#eaf3fb}
.r3b .r-win{width:110px}
.wk .cur .r3b .r-win{animation:r3w var(--D) cubic-bezier(.6,0,.3,1) both}
.wk .cur .r3b .r-pg{animation:r3g var(--D) steps(1) both}
.wk .cur .r3b .r-px::after{animation:r3px var(--D) steps(1) both}
@keyframes r3w{0%,25%{width:272px}55%,100%{width:110px}}
@keyframes r3g{0%{grid-template-columns:1.1fr 1fr}42%,100%{grid-template-columns:1fr}}
@keyframes r3px{0%{content:"1440 px"}28%{content:"1024 px"}36%{content:"768 px"}46%,100%{content:"375 px"}}
/* 3C */
.r3c{display:grid;grid-template-columns:1.25fr 1fr;gap:8px}
.r3c .r-code{background:#1e1f26;border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.r3c .r-tab{font-size:7.5px;color:#aaa;border-bottom:1px solid #333;padding-bottom:3px;margin-bottom:2px}
.r3c .r-code p{margin:0;font:8px/1.35 ui-monospace,Menlo,monospace;color:#e6e6e6;white-space:nowrap;overflow:hidden}
.r3c .k1{font-style:normal;color:#ff7aa2}.r3c .k2{font-style:normal;color:#8fd3ff}.r3c .k3{font-style:normal;color:#b8e986}.r3c .k4{font-style:normal;color:#ffd479}
.r3c .r-prev{background:#fff;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.r3c .r-ph b{display:block;font-size:11px;font-weight:800;line-height:1.1}.r3c .r-ph span{display:inline-block;margin-top:5px;font-size:8px;font-weight:700;color:#fff;background:#2f8fd8;border-radius:999px;padding:3px 9px}
.r3c .r-pi{flex:1;border-radius:6px;background:radial-gradient(circle at 50% 40%,#d9f3f0,#9fd8e8 70%);display:grid;place-items:center}
.wk .cur .r3c .r-code p{animation:xclip var(--D) steps(18) both;animation-delay:calc(.2s + var(--d)*.6s)!important}
.wk .cur .r3c .r-ph b{animation:xfade var(--D) ease both;animation-delay:1.2s}
.wk .cur .r3c .r-ph span{animation:r3btn var(--D) ease both}
.wk .cur .r3c .r-pi{animation:xph var(--D) var(--ease) both;animation-delay:2s}
@keyframes r3btn{0%,50%{background:#cfc8bf;transform:scale(.9)}56%,100%{background:#2f8fd8;transform:none}}
/* 4A */
.r4a{display:flex;flex-direction:column;gap:8px}
.r4a .r-cloud{flex:1;background:#fff;border-radius:10px;padding:10px;display:flex;flex-wrap:wrap;align-content:center;gap:5px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.r4a .r-cloud span{font-size:10px;font-weight:600;border-radius:6px;padding:3px 8px}
.r4a .ok{background:#e9f1ff;color:#1d4ed8}.r4a .no{background:#ffe7e4;color:#d83a2c;text-decoration:line-through;opacity:.35}
@property --kc{syntax:'<integer>';inherits:false;initial-value:1240}
.r4a .r-sum{display:flex;align-items:baseline;gap:6px}.r4a .r-cnt{font-size:20px;font-weight:800;counter-reset:kc var(--kc)}.r4a .r-cnt::after{content:counter(kc)}.r4a .r-sum small{font-size:9px;color:#6b655e}
.wk .cur .r4a .ok{animation:xpop2 var(--D) var(--spring) both;animation-delay:calc(.1s + var(--d)*.35s)!important}
.wk .cur .r4a .no{animation:r4no var(--D) ease both;animation-delay:calc(.3s + var(--d)*.4s)!important}
.wk .cur .r4a .r-cnt{animation:r4c var(--D) ease-out both}
@keyframes r4no{0%{opacity:0;text-decoration-color:transparent}6%{opacity:1;text-decoration-color:transparent}30%{opacity:1;text-decoration-color:#d83a2c}45%,100%{opacity:.35;transform:translateY(4px)}}
@keyframes r4c{0%{--kc:0}60%,100%{--kc:1240}}
/* 4B */
.r4b{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:auto 1fr;gap:7px}
.r4b .r-fmt small{display:block;font-size:7.5px;font-weight:800;color:#8a8580;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.r4b .r-f1{grid-column:1/-1}
.r4b .r-sad{background:#fff;border-radius:8px;padding:6px 9px;box-shadow:0 0 0 1.5px #ffd02b inset}.r4b .r-sad i,.r4b .r-mob i{display:block;font-style:normal;font-size:7.5px;font-weight:700;color:#8a8580}.r4b .r-sad b{font-size:10.5px;color:#1a0dab}
.r4b .r-rsa{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 6px 12px -8px rgba(0,0,0,.4)}.r4b .r-rim{height:52px;background:radial-gradient(circle at 50% 40%,#d9f3f0,#9fd8e8 70%);display:grid;place-items:center}.r4b .r-rim .q-tooth{height:86%}
.r4b .r-rsa b{display:block;font-size:9.5px;padding:4px 7px 0}.r4b .r-rsa span{display:inline-block;margin:3px 7px 6px;font-size:7.5px;font-weight:700;color:#fff;background:#2f8fd8;border-radius:999px;padding:2px 8px}
.r4b .r-mob{background:#fff;border-radius:12px;padding:7px 8px;box-shadow:0 0 0 3px #1d1f24}.r4b .r-mob b{display:block;font-size:9.5px;line-height:1.15;color:#1a0dab;margin:2px 0 5px}.r4b .r-mob span{display:block;text-align:center;font-size:8px;font-weight:700;color:#fff;background:#2bc84a;border-radius:6px;padding:3px}
.wk .cur .r4b .r-fmt{animation:r4f var(--D) var(--spring) both;animation-delay:calc(.2s + var(--d)*1s)!important}
@keyframes r4f{0%{opacity:0;transform:translateY(16px) scale(.9)}10%,100%{opacity:1;transform:none}}
/* 4C */
.r4c{display:flex;flex-direction:column;gap:7px}
.r4c .r-map{position:relative;flex:1;border-radius:10px;overflow:hidden;background:#e8efe0;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.r4c .r-road{position:absolute;background:#fff;border-radius:3px}.r4c .r-road.a{left:0;right:0;top:44%;height:6px;transform:rotate(-8deg)}.r4c .r-road.b{top:0;bottom:0;left:38%;width:6px;transform:rotate(12deg)}.r4c .r-road.c{left:0;right:0;top:74%;height:4px;transform:rotate(5deg)}
.r4c .r-river{position:absolute;right:-20px;top:-10px;width:60px;height:200px;background:#b9dcf3;border-radius:40%;transform:rotate(18deg)}
.r4c .r-rad{position:absolute;left:50%;top:48%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:rgba(47,143,216,.16);border:2px solid #2f8fd8}
.r4c .r-pin{position:absolute;left:50%;top:48%;transform:translate(-50%,-100%);font-size:18px}
.r4c .r-man{position:absolute;left:var(--x);top:var(--y);width:9px;height:9px;border-radius:50%;background:#ff8f5a;box-shadow:0 0 0 2px #fff}
.r4c .r-tags{display:flex;flex-wrap:wrap;gap:4px}.r4c .r-tags span{font-size:8.5px;font-weight:700;background:#fff;border-radius:999px;padding:3px 8px;box-shadow:0 2px 5px -3px rgba(0,0,0,.3)}
.wk .cur .r4c .r-rad{animation:r4r var(--D) var(--ease) both}
.wk .cur .r4c .r-man{animation:xpop2 var(--D) var(--spring) both;animation-delay:calc(1.6s + var(--d)*.3s)!important}
.wk .cur .r4c .r-tags span{animation:xpop2 var(--D) var(--spring) both}.wk .cur .r4c .r-tags span:nth-child(2){animation-delay:.6s}.wk .cur .r4c .r-tags span:nth-child(3){animation-delay:1.2s}
@keyframes r4r{0%,8%{transform:scale(0);opacity:0}30%,100%{transform:scale(1);opacity:1}}
/* 5A */
.r5a{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center}
.r5a .r-ph5{height:190px;border-radius:18px;background:#1d1f24;padding:5px;box-shadow:0 10px 18px -8px rgba(0,0,0,.5)}
.r5a .r-inc{height:100%;border-radius:14px;background:linear-gradient(170deg,#2f8fd8,#1a4f86);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.r5a .r-inc small{font-size:7.5px;opacity:.8}.r5a .r-inc b{font-size:11px}.r5a .r-inc span{font-size:8px;opacity:.9}
.r5a .r-btn{display:flex;gap:16px;margin-top:22px}.r5a .r-btn i{width:20px;height:20px;border-radius:50%}.r5a .r-btn .d{background:#ff4b3e}.r5a .r-btn .a{background:#2bc84a}
.r5a .r-cal{background:#fff;border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:5px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.r5a .r-cal>b{font-size:10px}
.r5a .r-slot{display:flex;align-items:center;gap:6px;font-size:9px;background:#e9f9ed;border-left:3px solid #2bc84a;border-radius:4px;padding:4px 6px}.r5a .r-slot i{font-style:normal;font-weight:800;color:#14772f}
.wk .cur .r5a .r-ph5{animation:r5ring 1.2s ease-in-out 3}
.wk .cur .r5a .r-btn .a{animation:r5a 1.2s ease-in-out infinite}
.wk .cur .r5a .r-slot{animation:r5s var(--D) var(--ease) both;animation-delay:calc(.8s + var(--d)*.8s)!important}
@keyframes r5ring{0%,100%{transform:none}10%,30%{transform:rotate(-4deg)}20%,40%{transform:rotate(4deg)}50%{transform:none}}
@keyframes r5a{50%{box-shadow:0 0 0 6px rgba(43,200,74,.3)}}
@keyframes r5s{0%{opacity:0;transform:translateX(14px);background:#fff}10%{opacity:1;transform:none;background:#fff}16%,100%{opacity:1;background:#e9f9ed}}
/* 5B */
.r5b{display:flex;flex-direction:column;gap:8px}
.r5b .r-ab{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.r5b .r-v{position:relative;background:#fff;border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.r5b .r-v>b{width:20px;height:20px;border-radius:6px;background:#efebe5;font-size:10px;line-height:20px;text-align:center}.r5b .r-vb>b{background:#2f8fd8;color:#fff}
.r5b .r-v p{margin:0;flex:1;font-size:10.5px;line-height:1.25;font-weight:600;color:#1a0dab}
.r5b .r-tr{height:8px;border-radius:4px;background:#ece7e0;overflow:hidden}.r5b .r-tr i{display:block;height:100%;width:var(--w);background:#c9c4bd;border-radius:4px}.r5b .r-vb .r-tr i{background:#2bc84a}
.r5b .r-v small{font-size:9px;font-weight:700}
.r5b .r-vb em{position:absolute;right:8px;top:8px;font-style:normal;font-size:8px;font-weight:800;background:#ffd02b;border-radius:999px;padding:2px 7px}
.r5b .r-vb{box-shadow:0 0 0 2px #2bc84a inset,0 8px 16px -10px rgba(0,0,0,.4)}
.r5b .r-res{font-size:9.5px;background:#161616;color:#fff;border-radius:999px;padding:5px 11px;align-self:flex-start}.r5b .r-res b{color:#2bc84a}
.wk .cur .r5b .r-tr i{animation:r5t var(--D) cubic-bezier(.4,0,.2,1) both}
.wk .cur .r5b .r-vb em{animation:xpop2 var(--D) var(--spring) both;animation-delay:2.8s}
.wk .cur .r5b .r-vb{animation:r5w var(--D) ease both}
.wk .cur .r5b .r-res{animation:xslide var(--D) var(--ease) both;animation-delay:3.4s}
@keyframes r5t{0%{width:0}40%,100%{width:var(--w)}}
@keyframes r5w{0%,44%{box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}50%,100%{box-shadow:0 0 0 2px #2bc84a inset,0 8px 16px -10px rgba(0,0,0,.4)}}
/* 5C */
.r5c{display:flex;flex-direction:column;gap:8px}
.r5c .r-weeks{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;align-items:end}
.r5c .r-wk{position:relative;background:#fff;border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:2px;height:100%;justify-content:flex-end;overflow:hidden;box-shadow:0 6px 12px -8px rgba(0,0,0,.4)}
.r5c .r-wk i{position:absolute;left:0;right:0;bottom:0;height:var(--h);background:linear-gradient(#cbe8ff,#e9f5ff);z-index:0}
.r5c .r-wk small,.r5c .r-wk b,.r5c .r-wk span{position:relative;z-index:1}
.r5c .r-wk small{font-size:7.5px;color:#8a8580}.r5c .r-wk b{font-size:12px;font-weight:800}.r5c .r-wk span{font-size:8px;color:#14772f;font-weight:700}
.r5c .r-wk:last-child b{color:#14772f}
.r5c .r-tot{font-size:10px;font-weight:800;color:#fff;background:#2bc84a;border-radius:999px;padding:5px 12px;align-self:center}
.wk .cur .r5c .r-wk{animation:xslide var(--D) var(--ease) both;animation-delay:calc(.2s + var(--d)*.7s)!important}
.wk .cur .r5c .r-wk i{animation:xbar var(--D) var(--ease) both;transform-origin:50% 100%;animation-delay:calc(.4s + var(--d)*.7s)!important}
.wk .cur .r5c .r-tot{animation:xpop2 var(--D) var(--spring) both;animation-delay:3.4s}

/* ===== этапы 4–5: новые варианты ===== */
.wkB .wslot{background:linear-gradient(160deg,#f3f0eb,#e6e1da)}
.t4a,.t4b,.t4c,.t5a,.t5b,.t5c{background:linear-gradient(160deg,#f3f0eb,#e6e1da)}
/* 4A */
.t4a .t-ws{height:100%;background:#fff;border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:5px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.t4a .t-wq{display:flex;align-items:center;gap:6px;border:1.5px solid #ffd02b;border-radius:8px;padding:4px 4px 4px 6px}.t4a .t-wq b{flex:1;font-size:10px}.t4a .t-wq span{font-size:8px;font-weight:700;background:#ffd02b;border-radius:5px;padding:3px 6px}
.t4a .t-row{display:grid;grid-template-columns:11px 1fr 50px 34px;align-items:center;gap:6px;font-size:9px}
.t4a .t-cb{width:11px;height:11px;border-radius:3px;background:#2bc84a;position:relative}.t4a .t-cb::after{content:"";position:absolute;left:3px;top:1px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.t4a .t-row em{height:6px;border-radius:3px;background:#ece7e0;overflow:hidden}.t4a .t-row em i{display:block;height:100%;width:var(--w);background:#4f9cf9;border-radius:3px}
.t4a .t-row b{font-size:8.5px;text-align:right;color:#6b655e}
.t4a .t-tot{margin-top:auto;font-size:10px}.t4a .t-tot b{color:#14772f;font-size:13px}
.wk .cur .t4a .t-row{animation:xslide var(--D) var(--ease) both;animation-delay:calc(.5s + var(--d)*.6s)!important}
.wk .cur .t4a .t-row em i{animation:t4w var(--D) var(--ease) both;animation-delay:calc(.7s + var(--d)*.6s)!important}
.wk .cur .t4a .t-cb{animation:t4cb var(--D) ease both;animation-delay:calc(2.6s + var(--d)*.3s)!important}
.wk .cur .t4a .t-tot{animation:xfade var(--D) ease both;animation-delay:4s}
@keyframes t4w{0%{width:0}14%,100%{width:var(--w)}}
@keyframes t4cb{0%{background:#e3ddd5}6%,100%{background:#2bc84a}}
/* 4B */
.t4b .t-tree{height:100%;display:flex;flex-direction:column;gap:8px;align-items:center}
.t4b .t-n{font-size:9.5px;font-weight:700;background:#fff;border-radius:7px;padding:5px 10px;box-shadow:0 4px 10px -6px rgba(0,0,0,.4);white-space:nowrap}
.t4b .t-root{background:#161616;color:#fff;display:flex;align-items:center;gap:5px}
.t4b .t-lvl{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:100%;flex:1;padding-top:12px}
.t4b .t-lvl::before{content:"";position:absolute;left:16%;right:16%;top:0;height:12px;border:2px solid #b9b2a8;border-bottom:0;border-radius:6px 6px 0 0}
.t4b .t-br{display:flex;flex-direction:column;align-items:center;gap:6px}
.t4b .t-g{background:#eaf2ff;color:#1d4ed8}
.t4b .t-ads{display:flex;flex-direction:column;gap:3px;width:100%}.t4b .t-ads i{display:block;height:11px;border-radius:3px;background:#fff;border-left:3px solid #ffd02b;box-shadow:0 2px 4px -2px rgba(0,0,0,.3)}
.t4b .t-sum{display:flex;gap:5px}.t4b .t-sum span{font-size:8.5px;font-weight:700;background:#2bc84a;color:#fff;border-radius:999px;padding:3px 8px}
.wk .cur .t4b .t-root{animation:xpop2 var(--D) var(--spring) both}
.wk .cur .t4b .t-lvl::before{animation:xfade var(--D) ease both;animation-delay:.5s}
.wk .cur .t4b .t-br .t-g{animation:t4n var(--D) var(--spring) both;animation-delay:calc(.3s + var(--d)*.5s)!important}
.wk .cur .t4b .t-ads i{animation:t4n var(--D) var(--spring) both;animation-delay:calc(1.6s + var(--d)*.4s)!important}
.wk .cur .t4b .t-ads i:nth-child(2){animation-delay:calc(1.8s + var(--d)*.4s)!important}.wk .cur .t4b .t-ads i:nth-child(3){animation-delay:calc(2s + var(--d)*.4s)!important}
.wk .cur .t4b .t-sum span{animation:xpop2 var(--D) var(--spring) both;animation-delay:3.6s}
@keyframes t4n{0%{opacity:0;transform:translateY(-10px) scale(.8)}10%,100%{opacity:1;transform:none}}
/* 4C */
.t4c .t-serp{height:100%;background:#fff;border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:7px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.t4c .t-sq{display:flex;align-items:center;gap:6px;border:1.5px solid #ffd02b;border-radius:8px;padding:4px 7px}.t4c .t-sq b{font-size:10px}
.t4c .t-list{position:relative;height:96px}
.t4c .t-ad{position:absolute;left:0;right:0;height:28px;display:flex;align-items:center;gap:7px;border-radius:7px;padding:0 8px;background:#f6f3ee;font-size:9.5px;transition:none}
.t4c .t-ad i{font-style:normal;width:16px;height:16px;border-radius:50%;background:#d6d0c8;color:#fff;font-size:8.5px;font-weight:800;line-height:16px;text-align:center}
.t4c .t-o1{top:34px}.t4c .t-o2{top:68px}.t4c .t-me{top:0;background:#e9f9ed;box-shadow:0 0 0 1.5px #2bc84a inset}.t4c .t-me i{background:#2bc84a}.t4c .t-me b{color:#14772f}
.t4c .t-bid{display:flex;align-items:center;gap:7px;font-size:9px}.t4c .t-bid small{color:#8a8580}.t4c .t-bid b{color:#14772f}
.t4c .t-sl{flex:1;height:5px;border-radius:3px;background:#ece7e0;position:relative}.t4c .t-sl i{position:absolute;left:0;top:0;bottom:0;width:70%;background:#ffd02b;border-radius:3px}
.wk .cur .t4c .t-me{animation:t4me var(--D) cubic-bezier(.5,0,.3,1) both}
.wk .cur .t4c .t-o1{animation:t4o1 var(--D) cubic-bezier(.5,0,.3,1) both}.wk .cur .t4c .t-o2{animation:t4o2 var(--D) cubic-bezier(.5,0,.3,1) both}
.wk .cur .t4c .t-sl i{animation:t4sl var(--D) var(--ease) both}
@keyframes t4me{0%,20%{top:68px;background:#f6f3ee;box-shadow:none}55%,100%{top:0;background:#e9f9ed;box-shadow:0 0 0 1.5px #2bc84a inset}}
@keyframes t4o1{0%,20%{top:0}55%,100%{top:34px}}
@keyframes t4o2{0%,20%{top:34px}55%,100%{top:68px}}
@keyframes t4sl{0%,15%{width:20%}50%,100%{width:70%}}
/* 5A */
.t5a .t-crm{height:100%;display:grid;grid-template-columns:1.3fr 1fr;gap:8px}
.t5a .t-col{background:#ece8e2;border-radius:9px;padding:6px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.t5a .t-ch{display:flex;align-items:center;justify-content:space-between;font-size:9px}
@property --lc{syntax:'<integer>';inherits:false;initial-value:35}
.t5a .t-cnt{font-style:normal;font-size:8.5px;font-weight:800;background:#2bc84a;color:#fff;border-radius:999px;padding:1px 6px;counter-reset:lc var(--lc)}.t5a .t-cnt::after{content:counter(lc)}
.t5a .t-card{position:relative;background:#fff;border-radius:6px;padding:4px 7px;border-left:3px solid #2bc84a;box-shadow:0 2px 5px -3px rgba(0,0,0,.3)}
.t5a .t-card b{display:block;font-size:9px}.t5a .t-card small{font-size:7.5px;color:#8a8580}.t5a .t-card i{position:absolute;right:6px;top:4px;font-style:normal;font-size:7px;color:#8a8580}
.t5a .t-side{display:flex;flex-direction:column;gap:7px;justify-content:center}
.t5a .t-side div{background:#fff;border-radius:8px;padding:7px 9px;box-shadow:0 6px 12px -8px rgba(0,0,0,.4)}
.t5a .t-side small{display:block;font-size:8px;color:#8a8580}.t5a .t-side b{font-size:18px;font-weight:800}.t5a .t-g{color:#14772f}.t5a .t-side s{display:block;font-size:8.5px;color:#b44}
.wk .cur .t5a .t-card{animation:t5c var(--D) var(--spring) both;animation-delay:calc(.3s + (3 - var(--d))*.8s)!important}
.wk .cur .t5a .t-cnt{animation:t5n var(--D) ease-out both}
.wk .cur .t5a .t-side div:last-child{animation:xpop2 var(--D) var(--spring) both;animation-delay:3.4s}
@keyframes t5c{0%{opacity:0;transform:translateX(-30px) rotate(-4deg)}9%,100%{opacity:1;transform:none}}
@keyframes t5n{0%{--lc:0}60%,100%{--lc:35}}
/* 5B */
.t5b{display:flex;flex-direction:column;align-items:center;gap:6px}
.t5b .t-gauge{position:relative;width:200px;background:#fff;border-radius:12px;padding:10px 12px 8px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.t5b svg{display:block;width:100%}
.t5b .t-arc{stroke-dasharray:252;stroke-dashoffset:0}
.t5b .t-needle{transform-origin:100px 100px;transform:rotate(-38deg)}
.t5b .t-val{text-align:center;margin-top:2px}.t5b .t-val small{display:block;font-size:8px;color:#8a8580}
@property --cp{syntax:'<integer>';inherits:false;initial-value:600}
.t5b .t-num{font-size:18px;font-weight:800;counter-reset:cp var(--cp)}.t5b .t-num::after{content:counter(cp) " ₽"}
.t5b .t-legend{display:flex;gap:6px}.t5b .t-legend span{font-size:8.5px;font-weight:700;background:#fff;border-radius:999px;padding:3px 8px}.t5b .t-legend .t-g{background:#2bc84a;color:#fff}
.wk .cur .t5b .t-needle{animation:t5nd var(--D) cubic-bezier(.4,0,.2,1) both}
.wk .cur .t5b .t-num{animation:t5cp var(--D) cubic-bezier(.4,0,.2,1) both}
.wk .cur .t5b .t-legend .t-g{animation:xpop2 var(--D) var(--spring) both;animation-delay:3.4s}
@keyframes t5nd{0%,10%{transform:rotate(62deg)}25%{transform:rotate(40deg)}40%{transform:rotate(18deg)}55%{transform:rotate(-8deg)}70%,100%{transform:rotate(-38deg)}}
@keyframes t5cp{0%,10%{--cp:1200}70%,100%{--cp:600}}
/* 5C */
.t5c{display:flex;flex-direction:column;gap:7px}
.t5c .t-log{flex:1;background:#fff;border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:5px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.t5c .t-log>b{font-size:10px}
.t5c .t-it{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:6px;font-size:9px}
.t5c .t-it i{font-style:normal;width:18px;height:18px;border-radius:5px;background:#eaf2ff;color:#1d4ed8;font-size:10px;font-weight:800;line-height:18px;text-align:center}
.t5c .t-it em{font-style:normal;font-size:8.5px;font-weight:800;color:#14772f;background:#e9f9ed;border-radius:999px;padding:1px 6px;white-space:nowrap}
.t5c .t-fin{align-self:flex-start;font-size:10px;font-weight:700;background:#161616;color:#fff;border-radius:999px;padding:5px 12px}.t5c .t-fin s{color:#ff8a80}.t5c .t-fin b{color:#2bc84a}
.wk .cur .t5c .t-it{animation:xslide var(--D) var(--ease) both;animation-delay:calc(.3s + var(--d)*.75s)!important}
.wk .cur .t5c .t-it em{animation:xpop2 var(--D) var(--spring) both;animation-delay:calc(.7s + var(--d)*.75s)!important}
.wk .cur .t5c .t-fin{animation:xpop2 var(--D) var(--spring) both;animation-delay:3.6s}
.wq.wqx.r2a{display:flex}.wq.wqx.r3b{display:grid;grid-template-columns:1fr}

/* ===== этап 5: новые варианты (u) ===== */
.u5a,.u5b,.u5c{background:linear-gradient(160deg,#f3f0eb,#e6e1da)}
/* A live chart */
.u5a{display:grid;grid-template-columns:1fr 78px;gap:8px}
.u5a .u-ch{background:#fff;border-radius:10px;padding:8px 9px;display:flex;flex-direction:column;gap:4px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.u5a .u-top{display:flex;justify-content:space-between;align-items:center;font-size:9.5px}
.u5a .u-live{display:flex;align-items:center;gap:4px;font-size:8px;font-weight:800;color:#d83a2c}.u5a .u-live i{width:6px;height:6px;border-radius:50%;background:#ef4b3f}
.u5a .u-plot{position:relative;flex:1}
.u5a svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.u5a .u-area{fill:rgba(43,200,74,.14);stroke:none}
.u5a .u-line{fill:none;stroke:#2bc84a;stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:300}
.u5a .u-dot{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#2bc84a;box-shadow:0 0 0 3px #fff}
.u5a .u-tip{position:absolute;right:4px;top:40%;transform:translateY(-110%);font-size:8px;font-weight:800;color:#fff;background:#161616;border-radius:6px;padding:3px 6px;white-space:nowrap}
.u5a .u-axis{display:flex;justify-content:space-between;font-size:7px;color:#8a8580}
.u5a .u-kpi{display:flex;flex-direction:column;gap:7px;justify-content:center}.u5a .u-kpi div{background:#fff;border-radius:8px;padding:6px 8px;box-shadow:0 6px 12px -8px rgba(0,0,0,.4)}
.u5a .u-kpi small{display:block;font-size:7.5px;color:#8a8580}.u5a .u-kpi b{font-size:15px;font-weight:800}
@property --u1{syntax:'<integer>';inherits:false;initial-value:35}@property --u2{syntax:'<integer>';inherits:false;initial-value:600}
.u5a .u-n1{counter-reset:u1 var(--u1)}.u5a .u-n1::after{content:counter(u1)}
.u5a .u-n2{color:#14772f;counter-reset:u2 var(--u2)}.u5a .u-n2::after{content:counter(u2) " ₽"}
.wk .cur .u5a .u-line{animation:u5l var(--D) linear both}.wk .cur .u5a .u-area{animation:u5ar var(--D) linear both}
.wk .cur .u5a .u-dot{animation:xpop2 var(--D) var(--spring) both;animation-delay:calc(var(--d)*.55s)!important}
.wk .cur .u5a .u-tip{animation:u5t var(--D) var(--spring) both}
.wk .cur .u5a .u-live i{animation:qblink 1s steps(1) infinite}
.wk .cur .u5a .u-n1{animation:u5n1 var(--D) linear both}.wk .cur .u5a .u-n2{animation:u5n2 var(--D) linear both}
@keyframes u5l{0%{stroke-dashoffset:300}70%,100%{stroke-dashoffset:0}}
@keyframes u5ar{0%{clip-path:inset(0 100% 0 0)}70%,100%{clip-path:inset(0 0 0 0)}}
@keyframes u5t{0%,70%{opacity:0;transform:translateY(-80%) scale(.6)}78%,100%{opacity:1;transform:translateY(-110%)}}
@keyframes u5n1{0%{--u1:0}70%,100%{--u1:35}}@keyframes u5n2{0%{--u2:1200}70%,100%{--u2:600}}
/* B ROI */
.u5b{display:flex;flex-direction:column;gap:9px;justify-content:center}
.u5b .u-flow{display:grid;grid-template-columns:1fr 12px 1fr 12px 1fr;align-items:center;gap:4px}
.u5b .u-st{background:#fff;border-radius:9px;padding:7px 6px;text-align:center;box-shadow:0 6px 12px -8px rgba(0,0,0,.4)}
.u5b .u-st small{display:block;font-size:7.5px;color:#8a8580;line-height:1.2}.u5b .u-st b{font-size:13px;font-weight:800}
.u5b .u-ar{font-style:normal;color:#2f8fd8;font-weight:800;text-align:center}
.u5b .u-rev{background:#161616;color:#fff;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.u5b .u-rev small{font-size:8.5px;opacity:.7}
@property --um{syntax:'<integer>';inherits:false;initial-value:405000}
.u5b .u-money{font-size:22px;font-weight:800;color:#2bc84a}
.u5b .u-roi{align-self:flex-start;font-size:9px;font-weight:800;background:#ffd02b;color:#161616;border-radius:999px;padding:2px 8px}
.wk .cur .u5b .u-st,.wk .cur .u5b .u-ar{animation:xpop2 var(--D) var(--spring) both;animation-delay:calc(.2s + var(--d)*.7s)!important}
.wk .cur .u5b .u-rev{animation:xslide var(--D) var(--ease) both;animation-delay:2s}
.wk .cur .u5b .u-money{animation:xclip var(--D) steps(9) both;animation-delay:2.6s}
.wk .cur .u5b .u-roi{animation:xpop2 var(--D) var(--spring) both;animation-delay:4.2s}
@keyframes u5m{0%,35%{--um:0}75%,100%{--um:405000}}
/* C live feed */
.u5c .u-feed{height:100%;background:#fff;border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:5px;box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.u5c .u-fh{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin-bottom:2px}
.u5c .u-on{display:flex;align-items:center;gap:4px;font-size:8.5px;color:#14772f}.u5c .u-on i{width:7px;height:7px;border-radius:50%;background:#2bc84a}
@property --uv{syntax:'<integer>';inherits:false;initial-value:12}
.u5c .u-vis{counter-reset:uv var(--uv)}.u5c .u-vis::after{content:counter(uv)}
.u5c .u-ev{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:6px;font-size:9px;border-radius:7px;padding:4px 6px;background:#f6f3ee}
.u5c .u-ev i{font-style:normal;font-size:11px;text-align:center}.u5c .u-ev em{font-style:normal;font-size:7.5px;color:#8a8580}
.u5c .u-l{background:#e9f9ed}.u5c .u-l span{font-weight:700;color:#14772f}.u5c .u-c{background:#eaf2ff}
.wk .cur .u5c .u-ev{animation:u5e var(--D) var(--spring) both;animation-delay:calc(.3s + (4 - var(--d))*.75s)!important}
.wk .cur .u5c .u-on i{animation:r5a 1.2s ease-in-out infinite}
.wk .cur .u5c .u-vis{animation:u5v var(--D) steps(8) both}
@keyframes u5e{0%{opacity:0;transform:translateY(-14px) scale(.95)}9%,100%{opacity:1;transform:none}}
@keyframes u5v{0%{--uv:4}100%{--uv:12}}
.wq.wqx.t4c{display:block}

.wq.wqx.u5a{grid-template-columns:1fr 78px}
/* ===== адаптив: планшет и телефон (доработки) ===== */
@media (max-width:1000px){
  .vC .path{height:auto;grid-template-rows:none}
  .vC .st .vis{width:46%;min-height:150px}
}
@media (max-width:640px){
  .vC .st{flex-direction:column;align-items:stretch;gap:12px}
  .vC .st .vis{width:100%;height:150px;flex:none}
  .pain-h .phl{display:inline;white-space:normal;transform:none;margin:0;padding:.02em .22em .08em;top:0;background:var(--phc);color:#fff;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:.16em;line-height:1.35}
  .pain-h .phl .bg,.pain-h .phl .tx2{display:none}
  .pain-h .phl .tx{color:#fff}
}

/* ===== планшет: отступы от линий, первый экран без робота и без пустот ===== */
@media (min-width:601px) and (max-width:1199px){
  .rail.l{left:24px}.rail.r{right:24px}
  body > section:not(.hero),.hero{padding-left:48px!important;padding-right:48px!important}
  .fur{display:none!important}
  .hero{min-height:0}
  .hero .fan{flex:none;min-height:300px;margin-top:28px}
  .hero .stats{margin-top:20px}
  .gap{height:190px}
}
/* планшет горизонтально (1180×820): робот на первом экране */
@media (min-width:1100px) and (max-width:1199px){ .fur{display:block!important;width:160px!important;height:160px!important;margin:-55px 0 0 35px} }

/* планшет и телефон: лента экранов сверху, уходит под верхний блок и под форму */
@media (max-width:1000px){
  .pf{z-index:7}
  .fs{padding-top:0!important;padding-bottom:clamp(40px,calc(6 * var(--vh,1vh)),64px)!important;min-height:0!important}
  .fd-strip{order:-1!important;margin:-90px -16px -150px!important;height:460px!important;z-index:1!important}
  .fs-in{position:relative;z-index:3}
  .fd-rot{inset:-20% 56px!important}
  .fd-card{text-align:center}
  .fd-card .fs-h,.fd-card .fs-p{margin-left:auto;margin-right:auto}
  .fd-card .fs-f{text-align:center}
  .fd-card .fs-row{grid-template-columns:1fr!important;display:grid}
  .fd-card .fs-f input{text-align:center}
  .fd-card .fs-lbl{text-align:center}
  .fd-card .fs-msg{justify-content:center}
  .fd-card .fs-cons{justify-content:center;text-align:left;max-width:520px;margin-left:auto;margin-right:auto}
}

/* планшет: 5-й этап на всю ширину, картинка слева, текст справа */
@media (min-width:601px) and (max-width:1099px){
  .wkB .wb-card[data-i="4"]:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:center}
  .wkB .wb-card[data-i="4"]:last-child{grid-template-rows:1fr auto auto auto 1fr;row-gap:8px}
  .wkB .wb-card[data-i="4"] .wslot{grid-column:1;grid-row:1/6}
  .wkB .wb-card[data-i="4"] .wn{grid-column:2;grid-row:2}
  .wkB .wb-card[data-i="4"] h3{grid-column:2;grid-row:3;margin:0}
  .wkB .wb-card[data-i="4"] p{grid-column:2;grid-row:4;margin:0}
}

/* планшет: фото Михаила справа, плашка слева */
@media (min-width:601px) and (max-width:1199px){
  .auA-ph{margin-left:auto;margin-right:20px}
  .auA-bub{left:auto;right:calc(100% - 10px);border-radius:22px 22px 6px 22px;transform:rotate(3deg)}
  .au .au-panel::after{right:auto!important;left:-80px!important}
  .fqA-side{order:2!important}
  .fq{padding-bottom:16px!important}
  .ct3{padding-top:24px!important}
  .fqA .fq-slot{margin-bottom:-20px}
  .fqA-l{order:1}
}

/* планшет: крупный робот во втором блоке, выглядывает из-за нижнего блока */
@media (min-width:601px) and (max-width:900px){
  #pain .ball2{width:480px;height:290px;margin-top:-50px}
  #pain .ball2 canvas{width:480px!important;height:480px!important;top:0;left:0}
}

/* ===== БЛОК — «Первый экран бесплатно»: бежевый, форма + листающиеся первые экраны наших сайтов ===== */
.fs{position:relative;z-index:6;background-color:var(--yellow);color:var(--on-accent);
  background-image:radial-gradient(color-mix(in srgb,var(--on-accent) 22%,transparent) 1px,transparent 1.3px);background-size:16px 16px;background-attachment:fixed;
  padding:clamp(36px,calc(5 * var(--vh,1vh)),64px) 16px;min-height:calc(100 * var(--vh,1vh));min-height:calc(100 * var(--vh,1vh));display:flex;align-items:center;overflow-x:clip}
.fs .rail{background:color-mix(in srgb,var(--on-accent) 25%,transparent)}
.fs-in{width:100%}
.fs .fs-p{color:color-mix(in srgb,var(--on-accent) 72%,var(--yellow))}
.fs-in{position:relative;z-index:2;max-width:1240px;margin:0 auto}
.fs-h{margin:0;font-weight:800;font-size:clamp(24px,calc(2.6 * var(--vw,1vw)),38px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.fs-h em{font-style:normal;display:inline-block;background:var(--orange);color:#fff;border-radius:.16em;padding:0 .24em .06em;transform:rotate(-2deg)}
.fs-p{margin:14px 0 0;font-size:17px;line-height:1.45;color:var(--muted)}
.fs-p br.dk{display:inline}@media (max-width:700px){.fs-p br.dk{display:none}}
.fvsw{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 26px;padding:6px;border:1px dashed var(--frame);border-radius:16px;width:max-content;max-width:100%}
.fvsw span{font-size:12px;color:var(--muted);padding:0 6px}
.fvsw button{border:0;background:none;color:var(--ink);font:600 13px var(--f);padding:8px 12px;border-radius:10px;cursor:pointer}
.fvsw button[aria-pressed="true"]{background:var(--surface);box-shadow:0 0 0 1px var(--card-edge)}
.fsv{display:none}
.fs-form{margin-top:18px;display:grid;gap:10px}
.fs-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fs-f span{display:block;font-size:13px;font-weight:700;margin-bottom:8px}
.fs-f input{width:100%;padding:16px 18px;border-radius:16px;border:0;background:var(--surface);color:var(--surface-ink);font:500 16px var(--f);box-shadow:0 0 0 1px var(--card-edge);outline:none}
.fs-f input:focus{box-shadow:0 0 0 2px var(--ink)}
.fs-f.bad input{box-shadow:inset 0 0 0 2px #d22f27}.fs-f.bad .qerr{visibility:visible}
.fs-f .qerr{font-style:normal}
.fs-lbl{font-size:13px;font-weight:700;margin-top:2px}
.fs-msg{display:flex;gap:8px;flex-wrap:wrap}
.fs-msg input{position:absolute;opacity:0;pointer-events:none}
.fs-msg span{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--card-edge);font-weight:600;font-size:14px;cursor:pointer;transition:background .2s,color .2s}
.fs-msg svg{width:16px;height:16px;fill:currentColor}
.fs-msg input:checked+span{background:var(--ink);color:var(--paper)}
.fs-msg input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.fs-cons{color:var(--muted)}
.fs-btn{justify-content:center;width:100%;border:0;cursor:pointer;padding:18px 28px;font-size:17px}
.fs-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.fs-ok{padding:14px;border-radius:14px;background:#2bc84a;color:#fff;font-weight:700;text-align:center}
.fsv img{display:block;width:100%;height:100%;object-fit:cover}
.fb-card{aspect-ratio:11/6}
.fsB .fs-f input{padding:13px 16px}
.fsB .fs-btn{padding:15px 24px}
.fsB .qerr{margin-top:3px}

/* A — стопка: верхний экран уезжает вверх и уходит назад, следующий поднимается */
.fsA.on{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.fa-r{position:relative;height:clamp(380px,calc(46 * var(--vw,1vw)),560px)}
.fa-stack{position:absolute;inset:0;perspective:1400px}
.fa-card{position:absolute;left:6%;right:2%;bottom:0;aspect-ratio:11/6;border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -30px rgba(var(--sh),.55);
  transform:translateY(calc(var(--p) * -62px)) scale(calc(1 - var(--p) * .06));z-index:calc(10 - var(--p));transition:transform .9s var(--ease),opacity .9s,filter .9s;filter:brightness(calc(1 - var(--p) * .06))}
.fa-card.out{transform:translateY(-120%) rotate(-4deg) scale(.9);opacity:0;transition:transform .7s var(--ease),opacity .5s}
/* B — карусель: центральный экран крупно, соседние уходят в стороны с поворотом */
.fsB.on{display:block;text-align:center}
.fb-head .fs-p{margin-left:auto;margin-right:auto}
.fb-flow{position:relative;height:clamp(180px,min(calc(22 * var(--vw,1vw)),calc(27 * var(--vh,1vh))),300px);margin:min(26px,calc(3 * var(--vh,1vh))) 0 min(18px,calc(2 * var(--vh,1vh)));perspective:1600px}
.fb-card{position:absolute;left:50%;top:50%;height:100%;width:auto;aspect-ratio:11/6;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -30px rgba(var(--sh),.6);
  transform:translate(-50%,-50%) translateX(calc(var(--o) * 78%)) rotateY(calc(var(--o) * -22deg)) scale(calc(1 - var(--a) * .14));z-index:calc(10 - var(--a));filter:brightness(calc(1 - var(--a) * .14)) saturate(calc(1 - var(--a) * .35));transition:transform .9s var(--ease),filter .9s}
.fb-form{max-width:780px;margin:0 auto;text-align:left;background:var(--surface);color:var(--surface-ink);border-radius:28px;padding:2px 24px 20px;box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -36px rgba(var(--sh),.5)}
.fb-form .fs-f input,.fb-form .fs-msg span{background:var(--hover);box-shadow:none}
/* C — браузер: большое окно со сменой экранов, поверх него карточка с формой */
.fsC.on{display:grid;grid-template-columns:1fr;position:relative;min-height:620px}
.fc-browser{position:absolute;right:0;top:0;width:68%;border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--card-edge),0 40px 70px -40px rgba(var(--sh),.6)}
.fc-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--card-edge)}
.fc-bar i{width:11px;height:11px;border-radius:50%;background:#e2ddd6}.fc-bar i:nth-child(1){background:#ff6058}.fc-bar i:nth-child(2){background:#ffbd2e}.fc-bar i:nth-child(3){background:#29c940}
.fc-url{margin-left:14px;flex:1;max-width:360px;background:var(--hover);border-radius:999px;padding:6px 14px;font-size:12px;color:var(--muted)}
.fc-n{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.fc-screen{position:relative;aspect-ratio:11/6;overflow:hidden}
.fc-img{position:absolute;inset:0;transform:translateY(100%);transition:transform .9s var(--ease)}
.fc-img.on{transform:none}.fc-img.up{transform:translateY(-100%)}
.fc-card{position:relative;z-index:2;width:min(560px,52%);margin-top:150px;background:var(--surface);border-radius:28px;padding:30px;box-shadow:0 0 0 1px var(--card-edge),0 40px 70px -40px rgba(var(--sh),.65)}
.fc-card .fs-f input,.fc-card .fs-msg span{background:var(--hover);box-shadow:none}
@media (max-width:1000px){
  .fsA.on{grid-template-columns:1fr}.fa-r{height:clamp(260px,calc(60 * var(--vw,1vw)),420px)}
  .fsC.on{min-height:0}.fc-browser{position:relative;width:100%}.fc-card{width:auto;margin-top:-40px}
}
@media (max-width:600px){.fs-row{grid-template-columns:1fr}.fb-card{width:calc(78 * var(--vw,1vw))}}
@media (prefers-reduced-motion:reduce){.fa-card,.fb-card,.fc-img{transition:none}}

/* --- новые варианты блока «Первый экран бесплатно» на жёлтом --- */
.fsv .mq-i{border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 18px 30px -18px rgba(0,0,0,.45);background:#fff;aspect-ratio:11/6;flex:none}
/* D — слева белая карточка с формой, справа две колонки экранов, бегущие вверх и вниз */
.fsD.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.fd-card{background:var(--surface);color:var(--surface-ink);border-radius:30px;padding:30px 32px;box-shadow:0 0 0 1px rgba(0,0,0,.05),26px 18px 44px -10px rgba(0,0,0,.34),10px 26px 34px -22px rgba(0,0,0,.28)}
.fd-card .fs-p{color:var(--muted)}
.fd-card .fs-f input,.fd-card .fs-msg span{background:var(--hover);box-shadow:none}
.fd-strip{position:absolute;z-index:1;top:0;bottom:0;left:0;right:0;pointer-events:none;overflow:hidden}
.fd-rot{position:absolute;top:-14%;bottom:-14%;left:calc(50% - 110px);right:max(140px,calc(50% - 595px));display:grid;grid-template-columns:1fr 1fr;gap:16px;transform:rotate(-6deg)}
.fd-strip .mq-i{border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 18px 30px -18px rgba(0,0,0,.45);background:#fff;aspect-ratio:11/6;flex:none;width:100%}
.fd-strip img{display:block;width:100%;height:100%;object-fit:cover}
.fd-col{overflow:hidden;min-width:0}
.fd-ph{min-height:1px}
.fs .steps{z-index:0}
.mq-v{display:flex;flex-direction:column;gap:16px;animation:mqv 32.5s linear infinite}
.fd-col.dn .mq-v{animation-direction:reverse;animation-duration:37.5s}
.mq-v .mq-i{width:100%}
@keyframes mqv{to{transform:translateY(calc(-50% - 8px))}}
/* E — заголовок, два бегущих ряда экранов во всю ширину, форма одной полосой */
.fsE.on{display:flex;flex-direction:column;gap:min(26px,calc(3 * var(--vh,1vh)))}
.fe-head{text-align:center}
.fe-rows{display:grid;gap:14px;margin:0 calc(50% - calc(50 * var(--vw,1vw)));overflow:hidden}
.mq-h{display:flex;gap:14px;width:max-content;animation:mqh 40s linear infinite}
.mq-h.rv{animation-direction:reverse;animation-duration:46s}
.mq-h .mq-i{height:clamp(110px,calc(15 * var(--vh,1vh)),170px)}
@keyframes mqh{to{transform:translateX(calc(-50% - 7px))}}
.fe-bar{background:var(--surface);color:var(--surface-ink);border-radius:26px;padding:0 22px 18px;box-shadow:0 30px 60px -36px rgba(0,0,0,.5)}
.fe-bar .fs-form{grid-template-columns:1.1fr 1.1fr auto;align-items:end;column-gap:12px}
.fe-bar .fs-row{grid-column:1/3}
.fe-bar .fs-lbl{display:none}
.fe-bar .fs-msg{grid-column:3;grid-row:1;align-self:end;padding-bottom:22px}
.fe-bar .fs-cons{grid-column:1/3;align-self:center;margin:0}
.fe-bar .fs-form{row-gap:10px}
.fe-bar .fs-btn,.fe-bar .fs-ok{grid-column:3;grid-row:2;width:auto}
.fe-bar .fs-f input,.fe-bar .fs-msg span{background:var(--hover);box-shadow:none}
.fe-bar .fs-msg span{padding:10px 13px}
/* F — «нарисуем»: в окне браузера серый прототип проявляется в готовый дизайн; справа тёмная карточка с формой */
.fsF.on{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
.ff-stage{margin-top:22px;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -36px rgba(0,0,0,.55)}
.ff-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid #eee}
.ff-bar i{width:10px;height:10px;border-radius:50%;background:#e2ddd6}.ff-bar i:nth-child(1){background:#ff6058}.ff-bar i:nth-child(2){background:#ffbd2e}.ff-bar i:nth-child(3){background:#29c940}
.ff-st{margin-left:12px;font-size:12px;font-weight:600;color:#8a837a}
.ff-screen{position:relative;aspect-ratio:11/6;background:#f3f1ee}
.ff-wire{position:absolute;inset:0;padding:7% 7%;display:grid;grid-template-rows:auto auto auto 1fr;gap:10px}
.ff-wire b{display:block;border-radius:6px;background:#dcd7cf}
.ff-wire .w1{height:12px;width:30%}.ff-wire .w2{height:26px;width:62%}.ff-wire .w3{height:12px;width:44%}
.ff-wire span{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-self:end}.ff-wire span i{height:60px;border-radius:8px;border:2px dashed #cfc8be}
.ff-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease)}
.ff-screen.done img{clip-path:inset(0 0 0 0)}
.ff-screen::after{content:"";position:absolute;top:0;bottom:0;width:3px;background:var(--orange);left:0;opacity:0;box-shadow:0 0 18px var(--orange)}
.ff-screen.drawing::after{opacity:1;animation:scan 1.6s var(--ease) forwards}
@keyframes scan{from{left:0}to{left:calc(100% - 3px)}}
.ff-r{background:var(--ink);color:var(--paper);border-radius:30px;padding:8px 28px 26px;box-shadow:0 30px 60px -36px rgba(0,0,0,.6)}
.ff-r .fs-f span,.ff-r .fs-lbl{color:var(--paper)}
.ff-r .fs-f input{background:rgba(255,255,255,.1);color:var(--paper);box-shadow:none}
.ff-r .fs-f input::placeholder{color:rgba(255,255,255,.45)}
.ff-r .fs-msg span{background:rgba(255,255,255,.1);color:var(--paper);box-shadow:none}
.ff-r .fs-msg input:checked+span{background:var(--yellow);color:var(--on-accent)}
.ff-r .fs-cons{color:rgba(255,255,255,.6)}
@media (max-width:1000px){
  .fsD.on,.fsF.on{grid-template-columns:1fr}.fd-ph{display:none}
  .fs{flex-direction:column;padding-bottom:0}.fd-strip{position:relative;order:2;top:auto;left:auto;right:auto;width:calc(100% + 32px);margin:-110px -16px 0;height:440px;overflow:hidden}.fd-rot{inset:-20% 24px}.fs-in{z-index:2}
  .fe-bar .fs-form{grid-template-columns:1fr}.fe-bar .fs-row,.fe-bar .fs-msg,.fe-bar .fs-cons,.fe-bar .fs-btn{grid-column:auto;grid-row:auto}.fe-bar .fs-lbl{display:block}.fe-bar .fs-msg{padding:0}
}
@media (prefers-reduced-motion:reduce){.mq-v,.mq-h{animation:none}}

.note{max-width:720px;margin:0 auto;padding:28px 16px 48px;color:var(--muted);font-size:14px;line-height:1.5;text-align:center}

/* ===== ТЕЛЕФОН (≤600): правки по мобильной версии ===== */
@media (max-width:600px){
  .rail,.sys::before{display:none!important}
  #pain .pill{font-size:14px}
  /* бесплатный экран: одна широкая лента экранов вместо двух */
  .fd-rot{grid-template-columns:1fr!important;inset:-20% 30px!important}
  .fd-strip{height:540px!important}
  .fd-rot .fd-col:nth-child(n+2){display:none}
  .fd-strip .mq-i{border-radius:16px}
  /* первый экран: только видео — крупно, по центру, с наклоном; всё плотнее */
  .hero{min-height:0}
  .head{margin-top:26px;gap:14px}
  .offer{margin-top:14px;gap:10px}
  .fan{flex:none;min-height:0;height:calc(calc(80 * var(--vw,1vw)) * 6 / 11 + 70px);margin-top:18px}
  .fan .s1,.fan .s2,.fan .s3,.fan .s4,.fan .s5{display:none!important}
  .fan .s6{--x:0%;--y:-14px;--r:-4deg;width:calc(80 * var(--vw,1vw));z-index:6}
  .fan .s6 .tag{--tr:3deg;font-size:13px;padding:8px 14px}
  .vph span{display:block}.play{width:54px;height:54px}
  .stats{margin-top:10px}
  /* квиз: реплики робота мельче */
  .qsay{font-size:14px!important;line-height:1.45!important}
  /* Антон: чипы в одну строку */
  .chips3{gap:6px}.chips3 span{font-size:12.5px;padding:8px 12px;gap:7px;white-space:nowrap}
  /* кейсы: заголовок по центру, «С цифрами» шире */
  .pf-head{justify-content:center;text-align:center}.pf-head > div{width:100%}
  .pf-ctrl{display:flex;justify-content:center;width:100%}
  .pf-mode{display:flex;width:100%;max-width:400px}
  .pf-mode button{white-space:nowrap;justify-content:center;padding:12px 10px}
  .pf-mode button[data-mode="num"]{flex:1.25}.pf-mode button[data-mode="des"]{flex:1}
  /* команда и отзывы: заголовки по центру */
  .tm-h{text-align:center}
  .rv-head{justify-content:center;text-align:center}.rv-p{margin:0 auto}
  /* аудит: нижняя плашка с формой по центру */
  .au-card .au-ft,.au-card .fs-lbl,.au-card .fs-f span{text-align:center}
  .au-card .fs-row{display:grid;grid-template-columns:1fr!important}
  .au-card .fs-f input{text-align:center}
  .au-card .fs-msg{justify-content:center}
  .au-card .fs-cons{justify-content:center}
  /* FAQ: без робота, обычный аккордеон */
  .fqA-side{display:none!important}
  .fq{padding-bottom:28px!important}
  .ct3{padding-top:20px!important}
  .fqA.on{display:block}
  .fqA .fq-acc{display:grid;margin-top:-10px}
  .fq-q:hover{transform:none}
  .fqA-q::after{content:"+";font-size:22px;font-weight:500;line-height:1;transition:transform .3s var(--ease),opacity .25s}
  .fqA-q.open::after{transform:rotate(45deg);opacity:1}
  .fqA-q.on:not(.open){background:var(--surface);color:var(--surface-ink);box-shadow:0 0 0 1px var(--card-edge)}
  .fqA-q.open{background:var(--ink);color:var(--paper);box-shadow:none}
  /* финальная форма: белая плашка по центру */
  .ct3-f .fs-lbl,.ct3-f .fs-f span{text-align:center}
  .ct3-f .fs-row{display:grid;grid-template-columns:1fr!important}
  .ct3-f .fs-f input{text-align:center}
  .ct3-f .fs-msg{justify-content:center}
  .ct3-f .fs-cons{justify-content:center}
}
@media (max-width:380px){ #pain .pill{font-size:13px} }
.fq-acc{display:none;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.fq-acc > div{overflow:hidden}
.fq-acc p{margin:0;padding:12px 22px 6px;font-size:15px;line-height:1.5;color:var(--muted)}
.fq-acc.open{grid-template-rows:1fr}


/* переключатель темы: светлая (гамма 1) / тёмная (гамма 3) — тихий, рядом с кнопками мессенджеров */
.thm{flex:none;position:relative;width:54px;height:30px;padding:0;border:1px solid var(--card-edge);border-radius:999px;background:var(--hover);cursor:pointer;transition:background .3s,border-color .3s}
.thm:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.thm-k{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--surface);color:var(--surface-ink);display:grid;place-items:center;box-shadow:0 2px 6px -2px rgba(0,0,0,.35);transition:transform .35s var(--ease)}
.thm svg{grid-area:1/1;width:14px;height:14px;transition:opacity .25s,transform .35s var(--ease)}
.thm-sun{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.thm-moon{fill:currentColor;opacity:0;transform:rotate(-40deg) scale(.6)}
.thm[aria-checked="true"] .thm-k{transform:translateX(24px)}
.thm[aria-checked="true"] .thm-sun{opacity:0;transform:rotate(40deg) scale(.6)}
.thm[aria-checked="true"] .thm-moon{opacity:1;transform:none}
.nav .thm{margin-left:-8px}
@media (max-width:1000px){ .nav .thm{margin-left:auto;margin-right:-12px} }

/* фоновое видео в карточке «Как мы работаем»: iframe Kinescope накрывает карточку целиком (как object-fit:cover) */
button.card{container-type:size}
.card .vbg{position:absolute;left:50%;top:50%;width:max(100%,calc(100cqh * 16 / 9));height:max(100%,calc(100cqw * 9 / 16));transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity .8s ease}
.card.vbg-on .vbg{opacity:1}
.card.vbg-on .vph span{opacity:0}
.card .play{z-index:2}
.card.vbg-on .play{width:46px;height:46px;background:rgba(255,255,255,.85)}

/* переключатель темы на компьютере — справа от шапки, в свободном поле до линии */
@media (min-width:1200px){ .nav .thm{position:absolute;left:calc(100% + 88px);top:50%;margin:0;transform:translateY(-50%)} }
/* тестовая панель: варианты перехода */
.tfx{display:flex;flex-direction:column;gap:2px;border-top:1px solid rgba(0,0,0,.08);margin-top:6px;padding-top:6px}
.tfx > span{font-size:11px;font-weight:600;padding:4px 8px 2px;text-transform:uppercase;letter-spacing:.1em;color:#6f675e}
.tfx button{border:0;background:none;text-align:left;font:500 13px var(--f);padding:6px 10px;border-radius:10px;cursor:pointer;color:inherit;white-space:nowrap}
.tfx button[aria-pressed="true"]{background:#1d1b19;color:#fff}
@media (max-width:700px){.tfx{display:none}}
/* переходы через View Transitions */
html.vt::view-transition-old(root),html.vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt::view-transition-group(thm-h),html.vt::view-transition-new(thm-h),html.vt::view-transition-old(thm-h){animation:none}
html.vt1::view-transition-new(root){clip-path:inset(0 calc(100% - var(--p,0px)) 0 0)}
html.vt1::view-transition-group(thm-h){transform:translateX(calc(var(--p,0px) - 30px))!important}
.vt-h{position:fixed;left:0;top:0;bottom:0;width:60px;z-index:200;pointer-events:none;view-transition-name:thm-h}
.vt-h i{position:absolute;left:28px;top:0;bottom:0;width:4px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 0 24px rgba(0,0,0,.35)}
.vt-h b{position:absolute;left:2px;top:calc(50% - 28px);width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.vt-h svg{width:24px;height:24px;fill:none;stroke:#1d1b19;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* оверлеи для пикселей и плит */
.tfx-ov{position:fixed;inset:0;z-index:300;pointer-events:none;overflow:hidden}
.tfx-px{display:grid}
.tfx-px i{display:block;transform:scale(0);transition:transform .26s steps(3) var(--d)}
.tfx-px.in i{transform:scale(1.02)}
.tfx-px.out i{transform:scale(0);transition-delay:var(--d2)}
.tfx-sl i{position:absolute;left:-15%;width:130%;display:block;transform:translateX(-120%) rotate(-3deg);transition:transform .56s cubic-bezier(.7,0,.25,1) var(--d);box-shadow:0 18px 40px -20px rgba(0,0,0,.45)}
.tfx-sl i.r{transform:translateX(120%) rotate(-3deg)}
.tfx-sl.in i{transform:translateX(0) rotate(-3deg)}
.tfx-sl.out i.l{transform:translateX(120%) rotate(-3deg)}
.tfx-sl.out i.r{transform:translateX(-120%) rotate(-3deg)}

/* вариант 6: большой робот поверх всего экрана и загрузка на его мониторе */
.rb-big{position:fixed;left:0;top:0;z-index:400;pointer-events:none;display:none;transform-origin:50% 50%;will-change:transform}
html.rb-zoom #fur{opacity:0!important}

/* тёмная тема: всплывающий квиз — серая подложка как карточка опроса, сама карточка опроса белая */
:root[data-pal="3"] .qpop-card{background:#222222;color:#f1eee8}
:root[data-pal="3"] .qpop .qa-card{--surface:#ffffff;--surface-ink:#161616;--ink:#161616;--muted:#6b655e;--hover:#f1eee8;--card-edge:rgba(0,0,0,.1);--paper:#f5f0ea;--frame:#ddd5cb;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
/* тестовая панель гаммы: если не влезает по высоте — прокручивается */
@media (min-width:701px){ .pals{max-height:calc(calc(100 * var(--vh,1vh)) - 122px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin} }
/* финальная тёмная плашка — на всю ширину экрана только на телефоне */
@media (max-width:600px){
  .ct3{padding-left:0!important;padding-right:0!important}
  .ct3 .ct-wrap{max-width:none}
  .ct3-card{border-radius:0;padding-left:16px;padding-right:16px}
}

/* ===== СТАТЬЯ БЛОГА — стиль главной, три варианта ===== */
body{margin:0;background:var(--paper)}
.ar{position:relative;background:var(--paper);padding:calc(2.2 * var(--vh,1vh)) 16px 0;overflow:hidden}
.ar::before,.cft::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px}
.ar > *,.cft > *{position:relative}.ar > .rail,.cft > .rail{position:absolute}
.cft{position:relative;background:var(--paper)}
.cft .ft3-grid{border-top:0;padding-top:0}.cft .ft3{position:relative;padding-top:clamp(40px,calc(6 * var(--vh,1vh)),64px)}
.cft .ft3::before{content:"";position:absolute;top:0;left:max(16px,calc(50% - 680px));right:max(16px,calc(50% - 680px));height:1px;background:var(--frame)}
.av-sw{width:max-content;max-width:100%;margin:18px auto 0;position:relative;z-index:5}
.av{display:none}.av.on{display:block;animation:pcIn .5s var(--ease) both}
.ar-w{position:relative}
.ar-col{max-width:760px;margin:0 auto}
.ar-wide{max-width:1240px;margin:0 auto}
:where(.ar) a{color:inherit}

/* шапка статьи */
.ar-crumbs{display:flex;flex-wrap:wrap;gap:6px 8px;font-size:14px;color:var(--muted);margin-bottom:22px}
.ar-crumbs a{text-decoration:none;color:var(--muted)}.ar-crumbs a:hover{color:var(--ink)}
.ar-crumbs i{font-style:normal;opacity:.5}.ar-crumbs span{color:var(--ink)}
.ar-tag{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;background:var(--yellow);color:var(--on-accent);text-decoration:none}
.av h1{margin:16px 0 0;font-weight:800;font-size:clamp(34px,calc(4 * var(--vw,1vw)),58px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance;color:var(--ink)}
.ar-meta{display:flex;align-items:center;gap:12px;margin-top:24px}
.ar-meta img{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--surface)}
.ar-meta b{display:block;font-size:15px;color:var(--ink)}.ar-meta span{font-size:14px;color:var(--muted)}
.ar-lede{font-size:clamp(19px,calc(1.5 * var(--vw,1vw)),22px);line-height:1.55;color:var(--ink);font-weight:500;margin:0}

/* обложка в фирменном виде: заголовок, «Читать», адрес блога */
.ar-cover{position:relative;border-radius:32px;overflow:hidden;background:#1d1b19;color:#f5f0ea;aspect-ratio:1200/630;display:grid;place-items:center;box-shadow:0 40px 70px -40px rgba(var(--sh),.7)}
.ar-cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(246,227,106,.16) 1px,transparent 1.3px);background-size:18px 18px}
.ar-cover-in{position:relative;display:grid;justify-items:center;gap:20px;text-align:center;padding:0 9%}
.ar-cover-in b{font-size:clamp(22px,calc(2.6 * var(--vw,1vw)),40px);line-height:1.1;letter-spacing:-.03em;font-weight:800;text-wrap:balance}
.ar-cover-btn{font-size:15px;font-weight:700;padding:10px 22px;border-radius:999px;background:var(--yellow);color:#1d1b19}
.ar-cover-in small{position:absolute;bottom:-14%;font-size:13px;opacity:.55;white-space:nowrap}
.ar-cover-y{background:var(--yellow);color:#1d1b19}.ar-cover-y::before{background-image:radial-gradient(rgba(29,27,25,.14) 1px,transparent 1.3px)}.ar-cover-y .ar-cover-btn{background:#1d1b19;color:#f5f0ea}

/* тело */
.ar-body{font-size:18px;line-height:1.65;color:var(--ink)}
.ar-body > p{margin:0 0 18px}
.ar-body h2{position:relative;margin:56px 0 18px;font-weight:800;font-size:clamp(26px,calc(2.3 * var(--vw,1vw)),34px);line-height:1.12;letter-spacing:-.03em;scroll-margin-top:90px;text-wrap:balance}
.ar-body h2 i{display:block;font-style:normal;font-size:14px;letter-spacing:.06em;color:var(--orange);margin-bottom:8px}
.ar-body code{font-size:.88em;background:var(--hover);padding:2px 6px;border-radius:6px}
.ar-table{margin:24px 0;overflow-x:auto;border-radius:22px;background:var(--surface);box-shadow:0 0 0 1px var(--card-edge)}
.ar-table table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.ar-table th{text-align:left;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:16px 20px;border-bottom:1px solid var(--frame);background:color-mix(in srgb,var(--yellow) 22%,var(--surface))}
.ar-table td{padding:14px 20px;border-bottom:1px solid color-mix(in srgb,var(--frame) 60%,transparent);color:var(--surface-ink)}
.ar-table tr:last-child td{border-bottom:0}
.ar-table td:last-child{font-weight:700}
.ar-ol{list-style:none;counter-reset:o;padding:0;margin:22px 0;display:grid;gap:10px}
.ar-ol li{counter-increment:o;position:relative;padding:16px 20px 16px 64px;background:var(--surface);border-radius:20px;box-shadow:0 0 0 1px var(--card-edge);font-size:17px;line-height:1.5}
.ar-ol li::before{content:counter(o);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--on-accent);font-weight:800;font-size:15px}

/* «Коротко» и оглавление */
.ar-short,.ar-toc{background:var(--surface);color:var(--surface-ink);border-radius:26px;padding:24px 26px;box-shadow:0 0 0 1px var(--card-edge)}
.ar-short h3,.ar-toc h3{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ar-short ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ar-short li{position:relative;padding-left:26px;font-size:16px;line-height:1.5}
.ar-short li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:4px;background:var(--orange)}
.ar-toc ol{margin:0;padding:0;list-style:none;counter-reset:t;display:grid;gap:8px}
.ar-toc li{counter-increment:t;display:flex;gap:10px;font-size:15px;line-height:1.35}
.ar-toc li::before{content:counter(t,decimal-leading-zero);flex:none;font-size:12px;font-weight:700;color:var(--muted);padding-top:2px;min-width:20px}
.ar-toc li.ar-toc-faq::before{content:"?"}
.ar-toc a{text-decoration:none;color:var(--surface-ink);transition:color .2s}
.ar-toc a:hover,.ar-toc a.cur{color:var(--orange)}
.ar-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0 8px}
.ar-body > .ar-short{margin:28px 0 8px}

/* призывы */
.ar-cta{border-radius:28px;margin:30px 0}
.ar-cta b{display:block;font-size:clamp(20px,calc(1.8 * var(--vw,1vw)),26px);line-height:1.15;letter-spacing:-.02em;font-weight:800}
.ar-cta p{margin:8px 0 0;font-size:16px;line-height:1.5}
.ar-cta1{display:flex;align-items:center;gap:20px 28px;justify-content:space-between;flex-wrap:wrap;padding:24px 26px;background-color:var(--yellow);color:var(--on-accent);background-image:radial-gradient(color-mix(in srgb,var(--on-accent) 16%,transparent) 1px,transparent 1.3px);background-size:16px 16px}
.ar-cta1 > div{flex:1 1 320px}.ar-cta1 p{color:color-mix(in srgb,var(--on-accent) 75%,transparent)}
.ar-btn-dark{background:var(--ink)!important;color:var(--paper)!important;border-color:transparent!important;text-decoration:none}
.btn-y{text-decoration:none}
.ar-cta2{background:var(--dk);color:var(--dk-ink);padding:clamp(26px,calc(3 * var(--vw,1vw)),40px);position:relative;overflow:hidden}
.ar-cta2::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:var(--yellow);opacity:.12}
.ar-cta-k{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin-bottom:12px}
.ar-cta2 p{color:var(--dk-muted)}
.ar-cta2 ul{list-style:none;padding:0;margin:18px 0 22px;display:flex;flex-wrap:wrap;gap:8px}
.ar-cta2 li{font-size:14px;padding:8px 14px;border-radius:999px;background:var(--dk2);box-shadow:0 0 0 1px var(--dk-line)}
.ar-cta2 small{display:block;margin-top:12px;font-size:13px;color:var(--dk-muted)}
.ar-cta3{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;background:var(--surface);color:var(--surface-ink);padding:clamp(22px,calc(2.6 * var(--vw,1vw)),34px);box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -36px rgba(var(--sh),.5)}
.ar-c3-l p{color:var(--muted)}
.ar-mgr{display:flex;align-items:center;gap:12px;margin-top:22px;padding:12px;border-radius:18px;background:var(--hover)}
.ar-mgr img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.ar-mgr b{font-size:16px!important}.ar-mgr span{font-size:13px;color:var(--muted)}
.ar-form{display:grid;gap:10px}
.ar-form > label:not(.ar-cons){display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--muted)}
.ar-form input[type=text],.ar-form input[type=tel]{font:500 16px var(--f);padding:13px 16px;border-radius:14px;border:0;background:var(--hover);color:var(--surface-ink);outline:none}
.ar-form input:focus{box-shadow:0 0 0 2px var(--orange)}
.ar-via{display:flex;gap:6px;flex-wrap:wrap}
.ar-via label{cursor:pointer}.ar-via input{position:absolute;opacity:0}
.ar-via span{display:inline-block;font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;background:var(--hover)}
.ar-via input:checked+span{background:var(--surface-ink);color:var(--surface)}
.ar-cons{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--muted)}
.ar-cons input{margin-top:2px;accent-color:var(--orange)}
.ar-form .btn-y{margin-top:4px;border:0;cursor:pointer}
.ar-ok{display:none;margin:0;font-weight:700;color:#2bc84a}.ar-form.done .ar-ok{display:block}

/* вопросы, источники, автор */
.ar-faq{margin-top:56px}
.ar-faq details{background:var(--surface);color:var(--surface-ink);border-radius:20px;box-shadow:0 0 0 1px var(--card-edge);margin-top:10px;overflow:hidden}
.ar-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 22px;font-size:17px;font-weight:700;line-height:1.35}
.ar-faq summary::-webkit-details-marker{display:none}
.ar-faq summary i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--hover);position:relative;transition:transform .3s,background .3s}
.ar-faq summary i::before,.ar-faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:currentColor;border-radius:2px}
.ar-faq summary i::after{transform:rotate(90deg)}
.ar-faq details[open] summary i{transform:rotate(45deg);background:var(--yellow);color:var(--on-accent)}
.ar-faq details p{margin:0;padding:0 22px 20px;font-size:16px;line-height:1.6;color:color-mix(in srgb,var(--surface-ink) 80%,transparent)}
.ar-src{margin-top:24px;border-top:1px solid var(--frame);padding-top:16px}
.ar-src summary{cursor:pointer;font-size:15px;font-weight:700;color:var(--muted)}
.ar-src ol{font-size:14px;line-height:1.6;color:var(--muted);padding-left:22px}
.ar-src-more{list-style:none;margin-left:-22px;font-style:italic}
.ar-author{display:flex;gap:20px;align-items:flex-start;margin-top:40px;padding:24px;border-radius:26px;background:var(--surface);color:var(--surface-ink);box-shadow:0 0 0 1px var(--card-edge)}
.ar-author img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none}
.ar-k{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ar-author b{display:block;font-size:20px;margin-top:2px}.ar-author small{font-size:14px;color:var(--muted)}
.ar-author p{margin:10px 0;font-size:15px;line-height:1.5}
.ar-author a{font-weight:700;color:var(--orange);text-decoration:none}

/* финальный призыв, похожие, кейс */
.ar-close{margin:72px -16px 0;padding:clamp(48px,calc(7 * var(--vh,1vh)),80px) 16px;background-color:var(--yellow);color:var(--on-accent);background-image:radial-gradient(color-mix(in srgb,var(--on-accent) 18%,transparent) 1px,transparent 1.3px);background-size:16px 16px}
.ar-close-in{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.ar-close-in > div:first-child{flex:1 1 520px}
.ar-close b{display:block;font-size:clamp(30px,calc(3.2 * var(--vw,1vw)),50px);font-weight:800;line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
.ar-close em{font-style:normal;display:inline-block;background:var(--ink);color:var(--paper);border-radius:.14em;padding:0 .18em .06em;transform:rotate(-2deg)}
.ar-close p{margin:14px 0 0;font-size:18px;color:color-mix(in srgb,var(--on-accent) 75%,transparent)}
.ar-close-btns{display:grid;gap:12px;justify-items:center}
.ar-ghost{font-weight:700;font-size:15px;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.ar-close-dk{background:var(--dk);color:var(--dk-ink);background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.3px)}
.ar-close-dk em{background:var(--yellow);color:var(--on-accent)}.ar-close-dk p{color:var(--dk-muted)}
.ar-close-dk .ar-btn-dark{background:var(--yellow)!important;color:var(--on-accent)!important}
.ar-related{padding-top:clamp(48px,calc(7 * var(--vh,1vh)),80px)}
.ar-related h2{margin:0 0 22px;font-size:clamp(26px,calc(2.3 * var(--vw,1vw)),34px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.ar-rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ar-rel{text-decoration:none;display:grid;gap:8px}
.ar-rel-cv{aspect-ratio:1200/630;border-radius:22px;display:grid;place-items:center;padding:0 10%;text-align:center;background:#1d1b19;color:#f5f0ea;transition:transform .35s var(--ease)}
.ar-rel1 .ar-rel-cv{background:var(--yellow);color:#1d1b19}.ar-rel2 .ar-rel-cv{background:var(--surface);color:var(--surface-ink);box-shadow:0 0 0 1px var(--card-edge)}
.ar-rel-cv b{font-size:17px;line-height:1.2;font-weight:800}
.ar-rel:hover .ar-rel-cv{transform:translateY(-4px)}
.ar-rel > span{font-size:13px;font-weight:700;color:var(--orange)}
.ar-rel > b{font-size:18px;line-height:1.3;color:var(--ink)}
.ar-more{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:26px}
.ar-more span{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.ar-more a{font-size:14px;padding:8px 14px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--card-edge);text-decoration:none}
.ar-promo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;margin:40px 0 clamp(48px,calc(7 * var(--vh,1vh)),80px);border-radius:32px;overflow:hidden;background:var(--dk);color:var(--dk-ink);text-decoration:none}
.ar-promo img{width:100%;height:100%;object-fit:cover;min-height:240px}
.ar-promo > div{padding:clamp(24px,calc(3 * var(--vw,1vw)),44px);display:flex;flex-direction:column;justify-content:center;gap:10px}
.ar-promo .ar-k{color:var(--yellow)}
.ar-promo b{font-size:clamp(24px,calc(2.2 * var(--vw,1vw)),34px);line-height:1.1;letter-spacing:-.03em}
.ar-promo em{font-style:normal;color:var(--yellow)}
.ar-promo p{margin:0;color:var(--dk-muted);font-size:16px;line-height:1.5}
.ar-promo i{font-style:normal;font-weight:700;color:var(--yellow);margin-top:6px}

/* ===== 1 — колонка ===== */
.ar-hero1{padding-top:clamp(28px,calc(5 * var(--vh,1vh)),56px)}
.ar-hero1 .ar-wide{margin-top:36px}
.av1 .ar-body{padding-top:40px}

/* ===== 2 — с боковой панелью ===== */
.ar-hero2{padding-top:clamp(28px,calc(5 * var(--vh,1vh)),56px)}
.ar-h2g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,calc(4 * var(--vw,1vw)),56px);align-items:center}
.ar-h2g .ar-lede{margin-top:22px}
.ar-2col{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,calc(4 * var(--vw,1vw)),64px);padding-top:44px;align-items:start}
.ar-2col .ar-body{max-width:760px}
.ar-side{align-self:stretch}
.ar-sticky{position:sticky;top:20px;display:grid;gap:14px}
.ar-toc-side{padding:22px}
.ar-toc-side li{font-size:14px}
.ar-mini{border-radius:24px;padding:22px;background-color:var(--yellow);color:var(--on-accent)}
.ar-mini b{display:block;font-size:19px;line-height:1.2;font-weight:800}
.ar-mini p{margin:8px 0 16px;font-size:14px;line-height:1.45}
.ar-mini .btn-y{width:100%;box-sizing:border-box;background:var(--ink);color:var(--paper);border-color:transparent;font-size:15px;padding:12px 18px}

/* ===== 3 — тёмная шапка ===== */
.ar-top{margin:0 -16px;padding:clamp(40px,calc(7 * var(--vh,1vh)),80px) 16px clamp(48px,calc(8 * var(--vh,1vh)),96px);background:var(--dk);color:var(--dk-ink);margin-top:-1px}
.ar-top .ar-crumbs a,.ar-top .ar-crumbs{color:var(--dk-muted)}.ar-top .ar-crumbs span{color:var(--dk-ink)}
.ar-top h1{color:var(--dk-ink)}
.ar-top .ar-lede{color:var(--dk-muted);margin-top:22px;font-weight:400}
.ar-top .ar-meta b{color:var(--dk-ink)}.ar-top .ar-meta span{color:var(--dk-muted)}.ar-top .ar-meta img{box-shadow:0 0 0 3px var(--dk2)}
.ar-h3g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,calc(4 * var(--vw,1vw)),64px);align-items:center}
.ar-cover-tilt{background:var(--yellow);color:#1d1b19;transform:rotate(3deg)}
.ar-cover-tilt::before{background-image:radial-gradient(rgba(29,27,25,.14) 1px,transparent 1.3px)}.ar-cover-tilt .ar-cover-btn{background:#1d1b19;color:#f5f0ea}
.ar-band{max-width:1240px;margin:-40px auto 0;position:relative;z-index:3}
.ar-band .ar-cta1{margin:0;box-shadow:0 30px 50px -30px rgba(0,0,0,.5)}
.ar-3col{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,calc(5 * var(--vw,1vw)),80px);padding-top:56px;align-items:start}
.ar-3col .ar-body{max-width:760px}
.ar-side3{align-self:stretch}
.ar-toc-rail{background:none;box-shadow:none;padding:0;color:var(--ink)}
.ar-toc-rail ol{gap:0;border-left:2px solid var(--frame)}
.ar-toc-rail li{padding:9px 0 9px 16px;margin-left:-2px;border-left:2px solid transparent;font-size:14px}
.ar-toc-rail li:has(a.cur){border-left-color:var(--orange)}
.ar-toc-rail a{color:var(--ink)}
.av3 .ar-short{background:var(--dk);color:var(--dk-ink);box-shadow:none}.av3 .ar-short h3{color:var(--yellow)}

@media (max-width:1000px){
  .ar-pair,.ar-h2g,.ar-2col,.ar-h3g,.ar-3col,.ar-cta3,.ar-promo,.ar-rel-grid{grid-template-columns:1fr}
  .ar-side,.ar-side3{display:none}
  .ar-cover-tilt{transform:rotate(1.5deg)}
  .ar-band{margin:-28px 0 0}
}
@media (max-width:700px){
  .ar-body{font-size:17px}
  .ar-author{flex-direction:column}
  .ar-cover-in small{display:none}
}
/* правки */
.ar .btn-y{color:var(--on-accent)}
.ar-promo b{color:var(--dk-ink)}
.av-sw{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);margin:0;z-index:50;box-shadow:0 14px 40px -12px rgba(0,0,0,.35)}
.pc-sw{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--card-edge);flex-wrap:nowrap}
.pc-sw span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:0 8px}
.pc-sw button{border:0;background:none;font:600 13px var(--f);color:var(--surface-ink);padding:8px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.pc-sw button[aria-pressed="true"]{background:var(--surface-ink);color:var(--surface)}
@media (max-width:1000px){.ar-pair,.ar-h2g,.ar-2col,.ar-h3g,.ar-3col,.ar-cta3,.ar-promo,.ar-rel-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.av-sw span{display:none}.pc-sw button{padding:7px 9px;font-size:12px}}
@media (max-width:1000px){.av-sw{bottom:76px}}
/* вариант 1: всё по левому краю обложки, справа — подарок и «В статье» */
.ar-h1t{max-width:900px}
.ar-h1c{margin-top:36px}
.ar-1g{display:grid;grid-template-columns:minmax(0,760px) 340px;justify-content:space-between;gap:48px;padding-top:44px;align-items:start}
.ar-side1{align-self:stretch}
.ar-gift{position:relative;background:var(--surface);color:var(--surface-ink);border-radius:28px;padding:22px 22px 20px;box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -36px rgba(var(--sh),.5);display:grid;gap:10px;text-align:center;justify-items:center}
.ar-gift-svg{width:150px;height:auto;margin:-6px 0 2px;animation:giftBob 3.2s ease-in-out infinite}
@keyframes giftBob{50%{transform:translateY(-6px) rotate(-2deg)}}
.ar-gift b{font-size:22px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.ar-gift p{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
.ar-gift .ar-via{justify-content:center;margin-top:4px}
.ar-gift .btn-y{width:100%;box-sizing:border-box;font-size:15px;padding:13px 18px;margin-top:4px}
.ar-gift small{font-size:12px;color:var(--muted)}
@media (max-width:1000px){.ar-1g{grid-template-columns:minmax(0,1fr)}.ar-side1{display:none}}
/* выбран вариант 3: оранжевая рубрика, боковая колонка закреплена на всю статью, над оглавлением — подарок */
.ar{overflow:clip}
.ar-top .ar-tag{background:var(--orange);color:var(--on-orange)}
.ar-3col{grid-template-columns:300px minmax(0,1fr)}
.ar-side3 .ar-sticky{top:16px;gap:22px}
.ar-gift .ar-via{gap:5px}.ar-gift .ar-via span{font-size:13px;padding:7px 11px}
.ar-gq{font-size:13px;font-weight:700;color:var(--surface-ink);margin-top:2px}
.ar-gin{width:100%;box-sizing:border-box;font:500 15px var(--f);padding:12px 14px;border-radius:14px;border:0;background:var(--hover);color:var(--surface-ink);outline:none;text-align:center}
.ar-gin:focus{box-shadow:0 0 0 2px var(--orange)}
.ar-gift .ar-cons{text-align:left;font-size:12px}
.ar-gift button{border:0;cursor:pointer}
.ar-gift.done .ar-ok{display:block}
.ar-side3 .ar-toc-rail li{padding:7px 0 7px 14px}
/* боковая колонка помещается в экран целиком */
.ar-side3 .ar-sticky{gap:16px;max-height:calc(calc(100 * var(--vh,1vh)) - 32px);overflow:auto;scrollbar-width:none}
.ar-side3 .ar-sticky::-webkit-scrollbar{display:none}
.ar-side3 .ar-gift{padding:16px 16px 14px;gap:8px}
.ar-side3 .ar-gift-svg{width:84px;margin:-4px 0 0}
.ar-side3 .ar-gift b{font-size:19px}
.ar-side3 .ar-gift p{font-size:14px}
.ar-side3 .ar-gift .ar-via{flex-wrap:nowrap;gap:4px}.ar-side3 .ar-gift .ar-via span{font-size:12px;padding:6px 9px}
.ar-side3 .ar-gin{padding:10px 12px;font-size:14px}
.ar-side3 .btn-y{padding:11px 16px;font-size:14px}
.ar-side3 .ar-toc-rail h3{margin-bottom:8px}
.ar-side3 .ar-toc-rail li{padding:5px 0 5px 14px;font-size:13px;line-height:1.3}
/* ===== тёмный первый экран вместе с шапкой; 3 варианта ===== */
.ar-top{margin:calc(-2.2 * var(--vh,calc(1 * var(--vh,1vh)))) -16px 0;padding:calc(2.2 * var(--vh,calc(1 * var(--vh,1vh)))) 16px clamp(72px,calc(11 * var(--vh,1vh)),120px);background:var(--dk);color:var(--dk-ink);position:relative}
.ar-top::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.3px);background-size:22px 22px}
.ar-top > *{position:relative}
.hx{display:none;padding-top:clamp(36px,calc(6 * var(--vh,1vh)),72px)}.hx.on{display:block;animation:pcIn .5s var(--ease) both}
.ar-top .ar-tag{background:var(--orange);color:var(--on-orange)}
.ar-band{margin-top:-44px}
/* 2 — по центру */
.hx2-in{display:grid;justify-items:center;text-align:center}
.hx2 h1{max-width:1000px;font-size:clamp(36px,calc(4.4 * var(--vw,1vw)),66px)}
.hx2 .ar-lede{max-width:720px;margin-top:22px}
.hx2 .ar-crumbs{justify-content:center}
.hx2 .ar-meta{text-align:left}
.hx2-cv{width:min(820px,100%);margin-top:44px}.hx2-cv .ar-cover{transform:rotate(-1.5deg)}
/* 3 — журнал */
.hx3-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.hx3-top .ar-crumbs{margin:0}
.hx3-g{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(24px,calc(4 * var(--vw,1vw)),64px);align-items:end;margin-top:clamp(28px,calc(5 * var(--vh,1vh)),56px)}
.hx3 h1{margin:0;font-size:clamp(42px,calc(5.4 * var(--vw,1vw)),84px);line-height:.98;letter-spacing:-.05em}
.hx3-cv{transform:rotate(5deg);margin-bottom:12px}.hx3-cv .ar-cover-in b{font-size:20px}.hx3-cv .ar-cover-in{gap:12px}.hx3-cv .ar-cover-btn{font-size:13px;padding:8px 16px}
.hx3-b{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,calc(4 * var(--vw,1vw)),64px);margin-top:clamp(28px,calc(4 * var(--vh,1vh)),44px);padding-top:clamp(24px,calc(3 * var(--vh,1vh)),32px);border-top:1px solid var(--dk-line);align-items:start}
.hx3-b .ar-lede{margin:0}
.hx3-b .ar-meta{margin-top:0}
.hx-stats{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hx-stats li{background:var(--dk2);box-shadow:0 0 0 1px var(--dk-line);border-radius:18px;padding:12px 14px;display:grid;gap:2px}
.hx-stats b{font-size:28px;font-weight:800;letter-spacing:-.04em;color:var(--dk-ink)}
.hx-stats span{font-size:12px;line-height:1.3;color:var(--dk-muted)}
@media (max-width:1000px){.hx3-g,.hx3-b{grid-template-columns:minmax(0,1fr)}.hx3-cv{max-width:360px;transform:rotate(2deg)}.hx2-cv .ar-cover{transform:none}}
.hx2{padding-bottom:28px}
/* выбран «Журнал»: обложка крупнее, вводный абзац мельче — по высоте с автором и цифрами */
.hx[hidden]{display:none!important}
.hx3-g{grid-template-columns:minmax(0,1fr) 460px}
.hx3-cv{transform:rotate(4deg)}.hx3-cv .ar-cover-in b{font-size:26px}.hx3-cv .ar-cover-btn{font-size:14px;padding:9px 18px}
.hx3-b .ar-lede{font-size:17px;line-height:1.5}
@media (max-width:1000px){.hx3-g{grid-template-columns:minmax(0,1fr)}.hx3-cv{max-width:460px}}
.hx3 h1{font-size:clamp(36px,calc(4.1 * var(--vw,1vw)),60px);line-height:1}
.hx3-g{margin-top:clamp(20px,calc(3.5 * var(--vh,1vh)),40px)}
.hx{padding-top:clamp(28px,calc(4.5 * var(--vh,1vh)),56px)}
.hx3-b{margin-top:clamp(22px,calc(3 * var(--vh,1vh)),36px)}
/* ===== плашка-призыв под шапкой: 3 варианта ===== */
.bx-sw{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;box-shadow:0 14px 40px -12px rgba(0,0,0,.35)}
@media (max-width:1000px){.bx-sw{bottom:76px}}
.ar-c1-t{display:flex;align-items:center;gap:18px;flex:1 1 420px}
.ar-c1-ic{display:none;flex:none;width:56px;height:56px;border-radius:18px;place-items:center;font-style:normal;font-weight:800;font-size:26px}
.ar-band .ar-cta1 b{font-size:clamp(20px,calc(1.8 * var(--vw,1vw)),26px)}
.ar-band .ar-cta1 p{font-size:16px}
/* 1 — белая карточка, жёлтая только иконка */
.bx-1 .ar-cta1{background:var(--surface);background-image:none;color:var(--surface-ink);box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -28px rgba(0,0,0,.55)}
.bx-1 .ar-cta1 p{color:var(--muted)}
.bx-1 .ar-c1-ic{display:grid;background:var(--yellow);color:var(--on-accent)}
/* 2 — жёлтая без точек, текст тёмный и плотнее */
.bx-2 .ar-cta1{background-image:none;background-color:var(--yellow)}
.bx-2 .ar-cta1 p{color:color-mix(in srgb,var(--on-accent) 85%,transparent);font-weight:500}
.bx-2 .ar-c1-ic{display:grid;background:var(--on-accent);color:var(--yellow)}
/* 3 — тёмная карточка с жёлтой кнопкой и жёлтым словом */
.bx-3 .ar-cta1{background:var(--dk2);background-image:none;color:var(--dk-ink);box-shadow:0 0 0 1px var(--dk-line),0 30px 50px -28px rgba(0,0,0,.7)}
.bx-3 .ar-cta1 p{color:var(--dk-muted)}
.bx-3 .ar-c1-ic{display:grid;background:var(--yellow);color:var(--on-accent)}
.bx-3 .ar-btn-dark{background:var(--yellow)!important;color:var(--on-accent)!important}
/* ===== плашка под шапкой: 3 разных стиля на жёлтом ===== */
.bn{display:none;border-radius:28px;background:var(--yellow);color:var(--on-accent);padding:22px 26px;box-shadow:0 30px 50px -30px rgba(0,0,0,.55);align-items:center;gap:22px}
.bn.on{display:flex;animation:pcIn .4s var(--ease) both}
.bn b{display:block;font-size:clamp(20px,calc(1.7 * var(--vw,1vw)),25px);line-height:1.15;letter-spacing:-.02em;font-weight:800}
.bn p{margin:6px 0 0;font-size:16px;line-height:1.45;color:color-mix(in srgb,var(--on-accent) 82%,transparent);font-weight:500}
.bn .btn-y{flex:none}
.bn-ic{flex:none;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--on-accent);color:var(--yellow);font-style:normal}
.bn-ic svg{width:28px;height:28px}
.bn-k{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--on-accent);color:var(--yellow);margin-bottom:10px}
/* 1 — иконка калькулятора, заголовок и шаги расчёта */
.bn1-t{flex:1;min-width:0}
.bn1-st{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;font-weight:600}
.bn1-st li{display:flex;align-items:center;gap:7px}
.bn1-st span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:color-mix(in srgb,var(--on-accent) 12%,transparent)}
.bn1-st li+li::before{content:"→";margin-right:11px;opacity:.45}
.bn1-res span{background:var(--on-accent);color:var(--yellow)}
/* 2 — слева текст, справа маленький кусочек квиза */
.bn2{padding:20px 20px 20px 30px;gap:30px}
.bn2-t{flex:1;min-width:0}
.bn2-q{flex:none;width:340px;display:grid;gap:7px;padding:16px;border-radius:20px;background:var(--surface);color:var(--surface-ink);text-decoration:none;transform:rotate(1.5deg);box-shadow:0 18px 30px -18px rgba(0,0,0,.45);transition:transform .3s var(--ease)}
.bn2-q:hover{transform:rotate(0) translateY(-3px)}
.bn2-n{font-size:12px;font-weight:700;color:var(--muted)}
.bn2-q b{font-size:17px;margin-bottom:2px}
.bn2-o{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;font-weight:600;padding:10px 12px;border-radius:12px;background:var(--hover)}
.bn2-o i{flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--surface-ink) 35%,transparent)}
.bn2-go{justify-self:start;margin-top:4px;font-size:14px;font-weight:700;padding:9px 16px;border-radius:999px;background:var(--on-accent);color:var(--yellow)}
/* 3 — сообщение от менеджера */
.bn3 img{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--surface)}
.bn3-msg{flex:1;min-width:0;position:relative;background:var(--surface);color:var(--surface-ink);border-radius:20px 20px 20px 6px;padding:14px 18px}
.bn3-msg p{color:var(--muted)}
.bn3-who{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
.bn3-act{display:grid;justify-items:center;gap:8px}
.bn3-act small{font-size:13px;font-weight:600}
.bn3-act small::first-letter{color:#1c9b3a}
@media (max-width:1000px){
  .bn.on{flex-direction:column;align-items:stretch;text-align:left}
  .bn2-q{width:auto;transform:none}
  .bn3.on{align-items:flex-start}.bn3-act{justify-items:start}
}
.bn2-q{width:420px;grid-template-columns:1fr 1fr;gap:6px;padding:12px 14px}
.bn2-n{grid-column:1/-1;display:none}
.bn2-q b{grid-column:1/-1;font-size:15px;margin:0}
.bn2-o{font-size:13px;padding:8px 10px}
.bn2-go{grid-column:1/-1;justify-self:stretch;text-align:center;margin-top:2px;padding:8px 14px}
.bn2 .bn-k{margin-bottom:8px}
.bn3 .bn3-msg b{font-size:clamp(18px,calc(1.5 * var(--vw,1vw)),22px)}
.bn3 .bn3-msg p{font-size:15px}
.bn2{padding-top:18px;padding-bottom:18px}
/* превью квиза — рабочий мини-квиз */
.bn2-t{flex:0 1 auto}
.bn2 b br{display:inline}
.mq{flex:1;max-width:470px;margin-left:auto;display:grid;gap:10px;padding:14px 16px 16px;border-radius:20px;background:var(--surface);color:var(--surface-ink);transform:rotate(1.2deg);box-shadow:0 18px 30px -18px rgba(0,0,0,.45)}
.mq-top{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--muted)}
.mq-bar{flex:1;height:4px;border-radius:4px;background:var(--hover);overflow:hidden}.mq-bar i{display:block;height:100%;width:33%;background:var(--orange);transition:width .4s var(--ease)}
.mq-back{border:0;background:none;font:600 12px var(--f);color:var(--muted);cursor:pointer;padding:0}
.mq-s{display:none;gap:8px;min-height:84px;align-content:start}.mq-s.on{display:grid;animation:pcIn .35s var(--ease) both}
.mq-s > b{font-size:16px!important;margin:0}
.mq-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mq-opts label{cursor:pointer}.mq-opts input{position:absolute;opacity:0}
.mq-opts span{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:11px 12px;border-radius:12px;background:var(--hover);transition:background .2s,box-shadow .2s}
.mq-opts span::after{content:"";flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--surface-ink) 35%,transparent)}
.mq-opts label:hover span{box-shadow:0 0 0 2px var(--surface-ink)}
.mq-opts input:checked+span{background:var(--yellow)}.mq-opts input:checked+span::after{box-shadow:inset 0 0 0 5px var(--on-accent)}
.mq-row{display:flex;gap:6px}
.mq-row input{flex:1;min-width:0;font:500 15px var(--f);padding:11px 12px;border-radius:12px;border:0;background:var(--hover);color:var(--surface-ink);outline:none}
.mq-row input:focus{box-shadow:0 0 0 2px var(--orange)}
.mq-next{flex:none;border:0;cursor:pointer;font:700 14px var(--f);padding:0 16px;border-radius:12px;background:var(--on-accent);color:var(--yellow);transition:opacity .2s}
.mq-next:disabled{opacity:.35;cursor:default}
.mq-cons{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}.mq-cons input{accent-color:var(--orange);margin:0}
.mq-done{justify-items:start}.mq-done b{color:#1c9b3a}.mq-done p{margin:0!important;font-size:14px!important;color:var(--muted)!important}
@media (max-width:1000px){.mq{max-width:none;margin:0;transform:none}.bn2 b br{display:none}}
.mq-n b{display:inline!important;font-size:12px!important;color:var(--surface-ink)}
.mq{padding:12px 14px 14px;gap:8px}
.mq-s{min-height:72px;gap:7px}
.mq-opts span,.mq-row input{padding:10px 12px}
.bn2{padding-top:16px;padding-bottom:16px}
/* оранжевые кнопки с чёрным текстом */
.ar-btn-or,.mq-next{background:var(--orange)!important;color:#1d1b19!important;border-color:transparent!important}
.mq-cons{align-items:flex-start;line-height:1.35}.mq-cons input{margin-top:2px}
.gf-sw{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;box-shadow:0 14px 40px -12px rgba(0,0,0,.35)}
@media (max-width:1000px){.gf-sw{display:none}}
/* ===== подарок: 3 варианта, всё по левому краю ===== */
.ar-side3 .ar-gift{text-align:left;justify-items:stretch}
.ar-side3 .ar-gift .ar-via{justify-content:flex-start}
.ar-side3 .ar-gin{text-align:left}
.gf-head{display:flex;gap:12px;align-items:flex-start}
.gf-head b{display:block}
.gf-head p{margin:6px 0 0}
/* 1 — подарок слева от заголовка */
.gf-1 .ar-gift-svg{flex:none;width:64px!important;margin:0!important}
/* 2 — жёлтая шапка с крупным подарком, выглядывающим справа */
.gf-2{padding:0!important;overflow:hidden}
.gf-2 .gf-head{position:relative;display:block;background:var(--yellow);color:var(--on-accent);padding:18px 104px 16px 16px;margin-bottom:4px}
.gf-2 .gf-head p{color:color-mix(in srgb,var(--on-accent) 78%,transparent)!important}
.gf-2 .ar-gift-svg{position:absolute;right:-8px;top:50%;width:112px!important;margin:-50px 0 0!important;transform:rotate(10deg);animation:none}
.gf-2 > :not(.gf-head){margin-left:16px;margin-right:16px}
.gf-2 > small{margin-bottom:14px}
/* 3 — тёмная карточка */
.gf-3{background:var(--dk)!important;color:var(--dk-ink)!important;box-shadow:0 30px 50px -30px rgba(0,0,0,.6)!important}
.gf-3 .gf-head{flex-direction:column;gap:8px}
.gf-3 .ar-gift-svg{width:70px!important;margin:0!important}
.gf-3 .ar-gift-svg g[stroke]{stroke:#f5f0ea}
.gf-3 .ar-gift-svg > g:last-child{fill:#f6e36a}
.gf-3 .gf-head p,.gf-3 small,.gf-3 .ar-cons{color:var(--dk-muted)!important}
.gf-3 .ar-gq{color:var(--dk-ink)}
.gf-3 .ar-via span{background:var(--dk2);color:var(--dk-ink);box-shadow:0 0 0 1px var(--dk-line)}
.gf-3 .ar-via input:checked+span{background:var(--yellow);color:var(--on-accent)}
.gf-3 .ar-gin{background:var(--dk2);color:var(--dk-ink);box-shadow:0 0 0 1px var(--dk-line)}
.gf-2 .btn-y,.gf-2 .ar-gin{width:auto!important}
/* плашка с мини-квизом: уже, по центру, текст и квиз ближе */
.ar-band .bn2.on{width:max-content;max-width:100%;margin:0 auto;gap:36px;box-sizing:border-box}
.bn2 .mq{flex:none;width:420px;margin-left:0}
@media (max-width:1000px){.ar-band .bn2.on{width:auto}.bn2 .mq{width:auto}}
/* выбран: раскладка тёмного варианта, но светлая карточка */
.gf-4 .gf-head{flex-direction:column;gap:8px}
.gf-4 .ar-gift-svg{width:70px!important;margin:0!important}
.ar-side3 .ar-gift > small{justify-self:center;text-align:center;font-size:11px}
.ar-cta2::after{top:auto;bottom:-70px;right:-70px}
/* боковая колонка: без внутренней прокрутки, видна целиком до «Частых вопросов» */
.ar-side3 .ar-sticky{max-height:none;overflow:visible}
.ar-side3 .ar-sticky{top:16px!important}
.ar-faq details.closing summary i{transform:none;background:var(--hover);color:inherit}
.ar-faq summary i{transition:transform .35s var(--ease),background .3s,color .3s}
/* ===== форма «Разберём именно ваш сайт»: 3 варианта ===== */
.ar-c3wrap{margin:30px 0}
.c3-sw{width:max-content;margin-bottom:10px}
.ar-cta3x{margin:0;background:var(--surface);color:var(--surface-ink);border-radius:28px;box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -36px rgba(var(--sh),.5);overflow:hidden}
.c3v{display:none}.c3v.on{display:grid;animation:pcIn .4s var(--ease) both}
.c3-h{display:block;font-size:clamp(22px,calc(2 * var(--vw,1vw)),28px)!important;line-height:1.1;letter-spacing:-.03em;font-weight:800}
.c3-p{margin:10px 0 0!important;font-size:15px!important;color:var(--muted);line-height:1.5}
.ar-cta3x .ar-mgr{margin-top:auto}
.ar-cta3x .ar-form .btn-y{border:0}
/* 1 */
.c3a{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:clamp(22px,calc(2.6 * var(--vw,1vw)),32px)}
.c3-l{display:flex;flex-direction:column;gap:18px}
.c3-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.c3-list li{display:flex;gap:12px;align-items:flex-start}
.c3-list i{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:14px;background:var(--yellow);color:var(--on-accent)}
.c3-list b{display:block;font-size:16px!important;line-height:1.3}
.c3-list span{font-size:14px;color:var(--muted)}
.c3a .ar-form{background:var(--hover);border-radius:22px;padding:20px}
.c3a .ar-form input[type=text],.c3a .ar-form input[type=tel]{background:var(--surface)}
.c3a .ar-via span{background:var(--surface)}
/* 2 */
.c3b{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0}
.c3b-ph{position:relative;min-height:440px;background:var(--yellow)}
.c3b-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c3b-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.65))}
.c3b-cap{position:absolute;z-index:2;left:20px;bottom:20px;color:#fff}
.c3b-cap b{display:block;font-size:20px!important}.c3b-cap span{font-size:14px;opacity:.85}
.c3b-tag{position:absolute;z-index:2;left:16px;top:16px;font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;background:var(--yellow);color:var(--on-accent)}
.c3-r{padding:clamp(22px,calc(2.6 * var(--vw,1vw)),32px);display:flex;flex-direction:column;gap:18px}
/* 3 */
.c3c{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;padding:clamp(22px,calc(2.6 * var(--vw,1vw)),32px)}
.c3c-shot{position:relative;border-radius:16px;overflow:visible;margin:4px 0}
.c3c-shot img{display:block;width:100%;border-radius:16px;box-shadow:0 0 0 1px var(--card-edge);filter:saturate(.85)}
.pin{position:absolute;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;line-height:1.2;padding:6px 10px 6px 6px;border-radius:999px;background:var(--ink);color:var(--paper);box-shadow:0 10px 20px -10px rgba(0,0,0,.6);white-space:nowrap}
.pin i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:var(--orange);color:#1d1b19;font-size:11px}
.p1{left:6%;top:16%;transform:rotate(-3deg)}.p2{right:4%;top:44%;transform:rotate(2deg)}.p3{left:14%;bottom:10%;transform:rotate(-1deg)}
@media (max-width:1000px){.c3a,.c3b,.c3c{grid-template-columns:minmax(0,1fr)}.c3b-ph{min-height:320px}}
.ar-cta3x .ar-form .btn-y{font-size:16px;white-space:nowrap;padding-left:16px;padding-right:16px}
/* выбран «Что в разборе»: плотнее */
.ar-cta3x{line-height:1.35}
.c3a .c3-l{gap:0}
.c3-free{display:inline-block;vertical-align:.15em;margin-left:6px;font-size:.5em;font-weight:800;letter-spacing:0;padding:6px 12px;border-radius:999px;background:var(--yellow);color:var(--on-accent);transform:rotate(-3deg)}
.c3a .c3-p{margin-top:8px!important}
.c3-k{display:block;margin:22px 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.c3-list{gap:12px}
.c3-list li{align-items:center}
.c3-list li div{display:grid;gap:2px}
.c3-list b{line-height:1.2}
.c3-list span{line-height:1.3}
.c3a .ar-mgr{margin-top:22px;padding:10px 12px;gap:10px;line-height:1.25}
.c3a .ar-mgr img{width:44px;height:44px}
.c3a .ar-mgr div{display:grid;gap:2px}
.c3a .ar-mgr span{line-height:1.25}
.c3-free{font-size:1em;font-weight:800;letter-spacing:-.03em;padding:0 .18em .06em;border-radius:.14em;background:var(--ink);color:var(--paper);transform:rotate(-2deg);vertical-align:baseline;margin-left:.15em}
.c3-p br.dk{display:inline}@media (max-width:700px){.c3-p br.dk{display:none}}
/* ===== карточка автора: 3 варианта ===== */
.atr-wrap{margin-top:40px}
.atr-sw{width:max-content;margin-bottom:10px}
.atr{display:none;background:var(--surface);color:var(--surface-ink);border-radius:26px;box-shadow:0 0 0 1px var(--card-edge);line-height:1.35}
.atr.on{animation:pcIn .4s var(--ease) both}
.atr b{font-weight:800}
.atr small{font-size:14px;color:var(--muted)}
.atr p{margin:0;font-size:15px;line-height:1.5}
.atr-tg{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;padding:10px 16px;border-radius:999px;background:var(--orange);color:#1d1b19!important;text-decoration:none;white-space:nowrap}
.atr-tg svg{width:16px;height:16px}
/* 1 — всё в одну строку */
.atr1.on{display:grid;grid-template-columns:64px auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 18px}
.atr1 img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.atr1-t{display:grid;gap:2px}.atr1-t b{font-size:18px}
.atr1 p{padding-left:18px;border-left:1px solid var(--frame);color:var(--muted);font-size:14px}
/* 2 — цитата */
.atr2.on{display:grid;gap:14px;padding:22px 24px}
.atr2-top{display:flex;align-items:center;gap:12px}
.atr2-top img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.atr2-top div{display:grid;gap:2px}.atr2-top b{font-size:17px}
.atr2-q{font-size:clamp(19px,calc(1.6 * var(--vw,1vw)),22px)!important;font-weight:700;line-height:1.3!important;letter-spacing:-.02em}
.atr2-bot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--frame)}
.atr2-bot span{font-size:14px;color:var(--muted)}
/* 3 — с фото */
.atr3.on{display:grid;grid-template-columns:200px minmax(0,1fr);overflow:hidden}
.atr3-ph{position:relative;background:var(--yellow)}
.atr3-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.atr3-t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:20px 22px}
.atr3-t > b{font-size:20px}
.atr3-t p{margin-top:8px}
.atr3-t ul{list-style:none;margin:12px 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.atr3-t li{font-size:13px;padding:6px 10px;border-radius:999px;background:var(--hover)}
@media (max-width:1000px){.atr1.on{grid-template-columns:56px minmax(0,1fr)}.atr1 img{width:56px;height:56px}.atr1 p{grid-column:1/-1;border:0;padding:0}.atr1 .atr-tg{grid-column:1/-1;justify-self:start}.atr3.on{grid-template-columns:1fr}.atr3-ph{height:240px}}
.atr1.on{grid-template-columns:64px auto minmax(220px,1fr) auto}
.atr1.on{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"img t tg" "img p p";column-gap:16px;row-gap:6px;padding:18px 20px}
.atr1 img{grid-area:img;align-self:start}.atr1-t{grid-area:t;align-self:center}.atr1 .atr-tg{grid-area:tg;align-self:center}
.atr1 p{grid-area:p;border:0;padding:0;color:var(--muted)}
@media (max-width:1000px){.atr1.on{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"img t" "p p" "tg tg"}.atr1 .atr-tg{justify-self:start}}
/* колонка закреплена сверху и при этом прокручивается сама, если навести на неё курсор */
.ar-side3 .ar-sticky{max-height:calc(calc(100 * var(--vh,1vh)) - 32px)!important;overflow-y:auto!important;scrollbar-width:thin;scrollbar-color:var(--frame) transparent;overscroll-behavior:auto;padding-right:4px}
.ar-side3 .ar-sticky::-webkit-scrollbar{display:block;width:4px}.ar-side3 .ar-sticky::-webkit-scrollbar-thumb{background:var(--frame);border-radius:4px}
.ar-side3 .ar-sticky{scrollbar-width:none;padding-right:0}
.ar-side3 .ar-sticky::-webkit-scrollbar{display:none}
/* ===== «Читайте также»: 3 формата ===== */
.ar-related{padding-top:clamp(56px,calc(8 * var(--vh,1vh)),90px)}
.rl-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.rl-top h2{margin:0}
.rlv{display:none}.rlv.on{display:grid;animation:pcIn .4s var(--ease) both}
.ar-related a{text-decoration:none;color:inherit}
.ar-related small{font-size:13px;font-weight:700;color:var(--orange)}
.rl-cv{position:relative;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;padding:0 9%;aspect-ratio:1200/630;border-radius:20px;overflow:hidden;transition:transform .4s var(--ease)}
.rl-cv b{font-size:clamp(15px,calc(1.25 * var(--vw,1vw)),19px);line-height:1.2;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.rl-cv i{font-style:normal;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px}
.rl-d{background:#1d1b19;color:#f5f0ea}.rl-d i{background:var(--yellow);color:#1d1b19}
.rl-y{background:var(--yellow);color:#1d1b19}.rl-y i{background:#1d1b19;color:#f5f0ea}
.rl-w{background:var(--surface);color:var(--surface-ink);box-shadow:inset 0 0 0 1px var(--card-edge)}.rl-w i{background:var(--orange);color:#1d1b19}
.rl-sm{padding:0 6%;gap:6px;border-radius:14px}.rl-sm b{font-size:11px}.rl-sm i{display:none}
/* 1 — список строками */
.rl1{border-top:1px solid var(--frame)}
.rl1-row{display:grid;grid-template-columns:48px minmax(0,1fr) 200px 44px;gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--frame);transition:padding .3s var(--ease),background .3s}
.rl1-row:hover{background:var(--surface);padding-left:16px;padding-right:16px;border-radius:20px}
.rl1-n{font-size:15px;font-weight:700;color:var(--muted)}
.rl1-t{display:grid;gap:4px}.rl1-t b{font-size:clamp(18px,calc(1.5 * var(--vw,1vw)),22px);line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.rl1-row:hover .mc-go{transform:rotate(-45deg)}
/* 2 — карточки */
.rl2{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rl2-card{display:grid;align-content:start;background:var(--surface);border-radius:26px;padding:8px;box-shadow:0 0 0 1px var(--card-edge);transition:transform .35s var(--ease),box-shadow .35s}
.rl2-card:hover{transform:translateY(-5px);box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -30px rgba(var(--sh),.6)}
.rl2-b{display:grid;gap:6px;padding:14px 10px 10px}
.rl2-b b{font-size:17px;line-height:1.3;color:var(--surface-ink)}
.rl2-b em{font-style:normal;font-size:14px;font-weight:700;color:var(--muted);margin-top:4px}
.rl2-card:hover em{color:var(--orange)}
/* 3 — одна главная + две сбоку */
.rl3{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.rl3-big{position:relative;display:block;border-radius:26px;overflow:hidden}
.rl3-big .rl-cv{aspect-ratio:auto;height:100%;min-height:340px;border-radius:26px;padding-bottom:70px}
.rl3-big .rl-cv b{font-size:clamp(24px,calc(2.2 * var(--vw,1vw)),32px)}
.rl3-ov{position:absolute;left:12px;right:12px;bottom:12px;display:grid;gap:4px;background:var(--surface);color:var(--surface-ink);border-radius:18px;padding:14px 16px}
.rl3-ov b{font-size:17px;line-height:1.3}
.rl3-side{display:grid;gap:16px}
.rl3-sm{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;align-items:center;background:var(--surface);border-radius:22px;padding:8px 16px 8px 8px;box-shadow:0 0 0 1px var(--card-edge)}
.rl3-sm > span:last-child{display:grid;gap:4px}.rl3-sm > span:last-child b{font-size:16px;line-height:1.3;color:var(--surface-ink)}
.rl3-big:hover .rl-cv,.rl3-sm:hover .rl-cv,.rl2-card:hover .rl-cv{transform:scale(1.02)}
@media (max-width:1000px){.rl1-row{grid-template-columns:32px minmax(0,1fr) 44px}.rl1-row .rl-cv{display:none}.rl2,.rl3{grid-template-columns:minmax(0,1fr)}.rl3-sm{grid-template-columns:120px minmax(0,1fr)}}
.rl3-sm .rl-cv b{font-size:11px;line-height:1.2}.rl3-sm .rl-cv{aspect-ratio:1200/630}
/* разделитель между статьёй и «Читайте также», как на других страницах */
.ar-related{position:relative;margin-top:clamp(48px,calc(7 * var(--vh,1vh)),80px)}
.ar-related::before{content:"";position:absolute;top:0;left:calc(max(16px,50% - 680px) - max(16px,(100% - 1240px) / 2) - 0px);right:0;height:1px;background:var(--frame)}
.ar-promo-btn{align-self:flex-start;margin-top:10px;background:var(--yellow);color:var(--on-accent)}
.ar-promo:hover .ar-promo-btn span{transform:translateX(3px)}
.ar-promo-btn span{transition:transform .3s var(--ease)}
.ar-related::before{left:calc(-1 * clamp(0px, (calc(100 * var(--vw,1vw)) - 1240px) / 2 - 16px, 60px));right:calc(-1 * clamp(0px, (calc(100 * var(--vw,1vw)) - 1240px) / 2 - 16px, 60px))}
.ar-related::before{display:none}
.ar-relw{margin-top:clamp(48px,calc(7 * var(--vh,1vh)),80px)}
.ar-relw::before{content:"";position:absolute;top:0;left:max(0px,calc(50% - 680px));right:max(0px,calc(50% - 680px));height:1px;background:var(--frame)}
.ar-related{margin-top:0}
.ar{display:flow-root;padding-bottom:clamp(56px,calc(8 * var(--vh,1vh)),90px)}.ar-promo{margin-bottom:0}
.ar{padding-bottom:clamp(170px,calc(26 * var(--vh,1vh)),260px)}#free-screen{overflow:visible}
#free-screen > .steps{top:0;bottom:auto;height:0}
#free-screen > .steps{position:absolute!important;top:0;left:0;right:0;bottom:auto;height:0}
#free-screen > .steps{bottom:auto!important;top:0!important}#free-screen > .steps i{top:auto!important;bottom:0!important}
#free-screen > .steps,#free-screen > .steps i{transform:none!important;rotate:none!important;animation:none!important;border-radius:0!important;box-shadow:none!important}
/* ленты экранов видны и на «ступенях»: полоса уходит вверх и обрезается по их контуру */
@media (min-width:1001px){
  #free-screen .fd-strip{top:-150px;
    clip-path:polygon(0 150px,20% 150px,20% calc(150px - var(--s1,1) * 90px),40% calc(150px - var(--s1,1) * 90px),40% calc(150px - var(--s2,1) * 150px),60% calc(150px - var(--s2,1) * 150px),60% calc(150px - var(--s1,1) * 90px),80% calc(150px - var(--s1,1) * 90px),80% 150px,100% 150px,100% 100%,0 100%)}
  #free-screen .fd-rot{top:calc(-14% + 150px)}
}
@media (min-width:1001px){ #free-screen .fd-rot{top:-32%!important;bottom:-18%!important} }
br.br1280{display:none}@media (min-width:1200px) and (max-width:1300px){br.br1280{display:inline}}
html[style*="overflow: hidden"] body{overflow:clip!important}
/* ===== планшет (601–1199): ширина по линиям, колонка с подарком уходит в текст, 3 варианта первого экрана ===== */
.gift-inline,.tb-sw{display:none}
@media (min-width:601px) and (max-width:1199px){
  .ar{padding-left:48px;padding-right:48px}
  .ar-top{margin-left:-48px;margin-right:-48px;padding-left:48px;padding-right:48px}
  .cft .ft3{padding-left:48px;padding-right:48px}.cft .ft3::before{left:24px;right:24px}
  .ar-relw::before{left:-24px;right:-24px}
  .ar-3col{grid-template-columns:minmax(0,1fr)!important;padding-top:44px}
  .ar-side3{display:none!important}
  .ar-3col .ar-body{max-width:none}
  .gift-inline{display:block;margin:28px 0 8px}
  .gift-inline .ar-gift{max-width:none;text-align:left;justify-items:stretch;padding:22px 24px;grid-template-columns:auto minmax(0,1fr);column-gap:24px;align-items:start}
  .gift-inline .gf-head{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px}
  .gift-inline .ar-gift-svg{width:72px!important;margin:0!important}
  .gift-inline .ar-gift > *:not(.gf-head){grid-column:1/-1}
  .gift-inline .ar-via{justify-content:flex-start}
  .gift-inline .ar-gin{text-align:left}
  .gift-inline small{justify-self:center}
  .tb-sw{display:flex;width:max-content;margin:16px 0 0;position:relative;z-index:3}
  /* общий каркас первого экрана: элементы раскладываются заново */
  .hx3 .ar-wide{display:flex;flex-direction:column}
  .hx3 .hx3-g,.hx3 .hx3-b,.hx3 .hx3-b > div{display:contents}
  .hx3-top{order:1}.hx3 h1{order:2;margin-top:22px!important}.hx3-cv{order:3}.hx3-b .ar-lede{order:4}.hx3 .ar-meta{order:5}.hx-stats{order:6}
  .hx3 h1{font-size:clamp(40px,calc(6.4 * var(--vw,1vw)),60px)!important;max-width:none}
  .hx3-b .ar-lede{margin-top:20px!important;font-size:18px!important}
  .hx3 .ar-meta{margin-top:22px!important}
  .hx-stats{margin-top:18px}
  .hx3-cv{max-width:none!important;margin:0!important}
  /* 1 — обложка сверху во всю ширину */
  .hx3.tb1 .hx3-cv{order:0;transform:rotate(-1.5deg)!important;margin:6px 0 30px!important}
  .hx3.tb1 .hx3-cv .ar-cover-in b{font-size:clamp(24px,calc(3.6 * var(--vw,1vw)),34px)}
  /* 2 — заголовок, ниже две колонки: текст и обложка */
  .hx3.tb2 .ar-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);column-gap:28px;align-items:start}
  .hx3.tb2 .hx3-top,.hx3.tb2 h1,.hx3.tb2 .hx-stats{grid-column:1/-1}
  .hx3.tb2 .ar-lede{grid-column:1;grid-row:3;margin-top:26px!important}
  .hx3.tb2 .hx3-cv{grid-column:2;grid-row:3/5;margin-top:26px!important;transform:rotate(3deg)!important}
  .hx3.tb2 .hx3-cv .ar-cover-in b{font-size:19px}
  .hx3.tb2 .ar-meta{grid-column:1;grid-row:4}
  /* 3 — без обложки, крупнее текст */
  .hx3.tb3 .hx3-cv{display:none}
  .hx3.tb3 h1{font-size:clamp(44px,calc(7.4 * var(--vw,1vw)),68px)!important}
  .hx3.tb3 .ar-lede{font-size:20px!important;max-width:640px}
  .hx3.tb3 .hx3-top{flex-direction:row}
}
@media (min-width:601px) and (max-width:1199px){.ar-3col .ar-body{max-width:820px;margin:0 auto;width:100%}}
@media (min-width:601px) and (max-width:1199px){.hx3.tb1 .hx3-cv{width:100%;max-width:640px!important;align-self:center}}
/* планшет: перенос в тёмном призыве */
@media (min-width:601px) and (max-width:1199px){br.brtab{display:inline}}
/* планшет: форма разбора — по центру, без пустоты справа */
@media (min-width:601px) and (max-width:1000px){
  .c3a{grid-template-columns:minmax(0,1fr)!important;padding:30px 28px!important;gap:22px}
  .c3a .c3-l{align-items:center;text-align:center}
  .c3a .c3-h br,.c3a .c3-p br.dk{display:none}
  .c3a .c3-p{max-width:520px}
  .c3a .c3-k{margin-top:22px}
  .c3a .c3-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
  .c3a .c3-list li{flex-direction:column;align-items:center;text-align:center;background:var(--hover);border-radius:18px;padding:14px 10px;gap:8px}
  .c3a .ar-mgr{align-self:center}
  .c3a .ar-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .c3a .ar-form > label:not(.ar-cons){grid-column:span 1}
  .c3a .ar-form .ar-via,.c3a .ar-form .ar-cons,.c3a .ar-form .btn-y,.c3a .ar-form .ar-ok{grid-column:1/-1;justify-content:center;justify-self:center}
  .c3a .ar-form .btn-y{justify-self:stretch}
}
/* планшет: ленты экранов заходят на ступени без резкого обрыва */
@media (max-width:1000px){
  #free-screen .fd-strip{margin-top:-150px!important;height:520px!important;
    clip-path:polygon(0 150px,10% 150px,10% calc(150px - var(--s1,1) * 90px),32% calc(150px - var(--s1,1) * 90px),32% calc(150px - var(--s2,1) * 150px),68% calc(150px - var(--s2,1) * 150px),68% calc(150px - var(--s1,1) * 90px),90% calc(150px - var(--s1,1) * 90px),90% 150px,100% 150px,100% 100%,0 100%)}
  #free-screen .fd-rot{inset:-30% 24px -20%!important}
}
@media (min-width:601px) and (max-width:1000px){.c3a .ar-form > label:not(.ar-cons){min-width:0}.c3a .ar-form input{width:100%;box-sizing:border-box;min-width:0}.c3a .c3-p{text-wrap:balance}}
@media (min-width:601px) and (max-width:1000px){.c3a .ar-form .ar-cons{display:flex;width:auto;justify-content:center}.c3a .ar-form .ar-cons span{flex:0 1 auto}.c3a .ar-mgr div{text-align:left}}
@media (min-width:601px) and (max-width:1000px){.c3a .ar-form .ar-cons{justify-self:center;gap:8px;align-items:flex-start}.c3a .ar-form .ar-cons span{flex:1}.c3a .ar-form .ar-cons{max-width:460px;width:auto}}
@media (min-width:601px) and (max-width:1000px){.c3a .ar-form .ar-cons{display:block!important;text-align:center;max-width:none}.c3a .ar-form .ar-cons input{vertical-align:-2px;margin:0 6px 0 0}.c3a .ar-form .ar-cons span{display:inline}}
@media (min-width:601px) and (max-width:1000px){.c3a .ar-form .ar-cons input{display:inline-block!important;width:auto!important}}
@media (min-width:601px) and (max-width:1000px){.c3a .c3-k,.c3a .c3-list,.c3a .ar-mgr{display:none!important}}
br.br1180{display:none}@media (min-width:1001px) and (max-width:1199px){br.br1180{display:inline}}
@media (min-width:1200px) and (max-width:1300px){br.br1280.br1180{display:inline}}
@media (max-width:1000px){#free-screen .fd-rot{inset:-50% -14% -25%!important}}
/* ===== планшет и телефон: ленты уходят высоко вверх без обрезки, бежевая «маска» со ступенями лежит поверх ===== */
.fs-mask{display:none}
@media (max-width:1000px){
  #free-screen .fd-strip{clip-path:none!important;margin-top:-300px!important;height:740px!important}
  #free-screen .fd-rot{inset:-12% 24px -12%!important}
  .fs-mask{display:block;position:absolute;z-index:3;left:0;right:0;top:-300px;height:300px;pointer-events:none;
    background-color:var(--paper);
    background-image:linear-gradient(var(--frame),var(--frame)),linear-gradient(var(--frame),var(--frame)),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:1px 100%,1px 100%,28px 28px,28px 28px;background-repeat:no-repeat,no-repeat,repeat,repeat;background-position:24px 0,calc(100% - 24px) 0,0 0,0 0;
    clip-path:polygon(0 0,100% 0,100% 300px,90% 300px,90% calc(300px - var(--s1,1) * 90px),68% calc(300px - var(--s1,1) * 90px),68% calc(300px - var(--s2,1) * 150px),32% calc(300px - var(--s2,1) * 150px),32% calc(300px - var(--s1,1) * 90px),10% calc(300px - var(--s1,1) * 90px),10% 300px,0 300px)}
  #free-screen .fs-in,#free-screen .fsv{position:relative;z-index:4}
}
@media (max-width:600px){.fs-mask{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;background-repeat:repeat;background-position:0 0}}
/* ленты по ширине — внутри белой плашки с формой, с запасом */
@media (min-width:601px) and (max-width:1000px){#free-screen .fd-rot{left:84px!important;right:84px!important}}
@media (max-width:600px){#free-screen .fd-rot{left:58px!important;right:58px!important}}
/* телефон: статья на всю ширину, подарок — в тексте */
@media (max-width:600px){
  .ar-3col{grid-template-columns:minmax(0,1fr)!important;padding-top:36px}
  .ar-side3{display:none!important}
  .ar-3col .ar-body{max-width:none;width:100%}
  .gift-inline{display:block;margin:24px 0 8px}
  .gift-inline .ar-gift{text-align:left;justify-items:stretch;padding:20px 18px}
  .gift-inline .gf-head{flex-direction:row;align-items:center;gap:14px}
  .gift-inline .ar-gift-svg{width:60px!important;margin:0!important;flex:none}
  .gift-inline .ar-via{justify-content:flex-start;flex-wrap:wrap}
  .gift-inline .ar-gin{text-align:left}
  .gift-inline small{justify-self:center;text-align:center}
}
/* ===== телефон: правки форм, автора и кейса ===== */
br.brm{display:none}
.ar-form input,.ar-gin,.mq-row input{box-sizing:border-box;min-width:0;max-width:100%}
@media (max-width:600px){
  br.brm{display:inline}
  .ar-cta2 li{line-height:1.3}
  .c3a .ar-form{padding:18px!important}
  .c3a .ar-form > label:not(.ar-cons){width:100%}
  .c3a .ar-form input{width:100%}
  .atr2-q{font-size:17px!important;line-height:1.35!important;text-wrap:pretty}
  .atr2-bot{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .atr2-bot span{white-space:nowrap}
  .atr2-bot .atr-tg{align-self:stretch;justify-content:center}
  .ar-promo{display:flex!important;flex-direction:column;height:auto!important;overflow:hidden}
  .ar-promo img{height:200px!important;min-height:0!important;width:100%}
  .ar-promo > div{padding:22px 20px 24px!important}
  .ar-promo b{font-size:24px}
  .ar-promo p br{display:none}
  .ar-promo-btn{align-self:stretch;justify-content:center}
}
@media (max-width:1000px){
  #free-screen .fd-strip{margin-top:-210px!important;height:650px!important}
  .fs-mask{top:-210px!important;height:210px!important;clip-path:polygon(0 0,100% 0,100% 210px,90% 210px,90% calc(210px - var(--s1,1) * 90px),68% calc(210px - var(--s1,1) * 90px),68% calc(210px - var(--s2,1) * 150px),32% calc(210px - var(--s2,1) * 150px),32% calc(210px - var(--s1,1) * 90px),10% calc(210px - var(--s1,1) * 90px),10% 210px,0 210px)!important}
  .ar{padding-bottom:250px!important}
}
@media (max-width:600px){
  .c3a .ar-form{grid-template-columns:minmax(0,1fr)!important}
  .c3a .ar-form input[type=checkbox]{width:auto!important}
  .c3a .ar-form .ar-cons{display:flex!important;text-align:left}
}
@media (max-width:600px){.atr2-q{font-size:16px!important}}
/* ===== телефон: 3 варианта первого экрана ===== */
.mb-sw{display:none}
@media (max-width:600px){
  .mb-sw{display:flex;width:max-content;margin:14px 0 0;position:relative;z-index:3}
  .hx3 .ar-wide{display:flex;flex-direction:column}
  .hx3 .hx3-g,.hx3 .hx3-b,.hx3 .hx3-b > div{display:contents}
  .hx3-top{order:1;flex-direction:column;align-items:flex-start;gap:12px}
  .hx3 h1{order:2;margin-top:16px!important;font-size:34px!important;line-height:1.02!important}
  .hx3-cv{order:3}.hx3-b .ar-lede{order:4}.hx3 .ar-meta{order:5}.hx-stats{order:6}
  .hx3-b .ar-lede{margin-top:16px!important;font-size:16px!important;line-height:1.5!important}
  .hx3 .ar-meta{margin-top:18px!important}
  .hx3-top .ar-crumbs{font-size:12px;margin:0}
  .hx3{padding-top:22px!important}
  /* 1 — компактно: без обложки, цифры одной строкой-чипами */
  .hx3.mb1 .hx3-cv{display:none}
  .hx3.mb1 .hx-stats{display:flex;gap:6px;margin-top:14px;grid-template-columns:none}
  .hx3.mb1 .hx-stats li{display:flex;align-items:baseline;gap:5px;padding:7px 11px;border-radius:999px;background:var(--dk2)}
  .hx3.mb1 .hx-stats b{font-size:15px}.hx3.mb1 .hx-stats span{font-size:12px;white-space:nowrap}
  .hx3.mb1 .hx-stats li:nth-child(2) span::after{content:""}
  /* 2 — обложка сверху маленькой карточкой, автор и цифры одной полосой */
  .hx3.mb2 .hx3-top{order:0}
  .hx3.mb2 .hx3-cv{order:1;margin:14px 0 4px!important;transform:rotate(-2deg)!important;width:78%;align-self:flex-start}
  .hx3.mb2 .hx3-cv .ar-cover-in b{font-size:16px}.hx3.mb2 .hx3-cv .ar-cover-in{gap:8px}.hx3.mb2 .hx3-cv .ar-cover-btn{font-size:12px;padding:6px 12px}
  .hx3.mb2 .hx3-cv .ar-cover-in small{display:none}
  .hx3.mb2 .ar-meta{margin-top:18px!important;padding-top:16px;border-top:1px solid var(--dk-line)}
  .hx3.mb2 .hx-stats{margin-top:12px;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--dk-line);border-radius:18px;overflow:hidden}
  .hx3.mb2 .hx-stats li{background:none;box-shadow:none;border-radius:0;padding:10px 12px;border-left:1px solid var(--dk-line)}
  .hx3.mb2 .hx-stats li:first-child{border-left:0}
  .hx3.mb2 .hx-stats b{font-size:22px}
  /* 3 — без обложки, лид под чертой, автор и цифры одной карточкой */
  .hx3.mb3 .hx3-cv{display:none}
  .hx3.mb3 h1{font-size:38px!important}
  .hx3.mb3 .ar-lede{padding-top:16px;border-top:1px solid var(--dk-line)}
  .hx3.mb3 .ar-meta{margin-top:20px!important;background:var(--dk2);border-radius:20px 20px 0 0;padding:14px 14px 10px;box-shadow:0 0 0 1px var(--dk-line)}
  .hx3.mb3 .hx-stats{margin-top:0;background:var(--dk2);border-radius:0 0 20px 20px;padding:0 14px 14px;box-shadow:0 0 0 1px var(--dk-line);gap:8px;clip-path:inset(0 -2px -2px -2px)}
  .hx3.mb3 .hx-stats li{background:var(--dk);box-shadow:none;padding:10px 12px;border-radius:14px}
  .hx3.mb3 .hx-stats b{font-size:22px}
}
@media (max-width:600px){
  .hx3.mb1 .hx-stats{flex-wrap:wrap}.hx3.mb1 .hx-stats li{padding:6px 10px}
  .mq-opts{grid-template-columns:minmax(0,1fr)!important}
  .mq{transform:none!important}
}
/* ===== телефон: 3 варианта плашки с мини-квизом ===== */
.mq-sw{display:none}
@media (max-width:600px){
  .mq-sw{display:flex;width:max-content;margin:14px 0 0;position:relative;z-index:3}
  .ar-band .bn2.on{flex-direction:column;align-items:stretch;gap:14px;padding:20px 16px 16px;border-radius:26px}
  .bn2 .bn2-t b{font-size:21px!important;line-height:1.18;text-wrap:balance}
  .bn2 .bn2-t b br{display:none}
  .bn2 .bn2-t p{font-size:15px;text-wrap:pretty}
  .bn2 .mq{width:auto!important;max-width:none;margin:0}
  .mq-opts span{padding:12px 14px;font-size:15px}
  .mq-s{min-height:0}
  /* 1 — текст сверху, квиз белой карточкой во всю ширину */
  .mqv1 .bn2 .bn-k{margin-bottom:10px}
  /* 2 — коротко: только заголовок, квиз сразу; подпись прячем, бирка внутрь квиза */
  .mqv2 .bn2 .bn2-t p,.mqv2 .bn2 .bn-k{display:none}
  .mqv2 .bn2 .bn2-t b{font-size:20px!important}
  .mqv2 .bn2 .bn2-t{text-align:center}
  .mqv2 .bn2 .mq{box-shadow:0 0 0 2px var(--on-accent)}
  .mqv2 .bn2 .mq-top::after{content:"1 минута";margin-left:auto;font-size:12px;font-weight:700;color:var(--muted)}
  .mqv2 .mq-back{order:3}
  /* 3 — квиз на всю плашку: жёлтая шапка, белое тело без внутренней карточки */
  .mqv3 .bn2.on{padding:0;overflow:hidden;gap:0}
  .mqv3 .bn2 .bn2-t{padding:20px 18px 16px}
  .mqv3 .bn2 .mq{border-radius:0;box-shadow:none;padding:16px 18px 18px}
  .mqv3 .mq-opts span{background:var(--hover)}
}
/* телефон: шаги мини-квиза — поле, под ним кнопка, под кнопкой согласие */
@media (max-width:600px){
  .ar-band .bn2.on{padding:18px 12px 12px}
  .bn2 .bn2-t{padding:0 4px}
  .bn2 .mq{padding:14px 14px 16px}
  .mq-row{flex-direction:column;gap:8px}
  .mq-row input{width:100%;padding:13px 14px;font-size:16px}
  .mq-next{padding:13px 16px;width:100%;font-size:15px}
  .mq-cons{font-size:11.5px;line-height:1.4;align-items:flex-start;margin-top:2px}
  .mq-cons input{margin-top:1px;flex:none}
}
@media (max-width:600px){.mq-cons{display:block!important;text-align:center}.mq-cons input{display:inline-block;vertical-align:-2px;margin:0 5px 0 0}}
/* телефон: подарок в тексте — без картинки, заголовок в одну строку, подзаголовок в две */
@media (max-width:600px){
  .gift-inline .ar-gift-svg{display:none}
  .gift-inline .gf-head{display:block}
  .gift-inline .gf-head b{font-size:20px;white-space:nowrap}
  .gift-inline .gf-head p{font-size:15px;margin-top:6px!important}
  .gift-inline .ar-via{flex-wrap:nowrap}
  .gift-inline .ar-via label{flex:1}.gift-inline .ar-via span{display:block;text-align:center}
}
br.br390{display:none}@media (min-width:380px) and (max-width:400px){br.br390{display:inline}}
@media (max-width:600px){#free-screen .fs-btn{font-size:14px;white-space:nowrap;padding-left:12px;padding-right:12px}}@media (max-width:370px){#free-screen .fs-btn{font-size:13px}}
@media (max-width:600px){.ar .btn-y,.ar-cta .btn-y,.ar-gift .btn-y,.ar-cta3x .btn-y,.ar-promo-btn{white-space:nowrap}.ar-cta2 .btn-y{font-size:16px;padding-left:22px;padding-right:22px}}@media (max-width:370px){.ar-cta2 .btn-y{font-size:15px;padding-left:18px;padding-right:18px;gap:10px}}


/* ===== ГЛАВНАЯ БЛОГА ===== */
.bl .ar-top.bl-navwrap{padding-bottom:0}
.bv{display:none}.bv.on{display:block;animation:pcIn .4s var(--ease) both}
.bv-sw{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;box-shadow:0 14px 40px -12px rgba(0,0,0,.35)}
@media (max-width:1000px){.bv-sw{bottom:76px}}
.bl a{text-decoration:none}
.bl-hero{margin:0 -16px;padding:clamp(40px,calc(7 * var(--vh,1vh)),80px) 16px clamp(48px,calc(8 * var(--vh,1vh)),88px);position:relative}
.bl-dark{background:var(--dk);color:var(--dk-ink)}
.bl-dark::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.3px);background-size:22px 22px}
.bl-hero > *{position:relative}
.bl-k{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.bl-hero h1{margin:14px 0 0;font-weight:800;font-size:clamp(38px,calc(5 * var(--vw,1vw)),76px);line-height:1;letter-spacing:-.05em;text-wrap:balance;max-width:1000px}
.bl-dark h1{color:var(--dk-ink)}
.bl-lead{margin:20px 0 0;font-size:clamp(17px,calc(1.4 * var(--vw,1vw)),20px);line-height:1.5;max-width:680px;color:var(--dk-muted)}
.bl-light .bl-lead{color:var(--muted)}
.bl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.bl-chips a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:9px 14px;border-radius:999px;background:var(--dk2);color:var(--dk-ink);box-shadow:0 0 0 1px var(--dk-line);transition:background .2s}
.bl-chips a i{font-style:normal;font-size:12px;opacity:.6}
.bl-chips a:hover{background:var(--dk3)}
.bl-chips a.on{background:var(--orange);color:#1d1b19;box-shadow:none}.bl-chips a.on i{opacity:.75}
.bl-search{display:flex;align-items:center;gap:10px;padding:0 16px;height:48px;border-radius:999px;background:var(--surface);color:var(--surface-ink);box-shadow:0 0 0 1px var(--card-edge);min-width:280px}
.bl-search svg{width:18px;height:18px;opacity:.5;flex:none}
.bl-search input{border:0;outline:0;background:none;font:500 15px var(--f);color:inherit;width:100%}
.bl-sec{padding-top:clamp(40px,calc(6 * var(--vh,1vh)),64px)}
.bl-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.bl-top h2,.bl-list h2{margin:0;font-weight:800;font-size:clamp(26px,calc(2.3 * var(--vw,1vw)),34px);letter-spacing:-.03em;color:var(--ink)}
.bl-m{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.bl-m em{font-style:normal;font-weight:700;color:var(--orange)}
.bl-b{display:grid;gap:8px}
.bl-b b{font-size:18px;line-height:1.28;letter-spacing:-.01em;color:var(--surface-ink)}
.bl-b p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.bl-card{display:grid;align-content:start;gap:0;background:var(--surface);border-radius:26px;padding:8px;box-shadow:0 0 0 1px var(--card-edge);transition:transform .35s var(--ease),box-shadow .35s}
.bl-card:hover{transform:translateY(-5px);box-shadow:0 0 0 1px var(--card-edge),0 30px 50px -30px rgba(var(--sh),.6)}
.bl-card .bl-b{padding:14px 10px 10px}
.bl-mid{margin-top:clamp(40px,calc(6 * var(--vh,1vh)),64px)}
.bl-mid .ar-promo{margin:0}
/* 1 */
.bl-feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,calc(3 * var(--vw,1vw)),40px);align-items:center;background:var(--surface);border-radius:32px;padding:10px;box-shadow:0 0 0 1px var(--card-edge)}
.bl-feat .rl-cv{border-radius:24px}.bl-feat .rl-cv b{font-size:clamp(22px,calc(2.2 * var(--vw,1vw)),32px)}
.bl-feat .bl-b{padding:10px 24px 10px 0}.bl-feat .bl-b b{font-size:clamp(24px,calc(2.2 * var(--vw,1vw)),32px);line-height:1.12;letter-spacing:-.03em}
.bl-more{font-style:normal;font-weight:700;color:var(--orange);margin-top:6px}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.bl-grid .bl-card:nth-child(4),.bl-grid .bl-card:nth-child(5){}
.bl-cta{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;margin-top:clamp(32px,calc(5 * var(--vh,1vh)),56px);padding:26px 30px;border-radius:28px;background:var(--yellow);color:var(--on-accent)}
.bl-cta > div{flex:1 1 420px}.bl-cta b{display:block;font-size:clamp(21px,calc(1.8 * var(--vw,1vw)),26px);line-height:1.15;font-weight:800;letter-spacing:-.02em}
.bl-cta p{margin:6px 0 0;font-size:15px;color:color-mix(in srgb,var(--on-accent) 80%,transparent)}
.bl-cta .bn-k{margin-bottom:10px}
/* 2 */
.bl-light{padding-bottom:clamp(28px,calc(4 * var(--vh,1vh)),44px)}
.bl-h2g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,calc(4 * var(--vw,1vw)),64px);align-items:end}
.bl-light h1{color:var(--ink)}
.bl-h2g .bl-search{margin-top:22px}
.bl-2col{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(28px,calc(4 * var(--vw,1vw)),56px);align-items:start;padding-top:28px;border-top:1px solid var(--frame)}
.bl-side{align-self:stretch}
.bl-sticky{position:sticky;top:16px;display:grid;gap:16px}
.bl-side h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bl-side nav{display:grid;gap:2px}
.bl-side nav a{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;font-size:15px;font-weight:600;color:var(--ink);transition:background .2s}
.bl-side nav a i{font-style:normal;font-size:13px;color:var(--muted)}
.bl-side nav a:hover{background:var(--surface)}
.bl-side nav a.on{background:var(--ink);color:var(--paper)}.bl-side nav a.on i{color:inherit;opacity:.6}
.bl-mini{border-radius:22px;padding:18px;background:var(--yellow);color:var(--on-accent)}
.bl-mini b{display:block;font-size:18px;line-height:1.2}.bl-mini p{margin:6px 0 14px;font-size:14px;line-height:1.45}
.bl-mini .btn-y{width:100%;box-sizing:border-box;font-size:15px;padding:12px 16px}
.bl-chips-m{display:none}
.bl-list h2{margin-bottom:6px}
.bl-row{display:grid;grid-template-columns:40px minmax(0,1fr) 210px;gap:22px;align-items:center;padding:20px 0;border-bottom:1px solid var(--frame);transition:padding .3s var(--ease),background .3s}
.bl-row:hover{background:var(--surface);padding-left:14px;padding-right:14px;border-radius:20px}
.bl-n{font-size:14px;font-weight:700;color:var(--muted)}
.bl-row .bl-b b{font-size:clamp(19px,calc(1.6 * var(--vw,1vw)),23px);color:var(--ink);letter-spacing:-.02em}
/* 3 */
.bl-center{text-align:center}.bl-center .bl-lead{margin-left:auto;margin-right:auto}.bl-center h1{margin-left:auto;margin-right:auto}
.bl-center .bl-search{max-width:520px;margin:28px auto 0;height:54px}
.bl-lane{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/3);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;margin-bottom:clamp(40px,calc(6 * var(--vh,1vh)),64px)}
.bl-lane::-webkit-scrollbar{display:none}
.bl-lane .bl-card{scroll-snap-align:start}
.bl-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bl-tile{display:flex;flex-direction:column;gap:6px;min-height:150px;padding:20px;border-radius:24px;transition:transform .3s var(--ease)}
.bl-tile:hover{transform:translateY(-4px)}
.bl-tile i{font-style:normal;font-size:40px;font-weight:800;letter-spacing:-.05em;line-height:1}
.bl-tile b{font-size:17px;line-height:1.25;margin-top:auto}
.bl-tile span{font-size:13px;opacity:.65}
.bl-t0{background:var(--dk);color:var(--dk-ink)}.bl-t0 i{color:var(--yellow)}
.bl-t1{background:var(--yellow);color:#1d1b19}
.bl-t2{background:var(--surface);color:var(--surface-ink);box-shadow:0 0 0 1px var(--card-edge)}.bl-t2 i{color:var(--orange)}
.bl-t3{background:var(--orange);color:#1d1b19}
.bl-tcta{background:none;box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink);justify-content:flex-end}
.bl-tcta b{font-size:20px}.bl-tcta span{opacity:1;font-weight:700;color:var(--orange)}
@media (max-width:1000px){
  .bl-feat,.bl-h2g,.bl-2col{grid-template-columns:minmax(0,1fr)}
  .bl-feat .bl-b{padding:6px 12px 12px}
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-side{display:none}.bl-chips-m{display:flex;margin:12px 0 4px}
  .bl-chips-m a{background:var(--surface);color:var(--surface-ink);box-shadow:0 0 0 1px var(--card-edge)}
  .bl-lane{grid-auto-columns:calc((100% - 16px)/2)}
  .bl-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .bl-hero h1{font-size:36px}
  .bl-chips{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:0 16px 4px;scrollbar-width:none}
  .bl-chips a{flex:none}
  .bl-grid{grid-template-columns:minmax(0,1fr)}
  .bl-search{min-width:0;width:100%;box-sizing:border-box}
  .bl-top .bl-search{order:2}
  .bl-row{grid-template-columns:minmax(0,1fr)}.bl-row .rl-cv,.bl-n{display:none}
  .bl-lane{grid-auto-columns:82%}
  .bl-tile{min-height:120px;padding:16px}.bl-tile i{font-size:32px}.bl-tile b{font-size:15px}
  .bl-cta{padding:20px 18px}.bl-cta .btn-y{width:100%;box-sizing:border-box;justify-content:center}
}
@media (min-width:1001px){.bl-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.bl-grid .bl-card{grid-column:span 2}.bl-grid .bl-card:nth-child(n+4){grid-column:span 3}.bl-grid .bl-card:nth-child(n+4) .rl-cv{aspect-ratio:1200/500}}
.bl-t0,.bl-t0 b,.bl-t0 span{color:#f5f0ea!important}.bl-t1 b,.bl-t3 b{color:#1d1b19}
/* ===== переделка: шапки и два новых варианта ===== */
.bl-hero h1{font-size:clamp(34px,calc(3.6 * var(--vw,1vw)),54px);line-height:1.02;letter-spacing:-.04em}
/* 1 */
.bh1-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,calc(4 * var(--vw,1vw)),64px);align-items:end}
.bh1-g .bl-lead{margin:0}.bh1-g .bl-search{margin-top:18px}
.bh1 .bl-chips{margin-top:32px;padding-top:24px;border-top:1px solid var(--dk-line)}
/* 2 */
.bh2{padding-top:clamp(28px,calc(5 * var(--vh,1vh)),52px);padding-bottom:clamp(32px,calc(5 * var(--vh,1vh)),56px)}
.bh2-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,calc(4 * var(--vw,1vw)),64px);align-items:center}
.bh2 h1{margin:0;font-size:clamp(40px,calc(4.4 * var(--vw,1vw)),64px);white-space:nowrap}
.bh2 h1 em{font-style:normal;color:var(--yellow)}
.bh2 .bl-lead{margin:0;max-width:640px;padding-left:clamp(20px,calc(3 * var(--vw,1vw)),40px);border-left:1px solid var(--dk-line)}
.bh2 .bl-chips{margin-top:26px}
.bl-feat2{position:relative;display:block;border-radius:32px;overflow:hidden}
.bl-feat2 .rl-cv{aspect-ratio:auto;height:clamp(340px,calc(40 * var(--vw,1vw)),480px);border-radius:32px;padding:0 14% 110px}
.bl-feat2 .rl-cv b{font-size:clamp(28px,calc(3 * var(--vw,1vw)),46px)}
.bl-ov{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);color:var(--surface-ink);border-radius:22px;padding:16px 20px}
.bl-ov b{flex:1;font-size:18px;line-height:1.25}
.bl-ov .bl-m{flex:none}
.bl-grid3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.bl-grid3 .bl-card{grid-column:auto!important}
.bl-grid2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.bl-grid2 .bl-card{grid-column:auto!important}
.bv2 .bl-cta{margin:16px 0}
/* 3 */
.bh3-g{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.bh3 h1{margin:0;max-width:760px}
.bh3-n{display:flex;align-items:center;gap:12px;flex:none}
.bh3-n b{font-size:clamp(48px,calc(5 * var(--vw,1vw)),76px);font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--yellow)}
.bh3-n span{font-size:14px;line-height:1.3;color:var(--dk-muted)}
.bh3 .bl-lead{margin-top:18px}
.bl-g3{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.bl-feat3 .bl-b b{font-size:clamp(22px,calc(2 * var(--vw,1vw)),28px);line-height:1.15}
.bl-last{background:var(--surface);border-radius:26px;padding:18px;box-shadow:0 0 0 1px var(--card-edge);display:grid;gap:4px}
.bl-last h3{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bl-li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--frame) 60%,transparent)}
.bl-li:first-of-type{border-top:0}
.bl-li .bl-b{gap:4px}.bl-li .bl-b b{font-size:15px;line-height:1.3}
.bl-li .rl-cv b{font-size:9px}
.bl-li:hover .bl-b b{color:var(--orange)}
@media (max-width:1000px){
  .bh1-g,.bh2-row,.bl-g3{grid-template-columns:minmax(0,1fr)}
  .bh2 .bl-lead{padding-left:0;border-left:0}
  .bl-grid3,.bl-grid2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .bh3-g{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .bl-hero h1{font-size:32px!important}
  .bl-grid3,.bl-grid2{grid-template-columns:minmax(0,1fr)!important}
  .bl-feat2 .rl-cv{height:300px;padding-bottom:150px}.bl-feat2 .rl-cv b{font-size:22px}
  .bl-ov{flex-direction:column;align-items:flex-start;gap:6px}
  .bl-li{grid-template-columns:96px minmax(0,1fr)}
}
/* журнал: заголовок в одну строку, робот справа */
.bh1-g{grid-template-columns:minmax(0,auto) minmax(220px,1fr);align-items:center}
.bh1-t{max-width:720px}
.bh1 h1{font-size:clamp(26px,calc(2.55 * var(--vw,1vw)),40px)!important;white-space:nowrap;margin-top:12px}
.bh1 .bl-lead{margin-top:14px;max-width:none}
.bh1 .bl-search{margin-top:20px;max-width:440px}
.bl-bot{position:relative;justify-self:center;width:260px;height:260px;margin:-20px 0}
.bl-bot canvas{width:100%!important;height:100%!important;display:block}
@media (max-width:1000px){.bl-bot{display:none}.bh1 h1{white-space:normal}}
.bl .nav .soc{color:var(--surface)!important}
/* ===== рабочие рубрики: список статей ===== */
.bl-list{margin-top:clamp(48px,calc(7 * var(--vh,1vh)),72px)}
.bl-list .bl-k{color:var(--orange-ink,var(--orange));display:block;margin-bottom:8px}
.bl-rh .bl-top{justify-content:flex-start;align-items:baseline;margin-bottom:8px}
.bl-cnt{font-size:14px;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--surface);color:var(--surface-ink);box-shadow:0 0 0 1px var(--card-edge)}
.bl-rd{margin:0 0 6px;max-width:640px;font-size:16px;line-height:1.5;color:var(--ink);opacity:.75}
.bl-all{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:22px}
.bl-sm{grid-template-columns:minmax(0,1fr);min-width:0}
.bl-sm .rl-cv{aspect-ratio:1200/720}
.bl-sm .rl-cv b{font-size:15px;-webkit-line-clamp:3}
.bl-sm .bl-b>b{font-size:16px;line-height:1.3}
.bl-in{animation:blIn .5s var(--ease) both}
@keyframes blIn{from{opacity:0;transform:translateY(14px)}}
.bl-moreb{display:flex;align-items:center;gap:10px;margin:28px auto 0;border:0;cursor:pointer;font:700 15px/1 inherit;font-family:inherit;padding:16px 26px;border-radius:999px;background:var(--dk);color:var(--dk-ink,#fff);transition:transform .25s var(--ease)}
.bl-moreb:hover{transform:translateY(-2px)}
.bl-moreb i{font-style:normal;font-weight:600;font-size:13px;opacity:.6}
.bl-moreb[hidden],.bl-cta2[hidden],#blFresh[hidden]{display:none}
.bl-empty{margin:24px 0 0;font-size:16px;color:var(--ink)}.bl-empty a{color:var(--orange);font-weight:700}
.bl-cta2 .bl-cta{margin-top:40px}
@media (max-width:1199px){.bl-all{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.bl-all{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.bl-all{grid-template-columns:minmax(0,1fr);gap:12px}
  .bl-sm{grid-template-columns:110px minmax(0,1fr);align-items:center;border-radius:20px}
  .bl-sm .rl-cv{aspect-ratio:1/1;border-radius:14px}.bl-sm .rl-cv b{font-size:11px;-webkit-line-clamp:4}.bl-sm .rl-cv i{display:none}
  .bl-sm .bl-b{padding:6px 8px 6px 12px}.bl-sm .bl-b>b{font-size:15px}
  .bl-moreb{width:100%;justify-content:center}}
.bl-sm .bl-b{display:grid;gap:8px;min-width:0}.bl-sm .bl-b>b{display:block;white-space:normal;overflow-wrap:anywhere}
.bl-all{padding-bottom:32px}@media (max-width:600px){.bl-all{padding-bottom:24px}}
/* ===== планшет: варианты первого экрана (601–1199) ===== */
.tv-sw{display:none}
@media (min-width:601px) and (max-width:1199px){
  .tv-sw{display:flex}
  .bl-hero.bh1{padding-top:48px;padding-bottom:44px}
  .bh1 .bl-bot{display:block;margin:0}
  .bh1 h1{white-space:normal!important;text-wrap:balance;letter-spacing:-.035em;line-height:1.04}
  .bh1 .bl-lead{font-size:17px;line-height:1.5}
  .bh1 .bl-search{max-width:none;height:54px;font-size:16px}
  .bh1 .bl-search input{font-size:16px}
  .bh1 .bl-chips{border-top:0;padding-top:0}
  .bh1 .bl-chips a{font-size:15px;padding:11px 16px}

  /* 1 · Робот справа, рубрики лентой */
  html.tv1 .bh1-g{grid-template-columns:minmax(0,1fr) 210px;gap:20px;align-items:center}
  html.tv1 .bh1 h1{font-size:clamp(38px,calc(5.2 * var(--vw,1vw)),52px)!important}
  html.tv1 .bh1 .bl-bot{width:210px;height:210px}
  html.tv1 .bh1 .bl-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:30px -16px 0;padding:22px 16px 4px;border-top:1px solid var(--dk-line);
    -webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
  html.tv1 .bh1 .bl-chips::-webkit-scrollbar{display:none}
  html.tv1 .bh1 .bl-chips a{flex:none}

  /* 2 · Крупный заголовок, рубрики плиткой */
  html.tv2 .bh1-g{display:block;position:relative}
  html.tv2 .bh1-t{max-width:none}
  html.tv2 .bh1 h1{font-size:clamp(44px,calc(6.4 * var(--vw,1vw)),64px)!important;max-width:78%}
  html.tv2 .bh1 .bl-lead{max-width:80%}
  html.tv2 .bh1 .bl-bot{position:absolute;right:-6px;top:-18px;width:170px;height:170px}
  html.tv2 .bh1 .bl-search{margin-top:26px}
  html.tv2 .bh1 .bl-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
  html.tv2 .bh1 .bl-chips a{justify-content:space-between;border-radius:16px;padding:16px 18px;font-size:16px}
  html.tv2 .bh1 .bl-chips a i{font-size:14px;font-weight:700;opacity:.5}
  html.tv2 .bh1 .bl-chips a.on i{opacity:.7}

  /* 3 · Робот сверху, всё по центру */
  html.tv3 .bh1-g{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:0}
  html.tv3 .bh1 .bl-bot{order:-1;width:190px;height:190px;margin:-18px 0 -6px}
  html.tv3 .bh1-t{max-width:640px}
  html.tv3 .bh1 h1{font-size:clamp(40px,calc(5.6 * var(--vw,1vw)),56px)!important}
  html.tv3 .bh1 .bl-search{margin:26px auto 0;max-width:520px}
  html.tv3 .bh1 .bl-chips{justify-content:center;margin-top:30px;padding-top:24px;border-top:1px solid var(--dk-line)}
}
@media (min-width:1001px) and (max-width:1199px){
  html.tv1 .bh1-g{grid-template-columns:minmax(0,1fr) 240px}html.tv1 .bh1 .bl-bot{width:240px;height:240px}
  html.tv2 .bh1 .bl-chips{grid-template-columns:repeat(4,minmax(0,1fr))}
  html.tv2 .bh1 h1{max-width:70%}html.tv2 .bh1 .bl-bot{width:200px;height:200px}
}
.ar.bl{border-top:0}
.bl .bl-navwrap::before{display:none}
.bl .bl-hero.bl-dark::before{top:-140px}
/* планшет: без робота, вариант «По центру» */
@media (min-width:601px) and (max-width:1199px){
  .bh1 .bl-bot,html.tv3 .bh1 .bl-bot{display:none!important}
  html.tv3 .bl-hero.bh1{padding-top:40px}
  html.tv3 .bh1-t{max-width:680px}
}
@media (min-width:601px) and (max-width:1199px){
  .bl .bl-hero.bh1,.bl .ar-top.bl-navwrap{margin-left:calc(50% - calc(50 * var(--vw,1vw)));margin-right:calc(50% - calc(50 * var(--vw,1vw)));padding-left:calc(calc(50 * var(--vw,1vw)) - 50%);padding-right:calc(calc(50 * var(--vw,1vw)) - 50%)}
  .bl{overflow-x:clip}
}
@media (min-width:601px) and (max-width:1000px){.bl-grid .bl-card:nth-child(4):last-child,.bl-grid .bl-card:nth-child(5){grid-column:1/-1}}
@media (min-width:601px) and (max-width:1199px){.bl br.brtab{display:inline}}
@media (min-width:601px) and (max-width:1000px){.bl-grid .bl-card:nth-child(5) .rl-cv b{font-size:26px;max-width:80%}.bl-grid .bl-card:nth-child(5) .bl-b>b{font-size:22px}}
/* ===== телефон: варианты первого экрана и списка статей (≤600) ===== */
.mv-sw{display:none}
@media (max-width:600px){
  .mv-sw{display:flex;flex-direction:column;gap:6px;position:fixed;left:8px;right:8px;bottom:12px;z-index:60;align-items:center}
  .mv-sw .pc-sw{box-shadow:0 14px 40px -12px rgba(0,0,0,.4);max-width:100%;overflow-x:auto;scrollbar-width:none}
  .mv-sw .pc-sw span{display:inline;padding:0 4px 0 8px;font-size:10px}
  .mv-sw .pc-sw button{padding:7px 9px;font-size:12px}
  /* общая база первого экрана */
  .bh1-g{grid-template-columns:minmax(0,1fr)!important;display:block}
  .bh1 .bl-bot{display:none!important}
  .bl-hero.bh1{padding-top:28px;padding-bottom:28px}
  .bh1 .bl-k{font-size:11px;letter-spacing:.12em}
  .bh1 h1{white-space:normal!important;font-size:clamp(30px,calc(8.6 * var(--vw,1vw)),36px)!important;line-height:1.04;letter-spacing:-.035em;margin-top:10px;text-wrap:balance}
  .bh1 .bl-lead{font-size:15.5px;line-height:1.5;margin-top:12px}
  .bh1 .bl-search{margin-top:18px;max-width:none;height:50px}
  .bh1 .bl-search input{font-size:16px;min-width:0;width:100%}
  .bh1 .bl-chips{margin-top:24px;padding-top:20px;border-top:1px solid var(--dk-line)}

  /* 1 · лента рубрик */
  html.mv1 .bh1 .bl-chips{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
  /* 2 · рубрики списком */
  html.mv2 .bh1 .bl-chips{display:grid;gap:0;overflow:visible;margin-left:0;margin-right:0;padding:8px 0 0}
  html.mv2 .bh1 .bl-chips a{justify-content:space-between;background:none;box-shadow:none;border-radius:0;padding:13px 2px;font-size:15px;border-bottom:1px solid var(--dk-line);color:var(--dk-ink)}
  html.mv2 .bh1 .bl-chips a:last-child{border-bottom:0}
  html.mv2 .bh1 .bl-chips a i{font-size:13px;font-weight:700;opacity:.45}
  html.mv2 .bh1 .bl-chips a.on{color:var(--orange)}html.mv2 .bh1 .bl-chips a.on i{opacity:1}
  /* 3 · рубрики плиткой */
  html.mv3 .bh1 .bl-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  html.mv3 .bh1 .bl-chips a{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;border-radius:16px;padding:12px 14px;font-size:14px;line-height:1.25;white-space:normal;min-height:68px}
  html.mv3 .bh1 .bl-chips a:first-child{grid-column:1/-1;flex-direction:row;align-items:center;min-height:0}
  html.mv3 .bh1 .bl-chips a i{font-size:12px;font-weight:700}

  /* список статей: общая база */
  .bl-sm .bl-m{flex-wrap:wrap;row-gap:2px;font-size:12.5px}
  /* L1 · строки без обложек */
  html.ml1 .bl-all{gap:0;background:var(--surface);border-radius:22px;padding:2px 16px;box-shadow:0 0 0 1px var(--card-edge);margin-bottom:32px}
  html.ml1 .bl-all{padding-bottom:2px}
  html.ml1 .bl-sm{grid-template-columns:minmax(0,1fr) 34px;align-items:center;gap:12px;background:none;box-shadow:none;border-radius:0;padding:16px 0;border-bottom:1px solid var(--card-edge);transform:none!important}
  html.ml1 .bl-sm:last-child{border-bottom:0}
  html.ml1 .bl-sm .rl-cv{display:none}
  html.ml1 .bl-sm .bl-b{padding:0;gap:6px}
  html.ml1 .bl-sm .bl-b>b{font-size:16px;line-height:1.3}
  html.ml1 .bl-sm::after{content:"→";display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bg,#f5f0ea);box-shadow:inset 0 0 0 1px var(--card-edge);font-weight:700;color:var(--surface-ink)}
  /* L2 · обложка сверху */
  html.ml2 .bl-sm{grid-template-columns:minmax(0,1fr);align-items:stretch;border-radius:24px}
  html.ml2 .bl-sm .rl-cv{aspect-ratio:1200/560;border-radius:18px}
  html.ml2 .bl-sm .rl-cv b{font-size:18px;-webkit-line-clamp:4;max-width:88%}
  html.ml2 .bl-sm .rl-cv i{display:inline-block}
  html.ml2 .bl-sm .bl-b{padding:12px 8px 8px}
  html.ml2 .bl-sm .bl-b>b{font-size:17px}
  html.ml2 .bl-all{gap:14px}
  /* L3 · цветные карточки */
  html.ml3 .bl-sm{grid-template-columns:minmax(0,1fr);border-radius:22px;padding:18px 18px 16px}
  html.ml3 .bl-sm .rl-cv{display:none}
  html.ml3 .bl-sm .bl-b{padding:0;gap:10px}
  html.ml3 .bl-sm .bl-b>b{font-size:19px;line-height:1.22;letter-spacing:-.02em}
  html.ml3 .bl-sm::after{content:"Читать →";font-size:13px;font-weight:700;margin-top:12px}
  html.ml3 .bl-sm:has(.rl-d){background:#1d1b19;box-shadow:none}
  html.ml3 .bl-sm:has(.rl-d) .bl-b>b,html.ml3 .bl-sm:has(.rl-d)::after{color:#f5f0ea}
  html.ml3 .bl-sm:has(.rl-d) .bl-m{color:rgba(245,240,234,.6)}
  html.ml3 .bl-sm:has(.rl-y){background:var(--yellow);box-shadow:none}
  html.ml3 .bl-sm:has(.rl-y) .bl-b>b,html.ml3 .bl-sm:has(.rl-y)::after{color:#1d1b19}
  html.ml3 .bl-sm:has(.rl-y) .bl-m{color:rgba(29,27,25,.6)}html.ml3 .bl-sm:has(.rl-y) .bl-m em{color:#1d1b19}
  html.ml3 .bl-sm:has(.rl-w)::after{color:var(--orange)}
}
@media (max-width:600px){
  html.ml2 .bl-sm{border-radius:26px;padding:8px}
  html.ml2 .bl-sm .rl-cv{aspect-ratio:1200/630;border-radius:20px}
  html.ml2 .bl-sm .rl-cv b{font-size:17px}
  html.ml2 .bl-sm .bl-b{padding:14px 10px 10px}
  html.ml2 .bl-all{gap:16px}
}

/* ===== перенос в Next.js: обычный markdown статьи в стиле новой статьи ===== */
.ar-body h3{margin:36px 0 12px;font-weight:800;font-size:clamp(20px,calc(1.6 * var(--vw,1vw)),24px);line-height:1.2;letter-spacing:-.02em;scroll-margin-top:90px}
.ar-body ul,.ar-body ol:not(.ar-ol){margin:18px 0;padding-left:1.3em;font-size:18px;line-height:1.6}
.ar-body ul li,.ar-body ol:not(.ar-ol) li{margin:6px 0}
.ar-body ul li::marker{color:var(--orange)}
.ar-body ol:not(.ar-ol) li::marker{color:var(--orange);font-weight:800}
.ar-body blockquote{margin:26px 0;padding:18px 22px;border-radius:20px;background:color-mix(in srgb,var(--yellow) 26%,var(--surface));box-shadow:0 0 0 1px var(--card-edge);font-size:18px;line-height:1.55}
.ar-body blockquote p{margin:0}.ar-body blockquote p+p{margin-top:10px}
.ar-body img{max-width:100%;height:auto;display:block;margin:26px auto;border-radius:22px;box-shadow:0 0 0 1px var(--card-edge)}
.ar-body hr{border:0;border-top:1px solid var(--frame);margin:40px 0}
.ar-body a:not([class]){color:inherit;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
.ar-body a:not([class]):hover{color:var(--orange)}
.ar-body .table-scroll{margin:24px 0;overflow-x:auto;border-radius:22px;background:var(--surface);box-shadow:0 0 0 1px var(--card-edge)}
.ar-body .table-scroll table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.ar-body .table-scroll th{text-align:left;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:16px 20px;border-bottom:1px solid var(--frame);background:color-mix(in srgb,var(--yellow) 22%,var(--surface))}
.ar-body .table-scroll td{padding:14px 20px;border-bottom:1px solid color-mix(in srgb,var(--frame) 60%,transparent);color:var(--surface-ink);vertical-align:top}
.ar-body .table-scroll tr:last-child td{border-bottom:0}
@media (max-width:600px){.ar-body ul,.ar-body ol:not(.ar-ol),.ar-body blockquote{font-size:16.5px}.ar-body .table-scroll table{font-size:14px}.ar-body .table-scroll th,.ar-body .table-scroll td{padding:12px 14px}}
.ar-src a{color:inherit}
.ar-src ol li a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent)}

/* настоящие обложки статей вместо текстовых */
.ar-cover.ar-cover-img{background:#1d1b19}
.ar-cover.ar-cover-img::before{display:none}
.ar-cover.ar-cover-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rl-cv.rl-img{padding:0;background:#1d1b19}
.rl-cv.rl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.rl-cv.rl-img b,.rl-cv.rl-img i{display:none!important}
.bl-card[hidden]{display:none!important}

/* уведомление о cookies в стиле сайта */
.cookie-notice{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:860px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;padding:16px 18px;border-radius:22px;background:var(--surface);color:var(--surface-ink);box-shadow:0 0 0 1px var(--card-edge),0 24px 50px -20px rgba(0,0,0,.35);font-family:var(--f)}
.cookie-notice__text{margin:0;flex:1 1 320px;font-size:14px;line-height:1.55}
.cookie-notice__text a{color:inherit;text-decoration:underline;text-decoration-color:var(--orange)}
.cookie-notice__buttons{display:flex;gap:8px;flex-wrap:wrap}
.cookie-notice__btn{border:0;cursor:pointer;font:700 14px/1 var(--f);padding:12px 18px;border-radius:999px;background:var(--yellow);color:#1d1b19}
.cookie-notice__btn--ghost{background:transparent;color:var(--surface-ink);box-shadow:inset 0 0 0 1px var(--card-edge)}
@media (max-width:600px){.cookie-notice{left:8px;right:8px;bottom:8px;padding:14px}.cookie-notice__text{flex:1 1 100%;font-size:13px}.cookie-notice__buttons{width:100%}.cookie-notice__btn{flex:1 1 auto}}

/* служебный переключатель гаммы и перехода темы скрыт для посетителей (12.10.2026) */
.pals{display:none!important}

/* Блоки сайта внутри текста статьи (подарок, призывы, разбор, автор) не наследуют
   типографику статьи: размер шрифта, отступы списков и оформление картинок (12.10.2026) */
.ar-body :is(.gift-inline,.ar-cta2,.ar-c3wrap,.atr-wrap){font-size:16px;line-height:normal}
.ar-body :is(.gift-inline,.ar-cta2,.ar-c3wrap,.atr-wrap) ul{font-size:inherit;line-height:inherit;padding:0}
.ar-body :is(.gift-inline,.ar-cta2,.ar-c3wrap,.atr-wrap) li{margin:0}
.ar-body .ar-c3wrap .c3-list{margin:0}
.ar-body .ar-cta2 ul{margin:18px 0 22px}
.ar-body :is(.gift-inline,.ar-cta2,.ar-c3wrap,.atr-wrap) img{margin:0;box-shadow:none;max-width:none}
.ar-body :is(.ar-mgr,.atr2-top) img{border-radius:50%}