:root {
    --paper:#fbf8f2; --paper2:#f3eee4; --ink:#1d1a24; --mute:#6c6677;
    --line:#1d1a24; --soft:#e6dfd2;
    --violet:#8b5cf6; --violet-d:#6d3fe0; --lav:#d9d0ff; --lav2:#efeaff;
    --sun:#ffc526; --sun-l:#fff1c4; --rose:#ff8fab; --sky:#7cc8ff; --leaf:#8fd16a;
    --r:18px;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 "Golos Text", system-ui, sans-serif; overflow-x:hidden; }
  a { color:inherit; }
  h1, h2, h3 { font-family:Rubik, system-ui, sans-serif; line-height:1.08; margin:0; letter-spacing:-.01em; }
  .wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
  @media (max-width:600px) { .wrap { padding:0 16px; } body { font-size:16px; } }

  /* шильдик черновика */
  .draft { position:fixed; right:10px; bottom:10px; z-index:50; font:600 11px/1 ui-monospace, monospace; background:var(--ink); color:var(--paper); padding:7px 9px; border-radius:8px; text-decoration:none; opacity:.8; }

  /* кнопки — толстый контур и сдвинутая тень, как вырезанная бумага */
  .btn { display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border:2px solid var(--line); border-radius:14px; font:600 17px/1 "Golos Text", sans-serif; text-decoration:none; background:#fff; box-shadow:4px 4px 0 var(--line); transition:transform .12s, box-shadow .12s; cursor:pointer; }
  .btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--line); }
  .btn:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--line); }
  .btn.sun { background:var(--sun); }
  .btn.violet { background:var(--violet); color:#fff; }
  .btn.small { padding:10px 14px; font-size:15px; box-shadow:3px 3px 0 var(--line); }

  /* шапка */
  header { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid transparent; transition:border-color .2s; }
  header.scrolled { border-color:var(--soft); }
  .bar { display:flex; align-items:center; gap:28px; height:72px; }
  .logo { display:flex; align-items:center; gap:10px; text-decoration:none; font:800 26px/1 Rubik, sans-serif; letter-spacing:-.02em; }
  .logo .face { width:42px; height:42px; border-radius:50%; border:2px solid var(--line); background:var(--lav2) url(/img/pablo.png) 52% 22% / 150% auto no-repeat; }
  .logo b { color:var(--violet); font-weight:800; }
  .logo .word { display:inline-flex; align-items:flex-end; }
  /* app стоит на «а»: читается снизу вверх, высотой с «publo» */
  .logo .app { writing-mode:vertical-rl; transform:rotate(180deg); font:800 11.5px/1 Rubik, sans-serif; font-style:normal; letter-spacing:.03em; color:var(--violet); margin:0 0 3px 1px; }
  nav.main { display:flex; gap:22px; font-weight:500; }
  nav.main a { text-decoration:none; color:var(--mute); white-space:nowrap; }
  nav.main a:hover { color:var(--ink); }
  .bar .sp { flex:1; }
  .bar .acc { font-weight:600; font-size:15px; color:var(--mute); text-decoration:none; white-space:nowrap; }
  .bar .acc:hover { color:var(--ink); }
  .langs { display:flex; gap:2px; font:600 13px/1 "Golos Text", sans-serif; }
  .langs button { border:0; background:none; padding:7px 8px; border-radius:8px; color:var(--mute); cursor:pointer; font:inherit; }
  .langs button.on { background:var(--ink); color:var(--paper); }
  .langs a { padding:7px 8px; border-radius:8px; color:var(--mute); text-decoration:none; }
  .langs a:hover { color:var(--ink); }
  .langs a.on { background:var(--ink); color:var(--paper); }
  @media (max-width:600px) { .bar { gap:12px; height:62px; } .logo { font-size:22px; } .logo .app { font-size:10px; margin-bottom:2px; } .logo .face { width:36px; height:36px; } .bar .btn.small { display:none; } }

  /* первый экран */
  .hero { position:relative; padding:56px 0 40px; }
  .hero .grid { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
  .kicker { display:inline-flex; align-items:center; gap:8px; background:var(--lav2); border:1.5px solid var(--lav); color:var(--violet-d); font-weight:600; font-size:14px; padding:6px 12px; border-radius:99px; margin-bottom:20px; }
  .kicker i { width:8px; height:8px; border-radius:50%; background:var(--violet); }
  .hero h1, .hero .h1 { font-size:clamp(38px, 5.6vw, 68px); font-weight:800; }
  .hero .u { position:relative; white-space:nowrap; color:var(--violet); }
  .hero .u svg { position:absolute; left:-2%; bottom:-.2em; width:104%; height:.42em; }
  .hero p.lead { font-size:clamp(17px, 1.6vw, 20px); color:#3d3847; max-width:560px; margin:22px 0 30px; }
  .hero .ctas { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
  .hero .note { margin-top:18px; font-size:14px; color:var(--mute); }
  .hero .note b { color:var(--ink); }

  .art { position:relative; aspect-ratio:1/1; max-width:480px; justify-self:center; width:100%; }
  .art .shape { position:absolute; border:2px solid var(--line); }
  .art .s1 { inset:8% 6% 14% 16%; background:var(--lav); clip-path:polygon(10% 0, 100% 8%, 92% 100%, 0 86%); border:0; }
  .art .s2 { width:38%; height:30%; right:0; top:4%; background:var(--sun); clip-path:polygon(0 12%, 100% 0, 86% 100%, 8% 84%); border:0; }
  .art .s3 { width:30%; height:24%; left:2%; bottom:10%; background:var(--rose); clip-path:polygon(18% 0, 100% 20%, 80% 100%, 0 76%); border:0; }
  .art img.pablo { position:absolute; left:8%; right:4%; bottom:0; width:88%; filter:drop-shadow(6px 6px 0 rgba(29,26,36,.12)); }
  @media (max-width:900px) {
    .hero .grid { grid-template-columns:1fr; }
    .art { max-width:380px; order:-1; margin-bottom:-10px; }
  }
  @media (max-width:600px) {
    .hero { padding:28px 0 24px; }
    .art { max-width:300px; }
    .hero .ctas .btn { width:100%; justify-content:center; }
  }

  /* сторы внутри карточки паблишинга */
  .stores { position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:6px 0 4px; }
  .store { display:flex; align-items:center; gap:12px; border:2px solid var(--line); border-radius:14px; padding:12px 14px; text-decoration:none; background:#fff; }
  .store .si { flex:none; width:44px; height:44px; border:2px solid var(--line); border-radius:12px; background:#fff; display:grid; place-items:center; }
  .store .si img { width:26px; height:26px; display:block; }
  .store b { display:block; font:700 18px/1.1 Rubik, sans-serif; }
  .store span { font-size:13px; color:var(--mute); }
  @media (max-width:760px) { .stores { grid-template-columns:1fr; } }

  /* полоса «бесплатно» */
  .free { border-block:2px solid var(--line); background:var(--sun); overflow:hidden; }
  .free .run { display:flex; gap:44px; padding:14px 0; font:700 18px/1 Rubik, sans-serif; white-space:nowrap; animation:run 38s linear infinite; width:max-content; }
  .free .run span::before { content:"✦"; margin-right:44px; color:var(--violet-d); }
  @keyframes run { to { transform:translateX(-50%); } }
  @media (prefers-reduced-motion:reduce) { .free .run { animation:none; } }

  section { padding:88px 0; }
  @media (max-width:600px) { section { padding:60px 0; } }
  .head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:36px; flex-wrap:wrap; }
  .head h2 { font-size:clamp(30px, 3.8vw, 46px); font-weight:800; max-width:720px; }
  .head p { color:var(--mute); max-width:420px; margin:0; }
  .eyebrow { font:600 13px/1 "Golos Text", sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--violet-d); margin-bottom:12px; }

  /* путь: шесть сервисов */
  .path { display:grid; grid-template-columns:repeat(6, 1fr); gap:22px; }
  .path .svc { grid-column:span 2; }
  .path .svc.feat { grid-column:1 / -1; background:var(--lav2); padding:30px 30px 26px; }
  .path .svc.feat h3 { font-size:32px; }
  .path .svc.feat p { font-size:17px; max-width:640px; flex:none; }
  .path .svc.feat::before { width:260px; height:200px; right:-50px; top:-60px; }
  .svc { position:relative; background:#fff; border:2px solid var(--line); border-radius:var(--r); padding:26px 24px 24px; box-shadow:5px 5px 0 var(--line); display:flex; flex-direction:column; gap:10px; overflow:hidden; transition:transform .15s; }
  .svc:hover { transform:translateY(-3px) rotate(-.4deg); }
  .svc::before { content:""; position:absolute; right:-30px; top:-30px; width:130px; height:110px; background:var(--c, var(--lav)); clip-path:polygon(20% 0, 100% 10%, 90% 100%, 0 70%); opacity:.9; }
  .svc .num { position:relative; font:800 15px/1 Rubik, sans-serif; color:var(--mute); }
  .svc .meta { position:relative; font-size:13px; font-style:italic; color:var(--mute); }
  .svc .ic { position:relative; width:52px; height:52px; border:2px solid var(--line); border-radius:14px; background:var(--c, var(--lav)); display:grid; place-items:center; }
  .svc .ic svg { width:28px; height:28px; }
  .svc h3 { font-size:23px; font-weight:700; }
  .svc p { margin:0; color:#48425a; font-size:15.5px; flex:1; }
  .svc-ft { position:relative; display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .svc .more { font-weight:600; font-size:15px; text-decoration:none; color:var(--violet-d); }
  .svc .more:hover { text-decoration:underline; }
  .tag { align-self:flex-start; font:600 12.5px/1 "Golos Text", sans-serif; padding:6px 10px; border-radius:99px; border:1.5px solid var(--line); }
  .tag.free { background:#e3f6d6; }
  .tag.paid { background:var(--sun-l); }
  .svc code { font:600 14px/1.3 ui-monospace, "SF Mono", monospace; background:var(--lav2); padding:2px 6px; border-radius:6px; }
  @media (max-width:900px) { .path { grid-template-columns:1fr 1fr; } .path .svc { grid-column:span 1; } }
  @media (max-width:600px) { .path { grid-template-columns:1fr; gap:16px; } .path .svc.feat { padding:24px 20px; } .path .svc.feat h3 { font-size:26px; } }

  /* обмен тестами */
  .swap { background:var(--lav2); border-block:2px solid var(--line); }
  .swap .grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
  .steps { display:grid; gap:14px; margin:28px 0; }
  .step { display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:start; }
  .step .n { width:52px; height:52px; border-radius:50%; background:#fff; border:2px solid var(--line); display:grid; place-items:center; font:800 22px/1 Rubik, sans-serif; }
  .step:nth-child(2) .n { background:var(--sun); }
  .step:nth-child(3) .n { background:var(--violet); color:#fff; }
  .step h3 { font-size:20px; font-weight:700; margin:4px 0 4px; }
  .step p { margin:0; color:#48425a; font-size:15.5px; }
  .rule { display:inline-block; background:#fff; border:2px dashed var(--violet); border-radius:12px; padding:10px 14px; font-weight:600; color:var(--violet-d); }
  .wallet { background:#fff; border:2px solid var(--line); border-radius:22px; box-shadow:6px 6px 0 var(--line); padding:24px; }
  .wallet .top { display:flex; justify-content:space-between; align-items:baseline; }
  .wallet .bal { font:800 54px/1 Rubik, sans-serif; }
  .wallet .bal small { font-size:18px; font-weight:600; color:var(--mute); margin-left:6px; }
  .wallet .who { font-size:14px; color:var(--mute); }
  .feed { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
  .feed li { display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center; padding:10px; border-radius:12px; background:var(--paper); }
  .feed .av { width:40px; height:40px; border-radius:10px; background:var(--lav) center/cover; border:1.5px solid var(--line); }
  .feed b { display:block; font-size:15px; }
  .feed span { font-size:13px; color:var(--mute); }
  .feed em { font-style:normal; font-weight:700; font-size:14px; padding:5px 9px; border-radius:8px; }
  .feed .plus { background:#e3f6d6; color:#2e7a12; }
  .feed .minus { background:#ffe3ea; color:#b0264b; }
  @media (max-width:900px) { .swap .grid { grid-template-columns:1fr; gap:32px; } }

  /* игры клуба */
  .games { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
  .game { display:flex; flex-direction:column; text-decoration:none; background:#fff; border:2px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:4px 4px 0 var(--line); transition:transform .15s, box-shadow .15s; }
  .game:hover { transform:translate(-2px,-3px); box-shadow:6px 7px 0 var(--line); }
  .game .cv { aspect-ratio:16/10; background:var(--lav) center/cover no-repeat; border-bottom:2px solid var(--line); position:relative; }
  .game .cv.none { display:grid; place-items:center; font:800 44px/1 Rubik, sans-serif; color:var(--violet-d); background:repeating-linear-gradient(135deg, var(--lav2) 0 14px, var(--lav) 14px 28px); }
  .game .st { position:absolute; left:10px; top:10px; font:600 12px/1 "Golos Text", sans-serif; background:#fff; border:1.5px solid var(--line); border-radius:99px; padding:5px 8px; }
  .game .bd { padding:14px 16px 16px; display:grid; gap:4px; }
  .game b { font:700 18px/1.2 Rubik, sans-serif; }
  .game span { font-size:14px; color:var(--mute); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .game .ft { display:flex; justify-content:space-between; font-size:13px; color:var(--mute); margin-top:6px; }
  .game .ft i { font-style:normal; color:#2e7a12; font-weight:600; }
  .games-cta { margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
  .games-cta p { margin:0; color:var(--mute); }
  @media (max-width:1000px) { .games { grid-template-columns:repeat(3, 1fr); } }
  @media (max-width:760px) { .games { grid-template-columns:repeat(2, 1fr); gap:14px; } .game b { font-size:16px; } .game span { font-size:13px; } }

  /* почему Пабло */
  .why { background:var(--ink); color:var(--paper); }
  .why .grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
  .why .frame { position:relative; background:var(--paper); border-radius:22px; padding:18px; transform:rotate(-2deg); box-shadow:10px 10px 0 var(--violet); }
  .why .frame img { width:100%; display:block; }
  .why .frame .cap { position:absolute; right:-14px; bottom:-18px; background:var(--sun); color:var(--ink); border:2px solid var(--line); border-radius:10px; padding:8px 12px; font:600 14px/1.2 "Golos Text", sans-serif; transform:rotate(3deg); }
  .why h2 { font-size:clamp(30px, 3.6vw, 44px); font-weight:800; }
  .why h2 em { font-style:normal; color:var(--sun); }
  .why p { color:#cfc9da; font-size:18px; }
  .why .eyebrow { color:var(--lav); }
  .facts { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:28px; }
  .facts div { border:1.5px solid #4a4457; border-radius:14px; padding:16px; }
  .facts b { display:block; font:800 32px/1 Rubik, sans-serif; color:var(--paper); }
  .facts span { font-size:14px; color:#a9a2b6; }
  @media (max-width:900px) { .why .grid { grid-template-columns:1fr; } .why .frame { max-width:520px; } }
  @media (max-width:600px) { .facts { grid-template-columns:1fr 1fr; } .facts div:last-child { grid-column:1 / -1; } }

  /* цены */
  .price { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .plan { border:2px solid var(--line); border-radius:22px; padding:30px; background:#fff; box-shadow:6px 6px 0 var(--line); display:flex; flex-direction:column; gap:16px; }
  .plan.b { background:var(--lav2); }
  .plan h3 { font-size:26px; font-weight:800; }
  .plan .p { font:800 44px/1 Rubik, sans-serif; }
  .plan .p small { font:500 16px/1.2 "Golos Text", sans-serif; color:var(--mute); display:block; margin-top:6px; }
  .plan ul { margin:0; padding:0; list-style:none; display:grid; gap:10px; flex:1; }
  .plan li { display:grid; grid-template-columns:24px 1fr; gap:8px; }
  .plan li::before { content:"✓"; font-weight:800; color:#2e7a12; }
  .plan.b li::before { color:var(--violet-d); }
  @media (max-width:760px) { .price { grid-template-columns:1fr; } .plan { padding:22px; } }

  /* вопросы */
  .faq { display:grid; gap:12px; max-width:860px; }
  .faq details { border:2px solid var(--line); border-radius:16px; background:#fff; padding:0 22px; }
  .faq summary { cursor:pointer; list-style:none; padding:18px 0; font:700 19px/1.3 Rubik, sans-serif; display:flex; justify-content:space-between; gap:16px; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after { content:"+"; font-size:26px; line-height:.8; color:var(--violet); transition:transform .2s; }
  .faq details[open] summary::after { transform:rotate(45deg); }
  .faq p { margin:0 0 18px; color:#48425a; }

  /* финал и подвал */
  .final { text-align:center; padding:96px 0; position:relative; overflow:hidden; }
  .final h2 { font-size:clamp(34px, 5vw, 60px); font-weight:800; max-width:820px; margin:0 auto 16px; }
  .final p { color:var(--mute); margin:0 auto 30px; max-width:520px; }
  .final .ctas { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .final .bg1, .final .bg2 { position:absolute; z-index:-1; }
  .final .bg1 { width:260px; height:200px; left:-60px; top:40px; background:var(--lav); clip-path:polygon(0 10%, 100% 0, 80% 100%, 10% 90%); }
  .final .bg2 { width:220px; height:180px; right:-40px; bottom:30px; background:var(--sun); clip-path:polygon(10% 0, 100% 20%, 90% 100%, 0 80%); }
  footer { border-top:2px solid var(--line); padding:40px 0 60px; font-size:15px; }
  footer .grid { display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:28px; }
  footer h4 { margin:0 0 12px; font:700 15px/1 Rubik, sans-serif; }
  footer a { display:block; color:var(--mute); text-decoration:none; padding:3px 0; }
  footer a:hover { color:var(--ink); }
  footer .about { color:var(--mute); }
  footer .w98 { display:inline-flex; margin-top:14px; font:600 13px/1 "Golos Text", sans-serif; padding:8px 12px; border:2px solid var(--line); border-radius:0; background:#c0c0c0; color:#000; box-shadow:inset -2px -2px 0 #808080, inset 2px 2px 0 #fff; }
  @media (max-width:760px) { footer .grid { grid-template-columns:1fr 1fr; } footer .grid > div:first-child { grid-column:1 / -1; } }

  /* настоящие иконки сторов прямо в тексте */
  img.ico { width:1.05em; height:1.05em; vertical-align:-.16em; margin:0 .28em 0 .05em; }

  /* мобильное меню */
  .burger { display:none; border:2px solid var(--line); background:#fff; border-radius:10px; width:42px; height:40px; cursor:pointer; font:700 18px/1 Rubik, sans-serif; }
  .drawer { display:none; border-top:1px solid var(--soft); background:var(--paper); }
  .drawer.open { display:block; }
  .drawer a { display:block; padding:14px 0; border-bottom:1px solid var(--soft); text-decoration:none; font-weight:600; font-size:18px; }
  nav.main a.on { color:var(--ink); text-decoration:underline; text-decoration-color:var(--sun); text-decoration-thickness:4px; text-underline-offset:7px; }
  @media (min-width:1101px) { .bar { gap:20px; } nav.main { gap:18px; } }   /* влезает «Войти» */
  @media (max-width:1100px) { nav.main { display:none; } .burger { display:block; } }
  @media (max-width:600px) { .why .frame .cap { right:8px; } }


  /* ── анимации: появление при прокрутке (включает layout.js) ── */
  /* выезд сбоку и парящие картинки не должны давать сдвиг страницы вбок на телефоне */
  main { overflow-x:clip; }
  .anim .rv { transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--rv-delay, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--rv-delay, 0ms); }
  .anim .rv:not(.in) { opacity:0; }
  .anim .rv-up:not(.in) { transform:translateY(34px); }
  .anim .rv-down:not(.in) { transform:translateY(-34px); }
  .anim .rv-left:not(.in) { transform:translateX(-48px); }
  .anim .rv-right:not(.in) { transform:translateX(48px); }
  .anim .rv-zoom:not(.in) { transform:scale(.88) rotate(-2deg); }
  .anim .rv-pop:not(.in) { transform:scale(.6) rotate(-6deg); }
  .anim .rv-pop { transition-timing-function:cubic-bezier(.3,1.5,.5,1); }
  .anim .rv.in { transition-delay:var(--rv-delay, 0ms); }
  /* карточки после появления снова реагируют на наведение без задержки */
  .anim .svc.rv.in, .anim .game.rv.in, .anim .store.rv.in, .anim .plan.rv.in { transition:transform .15s, box-shadow .15s, opacity .7s; }

  /* номера шагов выскакивают вслед за шагом */
  .anim .step.rv .n { transition:transform .6s cubic-bezier(.3,1.8,.5,1) calc(var(--rv-delay, 0ms) + 160ms); }
  .anim .step.rv:not(.in) .n { transform:scale(.3) rotate(-30deg); }

  /* ── наклон карточек за курсором (layout.js ставит .tilting и --mx/--my от -.5 до .5) ── */
  .svc, .plan, a.game, [data-tilt] { --tilt:7deg; }
  .svc.feat { --tilt:1.6deg; }
  .plan { --tilt:3deg; }
  .tilting { transform:perspective(1100px) rotateX(calc(var(--my, 0) * -1 * var(--tilt))) rotateY(calc(var(--mx, 0) * var(--tilt))) translateY(-4px) !important; }
  [data-tilt]:not(.rv) { transition:transform .2s ease-out; }

  /* ── иллюстрация в карточке: .ill > img ──
     обёртка выскакивает вслед за карточкой, на наведении подпрыгивает,
     при наклоне уходит в глубину; вечное движение — классом fx-* на img */
  .ill { display:block; pointer-events:none; translate:calc(var(--mx, 0) * -16px) calc(var(--my, 0) * -14px);
    transition:scale .5s cubic-bezier(.3,1.7,.5,1), rotate .5s cubic-bezier(.3,1.7,.5,1), translate .25s ease-out; }
  .ill img { display:block; width:100%; height:100%; object-fit:contain; }
  .svc:hover .ill, [data-tilt]:hover .ill, .ill-host:hover .ill { scale:1.1; rotate:-5deg; }
  .anim .rv:not(.in) .ill { opacity:0; }
  .anim .rv.in .ill { animation:fx-popin .9s cubic-bezier(.3,1.5,.5,1) calc(var(--rv-delay, 0ms) + 220ms) backwards; }
  @keyframes fx-popin { from { opacity:0; transform:scale(.3) rotate(-18deg); } }

  /* ── купюры и вспышка из одного листа старого сайта ──
     Payment-app-hero-img-1.svg: пять купюр, 1b — вспышка. Окно .bill вырезает
     одну; --k — масштаб листа (0.6 ≈ купюра 55 px). */
  .bill, .crop { position:absolute; overflow:hidden; pointer-events:none; --k:.6; --sw:725;
    width:calc(var(--w) * var(--k) * 1px); height:calc(var(--h) * var(--k) * 1px); }
  .bill img, .crop img { position:absolute; max-width:none; width:calc(var(--sw) * var(--k) * 1px); height:auto;
    left:calc(var(--x) * var(--k) * -1px); top:calc(var(--y) * var(--k) * -1px); }
  .bill.b1 { --x:224; --y:242; --w:96; --h:50; }
  .bill.b2 { --x:362; --y:639; --w:96; --h:52; }
  .bill.b3 { --x:209; --y:548; --w:96; --h:50; }
  .bill.b4 { --x:176; --y:364; --w:224; --h:114; }
  .bill.b5 { --x:466; --y:407; --w:112; --h:66; }
  .bill.spark { --x:100; --y:0; --w:390; --h:250; }
  /* .crop — то же окно для других листов: KeepInTouch1/2 — головы над линией,
     низ окна ровно по линии, чтобы голова «выглядывала» из-за края карточки */
  .crop.kit2 { --sw:612; --x:0; --y:150; --w:480; --h:470; }
  .crop.kit1 { --sw:612; --x:130; --y:138; --w:482; --h:490; }

  /* .peek — картинка выглядывает из-за карточки: .peek-art под ней, остальное сверху.
     Обёртка сама создаёт слой, так что при появлении порядок не прыгает. */
  .peek { position:relative; isolation:isolate; }
  .peek > .peek-art { position:absolute; z-index:0; pointer-events:none; }
  .peek > :not(.peek-art) { position:relative; z-index:1; }

  /* ── вечное движение: fx-* ──
     --d длительность, --dl задержка (минус — начать с середины), --fx/--fy/--fr ход */
  .fx-float { animation:fx-float var(--d, 7s) ease-in-out var(--dl, 0s) infinite; }
  @keyframes fx-float { 0%, 100% { transform:translate(0, 0) rotate(0deg); } 50% { transform:translate(var(--fx, 4px), var(--fy, -12px)) rotate(var(--fr, 3deg)); } }
  .fx-bob { animation:fx-bob var(--d, 3.2s) ease-in-out var(--dl, 0s) infinite; }
  @keyframes fx-bob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(var(--fy, -8px)); } }
  .fx-sway { transform-origin:50% 100%; animation:fx-sway var(--d, 4.5s) ease-in-out var(--dl, 0s) infinite; }
  @keyframes fx-sway { 0%, 100% { transform:rotate(calc(var(--fr, 3deg) * -1)); } 50% { transform:rotate(var(--fr, 3deg)); } }
  .fx-drift { animation:fx-drift var(--d, 9s) ease-in-out var(--dl, 0s) infinite; }
  @keyframes fx-drift {
    0%, 100% { transform:translate(0, 0) rotate(0deg); }
    33% { transform:translate(var(--fx, 10px), var(--fy, -16px)) rotate(var(--fr, 10deg)); }
    66% { transform:translate(calc(var(--fx, 10px) * -.6), calc(var(--fy, -16px) * .4)) rotate(calc(var(--fr, 10deg) * -.5)); } }
  .fx-spin { animation:fx-spin var(--d, 24s) linear var(--dl, 0s) infinite; }
  @keyframes fx-spin { to { transform:rotate(360deg); } }
  .fx-twinkle { animation:fx-twinkle var(--d, 3s) ease-in-out var(--dl, 0s) infinite; }
  @keyframes fx-twinkle { 0%, 100% { transform:scale(.82) rotate(0deg); opacity:.7; } 50% { transform:scale(1.08) rotate(14deg); opacity:1; } }
  .fx-flip { animation:fx-flip var(--d, 5s) cubic-bezier(.5,0,.3,1) var(--dl, 0s) infinite; }
  @keyframes fx-flip {
    0%, 55% { transform:perspective(500px) translateY(0) rotateY(0deg); }
    70% { transform:perspective(500px) translateY(-18px) rotateY(180deg); }
    85%, 100% { transform:perspective(500px) translateY(0) rotateY(360deg); } }
  .fx-fly { animation:fx-fly var(--d, 6s) ease-in-out var(--dl, 0s) infinite; }
  @keyframes fx-fly {
    0%, 100% { transform:translate(0, 0) rotate(0deg); }
    25% { transform:translate(6px, -12px) rotate(-3deg); }
    50% { transform:translate(-2px, -4px) rotate(1deg); }
    75% { transform:translate(-8px, -14px) rotate(-2deg); } }
  .fx-jump { transform-origin:50% 100%; animation:fx-jump var(--d, 3.6s) cubic-bezier(.4,0,.3,1) var(--dl, 0s) infinite; }
  @keyframes fx-jump {
    0%, 55%, 100% { transform:translateY(0) scale(1, 1); }
    62% { transform:translateY(0) scale(1.04, .95); }
    75% { transform:translateY(-16px) rotate(-3deg) scale(.98, 1.03); }
    88% { transform:translateY(0) scale(1.03, .97); } }
  .fx-look { animation:fx-look var(--d, 5s) ease-in-out var(--dl, 0s) infinite; }
  @keyframes fx-look {
    0%, 100% { transform:translate(0, 0) rotate(0deg); }
    20%, 35% { transform:translate(-5px, 1px) rotate(-4deg); }
    55%, 70% { transform:translate(5px, -2px) rotate(4deg); } }
  .fx-hit { animation:fx-hit var(--d, 3.4s) ease-out var(--dl, 0s) infinite; }
  @keyframes fx-hit {
    0%, 66%, 100% { transform:translate(0, 0) rotate(0deg) scale(1); }
    70% { transform:translate(-4px, 3px) rotate(-4deg) scale(.96); }
    76% { transform:translate(3px, -2px) rotate(3deg) scale(1.03); }
    84% { transform:translate(0, 0) rotate(0deg) scale(1); } }
  /* выглядывает из-за края: низ спрятан за карточкой, голова поднимается и опускается */
  .fx-peep { animation:fx-peep var(--d, 5s) cubic-bezier(.4,0,.3,1) var(--dl, 0s) infinite; }
  @keyframes fx-peep {
    0%, 100% { transform:translateY(var(--fy, 28px)); }
    16%, 64% { transform:translateY(0); }
    72% { transform:translateY(-5px); } }
  .fx-pulse { animation:fx-pulse var(--d, 2.6s) ease-in-out var(--dl, 0s) infinite; }
  @keyframes fx-pulse { 0%, 100% { transform:scale(1); } 50% { transform:scale(var(--fs, 1.06)); } }
  /* сцена вне экрана спит (layout.js ставит fx-sleep на [data-scene]) */
  .fx-sleep [class*="fx-"], .fx-sleep::before, .fx-sleep::after { animation-play-state:paused !important; }

  /* подчёркивание в заголовке рисуется */
  .u svg path { stroke-dasharray:420; stroke-dashoffset:420; animation:draw 1.1s .5s cubic-bezier(.6,0,.2,1) forwards; }
  @keyframes draw { to { stroke-dashoffset:0; } }

  /* кубистские плоскости за портретом плавают */
  .art .s1 { animation:drift1 9s ease-in-out infinite; }
  .art .s2 { animation:drift2 7s ease-in-out infinite; }
  .art .s3 { animation:drift3 8s ease-in-out infinite; }
  .art img.pablo { animation:sway 6s ease-in-out infinite; transform-origin:50% 100%; }
  @keyframes drift1 { 50% { transform:translate(-8px, 6px) rotate(-1.5deg); } }
  @keyframes drift2 { 50% { transform:translate(10px, -12px) rotate(4deg); } }
  @keyframes drift3 { 50% { transform:translate(-10px, 8px) rotate(-5deg); } }
  @keyframes sway { 50% { transform:rotate(1.2deg) translateY(-3px); } }

  /* бегущая строка идёт волной, звёздочки крутятся */
  .free .run > span { display:inline-block; animation:wave 2.8s ease-in-out infinite; animation-delay:calc(var(--i, 0) * -.45s); }
  .free .run span::before { display:inline-block; animation:fx-spin 5s linear infinite; }
  @keyframes wave { 0%, 100% { transform:translateY(3px) rotate(-.8deg); } 50% { transform:translateY(-3px) rotate(.8deg); } }
  .free:hover .run, .free:hover .run > span { animation-play-state:paused; }

  /* точки карусели [data-dots] */
  [data-dots] { display:flex; justify-content:center; gap:2px; margin-top:14px; }
  [data-dots][hidden] { display:none; }
  [data-dots] button { width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; }
  [data-dots] button::before { content:""; width:10px; height:10px; border-radius:50%; border:2px solid var(--line); background:#fff; transition:transform .25s, background .25s; }
  [data-dots] button.on::before { background:var(--violet); transform:scale(1.25); }

  @media (prefers-reduced-motion: reduce) {
    .u svg path { animation:none; stroke-dashoffset:0; }
    .art .s1, .art .s2, .art .s3, .art img.pablo, .free .run, .free .run > span, .free .run span::before { animation:none; }
    [class*="fx-"] { animation:none !important; }
    .ill { transition:none; }
    .anim .rv.in .ill { animation:none; }
    .anim .step.rv:not(.in) .n { transform:none; }
  }

  /* главная: путь проекта на примере Свинофермы */
  .case-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
  .case-shot { position:sticky; top:96px; display:block; background:#fff; border:2px solid var(--line); border-radius:16px; box-shadow:8px 8px 0 var(--violet); overflow:hidden; text-decoration:none; transform:rotate(-1deg); transition:transform .2s; }
  .case-shot:hover { transform:rotate(0) translateY(-3px); }
  .case-bar { display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:2px solid var(--line); background:var(--paper); }
  .case-bar i { width:11px; height:11px; border-radius:50%; border:1.5px solid var(--line); background:var(--rose); }
  .case-bar i:nth-child(2) { background:var(--sun); } .case-bar i:nth-child(3) { background:var(--leaf); }
  .case-bar b { margin-left:8px; font:600 13px/1 "Golos Text", sans-serif; background:#fff; border:1.5px solid var(--soft); border-radius:8px; padding:5px 10px; }
  .case-shot img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
  .case-steps { list-style:none; margin:0; padding:0; counter-reset:cs; display:grid; gap:14px; }
  .case-steps li { position:relative; display:grid; gap:4px; padding:16px 18px 16px 64px; background:#fff; border:2px solid var(--line); border-radius:16px; box-shadow:4px 4px 0 var(--line); }
  .case-steps li::before { counter-increment:cs; content:counter(cs); position:absolute; left:16px; top:16px; width:34px; height:34px; border-radius:50%; background:var(--sun); border:2px solid var(--line); display:grid; place-items:center; font:800 16px/1 Rubik, sans-serif; }
  .case-steps li:last-child::before { background:var(--violet); color:#fff; }
  .case-steps b { font:700 19px/1.2 Rubik, sans-serif; }
  .case-steps span { color:#48425a; font-size:15.5px; }
  .case-steps a { justify-self:start; margin-top:4px; font-weight:600; font-size:15px; color:var(--violet-d); text-decoration:none; }
  .case-steps a:hover { text-decoration:underline; }
  @media (max-width:900px) { .case-grid { grid-template-columns:1fr; } .case-shot { position:relative; top:0; } }
  @media (max-width:600px) { .case-steps li { padding:14px 14px 14px 58px; } .case-steps li::before { left:12px; top:14px; } }